CodePen

टैब ऑर्डर में कोई एलिमेंट डालना

tabindex="0" का इस्तेमाल करके, टैब के सामान्य क्रम में कोई एलिमेंट डालें. उदाहरण के लिए:

<div tabindex="0">Focus me with the TAB key</div>

किसी एलिमेंट पर फ़ोकस करने के लिए, Tab बटन दबाएं या एलिमेंट के focus() तरीके को कॉल करें.

टैब के क्रम से किसी एलिमेंट को हटाना

tabindex="-1" का इस्तेमाल करके, कोई एलिमेंट हटाएं. उदाहरण के लिए:

<button tabindex="-1">Can't reach me with the TAB key!</button>

इससे, टैब के सामान्य क्रम से किसी एलिमेंट को हटा दिया जाता है. हालांकि, एलिमेंट के focus() तरीके को कॉल करके, उस पर फ़ोकस किया जा सकता है.

ध्यान दें कि किसी एलिमेंट पर tabindex="-1" लागू करने से, उसके चाइल्ड एलिमेंट पर कोई असर नहीं पड़ता. अगर वे अपने-आप टैब ऑर्डर में हैं या tabindex वैल्यू की वजह से टैब ऑर्डर में हैं, तो वे टैब ऑर्डर में ही बने रहेंगे. टैब ऑर्डर से किसी एलिमेंट और उसके सभी चाइल्ड एलिमेंट को हटाने के लिए, WICG के inert पॉलीफ़िल का इस्तेमाल करें. polyfill, सुझाई गई inert विशेषता के व्यवहार को एमुलेट करता है. इससे, सहायक टेक्नोलॉजी के ज़रिए एलिमेंट को चुने जाने या पढ़े जाने से रोका जा सकता है.

वीडियो बनाने की शुरुआत करें!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

सही इफ़ेक्ट पाने के लिए, steps(var(--count)) के इस्तेमाल पर ध्यान दें ✨