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

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

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

यह जानना मुश्किल हो सकता है कि कीबोर्ड की किन सुविधाओं को लागू करना है. Accessible Rich Internet Applications (ARIA) Authoring Practices गाइड में, कॉम्पोनेंट के टाइप और उनके साथ काम करने वाली कीबोर्ड कार्रवाइयों के बारे में बताया गया है.

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

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 से ज़्यादा होने पर, एलिमेंट को नैचुरल टैब ऑर्डर के सबसे ऊपर ले जाया जाता है. अगर एक से ज़्यादा एलिमेंट के लिए tabindex की वैल्यू 0 से ज़्यादा है, तो टैब का क्रम, शून्य से ज़्यादा वाली सबसे कम वैल्यू से शुरू होता है और बढ़ता जाता है.

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

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