<button> या <input> जैसे स्टैंडर्ड एचटीएमएल एलिमेंट में कीबोर्ड की सुलभता सुविधाएं मुफ़्त में पहले से मौजूद होती हैं. हालांकि, अगर कस्टम इंटरैक्टिव कॉम्पोनेंट बनाए जा रहे हैं, तो tabindex एट्रिब्यूट का इस्तेमाल करके यह पक्का करें कि उनका कीबोर्ड ऐक्सेस किया जा सके.
देखें कि आपके कंट्रोल को कीबोर्ड से ऐक्सेस किया जा सकता है या नहीं
Lighthouse जैसा एक टूल कुछ सुलभता समस्याओं का पता लगाने में बेहतरीन है, लेकिन कुछ चीज़ों की जांच सिर्फ़ इंसान ही कर सकता है.
अपनी साइट पर नेविगेट करने के लिए, Tab बटन दबाकर देखें. क्या आपके पास पेज पर मौजूद सभी
इंटरैक्टिव कंट्रोल हैं? अगर ऐसा नहीं है, तो आपको उन कंट्रोल पर फ़ोकस करने की सुविधा को बेहतर करने के लिए, tabindex का इस्तेमाल करना पड़ सकता है.
टैब में कोई एलिमेंट डालना
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 पॉलीफ़िल का इस्तेमाल करें.
पॉलीफ़िल, प्रस्तावित inert एट्रिब्यूट के व्यवहार को एम्युलेट करता है. यह एलिमेंट को सहायक टेक्नोलॉजी से चुने जाने या पढ़ने से रोकता है.
tabindex > 0 से बचें
0 से ज़्यादा कोई भी tabindex एलिमेंट को नैचुरल टैब ऑर्डर के सामने ले जाता है. अगर tabindex वाले कई एलिमेंट हैं, जो 0 से ज़्यादा हैं, तो टैब का क्रम, सबसे कम वैल्यू से शुरू होता है और ऊपर की ओर काम करता है.
0 से ज़्यादा tabindex का इस्तेमाल करना एक एंटी-पैटर्न माना जाता है, क्योंकि स्क्रीन रीडर पेज को DOM के क्रम में नेविगेट करते हैं, टैब के क्रम में नहीं. अगर आपको किसी एलिमेंट को टैब में जल्दी शामिल करना है, तो उसे DOM में किसी पहले वाली जगह पर ले जाना चाहिए.
लाइटहाउस, tabindex > 0 वाले एलिमेंट को पहचानना आसान बनाता है. सुलभता ऑडिट चलाएं (लाइटहाउस > विकल्प > सुलभता) और "किसी भी एलिमेंट का [tabindex] वैल्यू 0 से ज़्यादा नहीं है" ऑडिट के नतीजे देखें.
"tabindex को रोल किया जा रहा है" की मदद से, ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बनाएं
अगर कोई जटिल कॉम्पोनेंट बनाया जा रहा है, तो आपको फ़ोकस के अलावा, अतिरिक्त कीबोर्ड
की सुविधा की ज़रूरत पड़ सकती है. पहले से मौजूद select एलिमेंट का इस्तेमाल करें. इस पर फ़ोकस किया जा सकता है और अतिरिक्त सुविधाओं (चुने जा सकने वाले विकल्प) को दिखाने के लिए, ऐरो बटन का इस्तेमाल किया जा सकता है.
अपने कॉम्पोनेंट में इस तरह के फ़ंक्शन लागू करने के लिए, "रोविंग tabindex" नाम वाली तकनीक का इस्तेमाल करें. Roving Tabindex का इस्तेमाल करके, मौजूदा डिवाइस को छोड़कर बाकी सभी बच्चों के लिए, tabindex को -1 पर सेट किया जा सकता है. इसके बाद यह कॉम्पोनेंट, कीबोर्ड इवेंट लिसनर का इस्तेमाल करता है. इससे यह तय होता है कि उपयोगकर्ता ने किस बटन को दबाया है.
ऐसा होने पर, कॉम्पोनेंट बच्चे के tabindex के फ़ोकस को -1 पर सेट करता है और tabindex पर फ़ोकस करता है. साथ ही, इसके focus() तरीके को 0 पर सेट करता है.
पहले
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
बाद में
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
कीबोर्ड से रेसिपी ऐक्सेस करने की सुविधा
अगर आपको यह नहीं पता कि आपके कस्टम कॉम्पोनेंट को कीबोर्ड के किस लेवल की ज़रूरत पड़ सकती है, तो ARIA ऑथरिंग तरीके 1.1 देखें. इस आसान गाइड में सामान्य यूज़र इंटरफ़ेस (यूआई) पैटर्न की सूची है. साथ ही, इसकी मदद से यह भी पता लगाया जा सकता है कि आपके कॉम्पोनेंट को किस तरह की कुंजियों का इस्तेमाल करना चाहिए.