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

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

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

यह जानना मुश्किल हो सकता है कि कीबोर्ड की किन सुविधाओं को लागू करना है. Accessible Rich Internet Applications (ARIA) Authoring Practices गाइड में, कॉम्पोनेंट के टाइप और उनके साथ काम करने वाली कीबोर्ड कार्रवाइयों के बारे में बताया गया है.

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

<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 ऑथरिंग प्रैक्टिसेज़ गाइड देखें. दूसरे सेक्शन में डिज़ाइन पैटर्न की सूची होती है. इसमें ये शामिल हैं: रेडियो बटन वाले ग्रुप के लिए विशेषताओं की टेबल, मौजूदा कॉम्पोनेंट, जो आपके नए एलिमेंट से सबसे ज़्यादा मिलता-जुलता है.

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

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