Tabindex की मदद से फ़ोकस कंट्रोल करना

Rob Dodson

Alexandra Klepper

<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 से उपयोगकर्ता को बेहतर अनुभव मिलता है. उदाहरण के लिए, अगर आपने अलग-अलग कॉन्टेंट सेक्शन वाला एक बेहतरीन पेज बनाया है, जहां पेज लोड होने के अलग-अलग पॉइंट पर कुछ कॉन्टेंट छिपा हुआ है. इसका मतलब यह हो सकता है कि नेविगेशन लिंक, पेज को रीफ़्रेश किए बिना दिखने वाले कॉन्टेंट में बदलाव करते हैं.

इस मामले में, चुने गए कॉन्टेंट एरिया की पहचान करें और उसे tabindex of -1 दें. इसके बाद, उसका focus तरीका कॉल करें. इससे यह पक्का होता है कि कॉन्टेंट, टैब के सामान्य क्रम में न दिखे. इस तकनीक को फ़ोकस मैनेज करना कहा जाता है. इससे, उपयोगकर्ता के कॉन्टेक्स्ट को साइट के विज़ुअल कॉन्टेंट के साथ सिंक किया जाता है.

कॉम्पोनेंट में फ़ोकस मैनेज करना

कुछ मामलों में, आपको कंट्रोल लेवल पर भी फ़ोकस मैनेज करना होगा, जैसे कि कस्टम एलिमेंट की मदद से.

यह जानना मुश्किल हो सकता है कि कीबोर्ड की कौनसी सुविधाएं लागू करनी हैं. ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन (एआरआईए) बनाने के तरीकों की गाइड में, कॉम्पोनेंट के टाइप और कीबोर्ड की कौनसी कार्रवाइयां उन पर काम करती हैं, इसकी जानकारी दी गई है.

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

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 विशेषता के व्यवहार को एमुलेट करता है. इससे, सहायक टेक्नोलॉजी के ज़रिए एलिमेंट को चुने जाने या पढ़े जाने से रोका जा सकता है.

tabindex > 0 से बचें

0 से ज़्यादा का कोई भी tabindex, एलिमेंट को टैब के सामान्य क्रम में सबसे आगे ले जाता है. अगर tabindex की वैल्यू 0 से ज़्यादा वाले कई एलिमेंट हैं, तो टैब करने का क्रम 0 से ज़्यादा की सबसे कम वैल्यू से शुरू होता है और सबसे ज़्यादा वैल्यू तक जाता है.

tabindex को 0 से ज़्यादा पर सेट करना ऐंटी-पैटर्न माना जाता है, क्योंकि स्क्रीन रीडर, पेज पर टैब के क्रम में नहीं, बल्कि DOM के क्रम में नेविगेट करते हैं. अगर आपको किसी एलिमेंट को टैब के क्रम में जल्दी दिखाना है, तो उसे DOM में पहले स्थान पर ले जाएं.

Lighthouse की मदद से, tabindex > 0 वाले एलिमेंट की पहचान की जा सकती है. सुलभता ऑडिट (Lighthouse > विकल्प > सुलभता) चलाएं और "किसी भी एलिमेंट की [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>

कीबोर्ड ऐक्सेस करने की रेसिपी

अगर आपको यह नहीं पता कि आपके कस्टम कॉम्पोनेंट को कीबोर्ड की किस लेवल की सहायता की ज़रूरत पड़ सकती है, तो एआरआई लेखन के तरीके 1.1 देखें. इस गाइड में, सामान्य यूज़र इंटरफ़ेस (यूआई) पैटर्न की सूची दी गई है. साथ ही, यह भी बताया गया है कि आपके कॉम्पोनेंट किन बटन के साथ काम करने चाहिए.