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 से टैब का क्रम, शून्य से बड़ी संख्या से शुरू होता है और बेहतर तरीके से काम करता है. 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 से बचें

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

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