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

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

tabindex को सिर्फ़ इंटरैक्टिव कॉन्टेंट में जोड़ें. भले ही, कॉन्टेंट ज़रूरी हो, जैसे कि कोई मुख्य इमेज, स्क्रीन रीडर इस्तेमाल करने वाले लोग फ़ोकस जोड़े बिना भी उसे समझ सकते हैं.

पेज लेवल पर फ़ोकस मैनेज करना

कभी-कभी, उपयोगकर्ता को बेहतर अनुभव देने के लिए tabindex ज़रूरी होता है. उदाहरण के लिए, अगर आपने अलग-अलग कॉन्टेंट सेक्शन वाला एक बेहतरीन पेज बनाया है, जहां एक साथ सारा कॉन्टेंट नहीं दिखता. इसका मतलब यह हो सकता है कि नेविगेशन लिंक, पेज को रीफ़्रेश किए बिना दिखने वाले कॉन्टेंट को बदल दें.

इस मामले में, चुने गए कॉन्टेंट एरिया की पहचान करें और उसे tabindex of -1 दें. इसके बाद, उसका focus तरीका कॉल करें. इससे यह पक्का होता है कि कॉन्टेंट, टैब के सामान्य क्रम में न दिखे. इस तकनीक को फ़ोकस मैनेज करना कहा जाता है. इससे, उपयोगकर्ता के कॉन्टेक्स्ट को साइट के विज़ुअल कॉन्टेंट के साथ सिंक किया जाता है.

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

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

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

यह जानना मुश्किल हो सकता है कि कीबोर्ड की कौनसी सुविधाएं लागू करनी हैं. ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन (एआरआईए) बनाने के तरीकों की गाइड में, कॉम्पोनेंट के टाइप और कीबोर्ड की कौनसी कार्रवाइयां उन पर काम करती हैं, इसकी जानकारी दी गई है.

हो सकता है कि आप कस्टम एलिमेंट पर काम कर रहे हों, जो रेडियो बटन के सेट से मिलते-जुलते हों. हालांकि, इनकी दिखावट और काम करने का तरीका अलग हो.

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