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