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

Rob Dodson

Alexandra Klepper

<button> या <input> जैसे स्टैंडर्ड एचटीएमएल एलिमेंट में, कीबोर्ड की मदद से ऐक्सेस करने की सुविधा पहले से मौजूद होती है. इसलिए, जब भी हो सके, इसका इस्तेमाल किया जाना चाहिए. हालांकि, अगर आपको पसंद के मुताबिक इंटरैक्टिव एलिमेंट बनाने हैं, तो tabindex जोड़कर उपयोगकर्ता के संभावित व्यवहार को बनाया जा सकता है.

tabindex को सिर्फ़ इंटरैक्टिव कॉन्टेंट में जोड़ें. भले ही, कॉन्टेंट ज़रूरी हो, जैसे कि कोई मुख्य इमेज, फिर भी स्क्रीन रीडर इस्तेमाल करने वाले लोग फ़ोकस जोड़े बिना उसे समझ सकते हैं.

tabindex एट्रिब्यूट क्या है?

अगर आपको डिफ़ॉल्ट रूप से मौजूद एलिमेंट के टैब के क्रम में बदलाव करना है, तो tabindex एचटीएमएल एट्रिब्यूट का इस्तेमाल करके, एलिमेंट की टैब पोज़िशन को साफ़ तौर पर सेट किया जा सकता है.

tabindex एट्रिब्यूट को किसी भी एलिमेंट पर लागू किया जा सकता है. हालांकि, इसे सिर्फ़ इंटरैक्टिव एलिमेंट पर लागू किया जाना चाहिए. साथ ही, यह पूर्णांक की वैल्यू की रेंज लेता है. tabindex की मदद से, फ़ोकस किए जा सकने वाले पेज एलिमेंट के लिए, क्रम से लगाने का तरीका तय किया जा सकता है. साथ ही, टैब के क्रम में ऐसे एलिमेंट डाले जा सकते हैं जिन पर फ़ोकस नहीं किया जा सकता. इसके अलावा, टैब के क्रम से एलिमेंट हटाए भी जा सकते हैं. उदाहरण के लिए:

tabindex="0": टैब के नैचुरल क्रम में एलिमेंट डालता है. Tab दबाकर, एलिमेंट पर फ़ोकस किया जा सकता है. इसके अलावा, एलिमेंट के focus() तरीके को कॉल करके भी उस पर फ़ोकस किया जा सकता है.

tabindex="-1": किसी एलिमेंट को टैब के सामान्य क्रम से हटाता है. हालांकि, एलिमेंट पर फ़ोकस करने के लिए, अब भी उसके focus() तरीके को कॉल किया जा सकता है

tabindex="5": 0 से ज़्यादा का कोई भी tabindex, उस एलिमेंट को टैब के नैचुरल क्रम में सबसे आगे ले आता है. अगर 0 से ज़्यादा tabindex वाले कई एलिमेंट हैं, तो टैब का क्रम शून्य से ज़्यादा की सबसे कम वैल्यू से शुरू होता है और ऊपर की ओर बढ़ता है. 0 से ज़्यादा के tabindex का इस्तेमाल करना, ऐंटी-पैटर्न माना जाता है.

पक्का करें कि कंट्रोल को कीबोर्ड से ऐक्सेस किया जा सकता हो

Lighthouse जैसे टूल, सुलभता से जुड़ी कुछ समस्याओं का अपने-आप पता लगाने में काफ़ी मददगार होते हैं. हालांकि, कुछ टेस्टिंग अब भी मैन्युअल तरीके से की जानी चाहिए.

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