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