सिमैंटिक एचटीएमएल एलिमेंट के डीओएम पोज़िशन से मिलने वाला डिफ़ॉल्ट टैब क्रम सुविधाजनक होता है. हालांकि, कभी-कभी आपको टैब के क्रम में बदलाव करना पड़ सकता है. एचटीएमएल में एलिमेंट को एक जगह से दूसरी जगह ले जाना बेहतर होता है, लेकिन शायद यह संभव न हो. इन मामलों में, किसी एलिमेंट के टैब की पोज़िशन को साफ़ तौर पर सेट करने के लिए, tabindex एचटीएमएल एट्रिब्यूट का इस्तेमाल किया जा सकता है.
tabindex को किसी भी एलिमेंट पर लागू किया जा सकता है. हालांकि, यह ज़रूरी नहीं है कि यह हर एलिमेंट के लिए काम का हो. साथ ही, यह पूर्णांक वैल्यू की रेंज लेता है. tabindex की मदद से, फ़ोकस करने लायक पेज एलिमेंट के लिए साफ़ तौर पर क्रम तय किया जा सकता है. टैब के क्रम में ऐसा एलिमेंट डाला जा सकता है जो फ़ोकस नहीं किया जा सकता, और टैब के क्रम से एलिमेंट हटाया जा सकता है. उदाहरण के लिए:
tabindex="0": किसी एलिमेंट को नैचुरल टैब क्रम में डालता है. Tab को दबाकर, एलिमेंट को फ़ोकस किया जा सकता है. साथ ही, एलिमेंट को इसकी focus() मेथड से कॉल करके फ़ोकस किया जा सकता है.
tabindex="-1": यह एलिमेंट को नैचुरल टैब क्रम से हटा देता है. हालांकि, एलिमेंट को उसकी focus() मेथड से इस्तेमाल करके फ़ोकस किया जा सकता है
tabindex="5": 0 से ज़्यादा वाला कोई भी tabindex, उस एलिमेंट को नैचुरल टैब क्रम के
सामने ले आता है. अगर ऐसे कई एलिमेंट हैं जिनका Tabindex 0 से ज़्यादा है, तो टैब का क्रम, शून्य से बड़ी वैल्यू से शुरू होता है. साथ ही, अगले लेवल पर जाता है. 0 से बड़े Tabindex को एंटी-पैटर्न माना जाता है.
यह खास तौर पर हेडर, इमेज या लेख के टाइटल जैसे नॉन-इनपुट एलिमेंट के लिए सही है. जहां तक हो सके, अपने सोर्स कोड को इस तरह से व्यवस्थित करना सबसे अच्छा होता है कि डीओएम क्रम से लॉजिकल टैब ऑर्डर मिले. अगर tabindex का इस्तेमाल किया जाता है, तो उसे बटन, टैब, ड्रॉपडाउन, और टेक्स्ट फ़ील्ड जैसे कस्टम इंटरैक्टिव कंट्रोल तक सीमित रखें. इनमें ऐसे एलिमेंट शामिल हैं जिनके लिए उपयोगकर्ता इनपुट दे सकता है.
सिर्फ़ इंटरैक्टिव कॉन्टेंट में tabindex जोड़ें. मुख्य इमेज जैसा कॉन्टेंट ज़रूरी होने पर भी, स्क्रीन रीडर के उपयोगकर्ता फ़ोकस जोड़े बिना ही उसे समझ सकते हैं.
पेज लेवल पर फ़ोकस मैनेज करना
कभी-कभी, बिना किसी रुकावट के उपयोगकर्ता अनुभव के लिए tabindex ज़रूरी होता है. उदाहरण के लिए, अगर आपने अलग-अलग कॉन्टेंट सेक्शन वाला एक ऐसा बेहतरीन पेज बनाया है जिसमें सारा कॉन्टेंट एक साथ नहीं दिखता. इसका मतलब यह हो सकता है कि नेविगेशन लिंक, पेज रीफ़्रेश किए बिना दिखने वाले कॉन्टेंट को बदल देते हैं.
ऐसे मामले में, चुने गए कॉन्टेंट एरिया की पहचान करके, उसे -1 में से tabindex दें और उसके focus तरीके का इस्तेमाल करें. इससे यह पक्का होता है कि सामग्री सही क्रम में
दिखने वाले टैब में न दिखे. इस तकनीक को फ़ोकस मैनेज करना कहते हैं. इसकी मदद से, उपयोगकर्ता को दिखने वाला कॉन्टेक्स्ट साइट के विज़ुअल कॉन्टेंट के साथ सिंक रहता है.
कॉम्पोनेंट में फ़ोकस मैनेज करना
कुछ मामलों में, आपको कंट्रोल लेवल पर भी फ़ोकस मैनेज करना होगा, जैसे कि कस्टम कॉम्पोनेंट के साथ.
उदाहरण के लिए, select एलिमेंट को बेसिक फ़ोकस मिल सकता है, लेकिन एक बार वहां जाने पर, चुनने लायक दूसरे विकल्पों को दिखाने के लिए ऐरो बटन का इस्तेमाल किया जा सकता है.
अगर आपने पसंद के मुताबिक select एलिमेंट बनाया है, तो उस व्यवहार को दोहराना ज़रूरी है. इससे कीबोर्ड का इस्तेमाल करने वाले लोग अब भी आपके कंट्रोल से इंटरैक्ट कर पाएंगे.
यह जानना मुश्किल हो सकता है कि कीबोर्ड के कौनसे व्यवहार लागू करने हैं. ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन (ARIA) ऑथरिंग प्रैक्टिस गाइड में, कॉम्पोनेंट के टाइप और कीबोर्ड से जुड़ी किस तरह की कार्रवाइयों के बारे में बताया गया है.
ऐसा हो सकता है कि आपको ऐसे कस्टम एलिमेंट बनाने हो जो रेडियो बटन के सेट से मिलते-जुलते हों, लेकिन इसके दिखने के तरीके और व्यवहार में आपका खास अंदाज़ शामिल हो.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
यह पता करने के लिए कि उन्हें किस तरह के कीबोर्ड से जुड़ी सहायता की ज़रूरत है, ARIA लेखन के तरीकों की गाइड देखें. सेक्शन 2 में डिज़ाइन पैटर्न की सूची शामिल है. इसमें रेडियो ग्रुप के लिए वर्णों की टेबल शामिल है. इस सूची में ऐसा मौजूदा कॉम्पोनेंट शामिल होता है जो आपके नए एलिमेंट से सबसे ज़्यादा मेल खाता है.
कीबोर्ड की सामान्य कार्रवाइयों में से एक है अप/डाउन/लेफ़्ट/राइट ऐरो बटन. इस व्यवहार को नए कॉम्पोनेंट में जोड़ने के लिए, हम roving tabindex नाम की तकनीक का इस्तेमाल करते हैं.
रोविंग टैबइंडेक्स, tabindex को -1 पर सेट करके काम करता है. इसमें सभी बच्चों के लिए वह शामिल है
जो फ़िलहाल चालू है.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
यह कॉम्पोनेंट, कीबोर्ड इवेंट लिसनर का इस्तेमाल करके यह तय करता है कि उपयोगकर्ता किस बटन का इस्तेमाल कर रहा है. जब ऐसा होता है, तो यह उस बच्चे के tabindex को -1 पर सेट कर देता है जिस पर फ़ोकस किया गया था. साथ ही, फ़ोकस किए गए बच्चे के tabindex को 0 पर सेट करता है और फ़ोकस करने के तरीके को इस पर कॉल करता है.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
जब उपयोगकर्ता आखिरी (या पहले) बच्चे तक पहुंचता है, तो फ़ोकस पहले (या आखिरी) बच्चे की तरफ़ लौट जाता है. यह इस पर निर्भर करता है कि फ़ोकस किस दिशा में घुमाया जा रहा है.
यह उदाहरण आज़माएं. Tabindex को एक रेडियो से दूसरे रेडियो में जाते हुए देखने के लिए, DevTools में एलिमेंट की जांच करें.
मोडल और कीबोर्ड ट्रैप
फ़ोकस को मैन्युअल तरीके से मैनेज करने से बचना बेहतर है, क्योंकि इससे कई मुश्किलें पैदा हो सकती हैं. उदाहरण के लिए, एक ऑटोकंप्लीट विजेट, जो फ़ोकस को मैनेज करने की कोशिश करता है और टैब की सेटिंग को कैप्चर करता है. हालांकि, यह प्रोसेस पूरी होने तक उपयोगकर्ता को उसे छोड़ने से रोकता है. इसे कीबोर्ड ट्रैप कहा जाता है और यह उपयोगकर्ता के लिए बहुत परेशान कर सकता है.
डब्लूसीएजी के सेक्शन 2.1.2 में बताया गया है कि कीबोर्ड के फ़ोकस को कभी भी किसी खास पेज एलिमेंट पर लॉक या फंसा नहीं जाना चाहिए. उपयोगकर्ता को सिर्फ़ कीबोर्ड का इस्तेमाल करके, पेज के सभी एलिमेंट पर जाने और उनसे बाहर आने-जाने के लिए यह सुविधा मिलनी चाहिए.
हालांकि, मॉडल इस नियम के दायरे में नहीं आते. हालांकि, मॉडल बनाते समय आपको tabindex का इस्तेमाल करने से अब भी बचना चाहिए. inert की मदद से, यह पक्का किया जा सकता है कि उपयोगकर्ता किसी एलिमेंट (जान-बूझकर बनाया गया कीबोर्ड ट्रैप) से इंटरैक्ट न कर पाएं. मोडल के बाहर क्लिक और टैब ब्लॉक करते समय, उपयोगकर्ताओं के लिए मॉडल बनाने के लिए, <dialog> एलिमेंट का इस्तेमाल करें. यह एलिमेंट डिफ़ॉल्ट रूप से बंद होता है. इससे उपयोगकर्ता को ज़रूरी विकल्प पर फ़ोकस करने में मदद मिलती है.