CodePen

إدراج عنصر في ترتيب التنقل بـ 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)) للحصول على التأثير الصحيح ✨