इस पेज का अनुवाद Cloud Translation API से किया गया है.

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 का इस्तेमाल करना एक एंटी-पैटर्न.

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

लाइटहाउस जैसा कोई टूल, सुलभता की कुछ चीज़ों का अपने-आप पता लगा लेता है हालांकि, कुछ परीक्षण अब भी मैन्युअल रूप से किए जाने चाहिए.

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

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