إدراج عنصر في ترتيب التنقل بـ Tab
يمكنك إدراج عنصر في ترتيب علامات التبويب الطبيعي باستخدام tabindex="0"
. مثال:
<div tabindex="0">Focus me with the TAB key</div>
للتركيز على عنصر، اضغط على مفتاح Tab
أو استدعِ الطريقة focus()
الخاصة بالعنصر.
إزالة عنصر من ترتيب التنقل بـ Tab
يمكنك إزالة عنصر باستخدام tabindex="-1"
. مثال:
<button tabindex="-1">Can't reach me with the TAB key!</button>
يؤدي هذا إلى إزالة عنصر من ترتيب علامات التبويب الطبيعي، ولكن لا يزال من الممكن التركيز على العنصر من خلال استدعاء طريقة focus()
.
يُرجى العِلم أنّ تطبيق tabindex="-1"
على عنصر لا يؤثر في عناصره الثانوية،
وإذا كانت بترتيب علامات التبويب بشكل طبيعي أو بسبب قيمة tabindex
،
ستظل بترتيب علامات التبويب.
لإزالة عنصر وكل عناصره الثانوية من ترتيب التنقل بـ Tab، يمكنك استخدام polyfill inert
الخاصة بـ WICG.
ويحاكي رمز polyfill سلوك سمة inert
المقترَحة، ما يمنع اختيار العناصر أو قراءتها باستخدام التكنولوجيا المساعِدة.
ابدأ اللعب.
.loader {
animation: spin 0.75s infinite steps(var(--count));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
لاحِظ استخدام steps(var(--count))
للحصول على التأثير الصحيح ✨