Tabindex का इस्तेमाल करना

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Alexandra Klepper
Alexandra Klepper

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

सोर्स

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

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

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

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

यह खास तौर पर हेडर, इमेज या लेख के टाइटल जैसे नॉन-इनपुट एलिमेंट के लिए सही है. जब भी हो सके, अपने सोर्स कोड को इस तरह से व्यवस्थित करें कि डीओएम क्रम में टैब का क्रम सही हो. अगर 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>

यह तय करने के लिए कि उन्हें कीबोर्ड की किस तरह की सहायता चाहिए, एआरआई लेखन के तरीकों की गाइड देखें. सेक्शन 2 में डिज़ाइन पैटर्न की सूची होती है. इसमें रेडियो ग्रुप के लिए विशेषताओं की टेबल और आपके नए एलिमेंट से मिलता-जुलता मौजूदा कॉम्पोनेंट शामिल होता है.

कीबोर्ड के सामान्य कामों में से एक, अप/डाउन/लेफ़्ट/राइट ऐरो बटन का इस्तेमाल करना है. नए कॉम्पोनेंट में यह सुविधा जोड़ने के लिए, हम रोविंग टैब इंडेक्स नाम की तकनीक का इस्तेमाल करते हैं.

रोविंग टैब इंडेक्स, फ़िलहाल चालू चाइल्ड को छोड़कर, सभी चाइल्ड के लिए 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>

जब उपयोगकर्ता आखिरी (या पहले, यह इस बात पर निर्भर करता है कि फ़ोकस किस दिशा में ले जाया जा रहा है) चाइल्ड एलिमेंट पर पहुंच जाता है, तो फ़ोकस पहले (या आखिरी) चाइल्ड एलिमेंट पर वापस लौट जाता है.

नीचे दिया गया उदाहरण आज़माएं. DevTools में एलिमेंट की जांच करके देखें कि tabindex, एक रेडियो बटन से दूसरे पर कैसे जाता है.

मॉडल और कीबोर्ड ट्रैप

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

WCAG के सेक्शन 2.1.2 के मुताबिक, कीबोर्ड फ़ोकस को कभी भी किसी एक पेज एलिमेंट पर लॉक या ट्रैप नहीं किया जाना चाहिए. उपयोगकर्ता को सिर्फ़ कीबोर्ड का इस्तेमाल करके, पेज के सभी एलिमेंट पर जाने और उनसे वापस आने की सुविधा मिलनी चाहिए.

हालांकि, इस नियम में मोडल शामिल नहीं हैं. हालांकि, आपको अब भी मॉडल बनाते समय tabindex का इस्तेमाल करने से बचना चाहिए. inert की मदद से, यह पक्का किया जा सकता है कि उपयोगकर्ता किसी एलिमेंट (जान-बूझकर बनाया गया कीबोर्ड ट्रैप) से इंटरैक्ट न कर पाएं. उपयोगकर्ताओं के लिए कोई मॉडल बनाने के लिए, <dialog> एलिमेंट का इस्तेमाल करें. यह एलिमेंट डिफ़ॉल्ट रूप से काम नहीं करता. साथ ही, यह मॉडल के बाहर होने वाले क्लिक और टैब को ब्लॉक करता है. इससे उपयोगकर्ता, ज़रूरी विकल्प पर फ़ोकस कर पाता है.