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

Tabindex की मदद से डीओएम ऑर्डर में बदलाव करना

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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

ब्राउज़र सहायता

  • 1
  • 12
  • 1.5
  • ≤4

सोर्स

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

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

<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>

किसी विषय पर फ़ोकस करने के लिए, Tab दबाएं!

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

// TODO: DevSite - Code sample removed as it used inline event handlers

// TODO: DevSite - कोड सैंपल को हटा दिया गया, क्योंकि उसमें इनलाइन इवेंट हैंडलर का इस्तेमाल किया गया था

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

<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>

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

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

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

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

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

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

पेज पर कुछ बदलते समय फ़ोकस को मैनेज करना ज़रूरी है, लेकिन कभी-कभी आपको फ़ोकस को कंट्रोल लेवल पर मैनेज करने की ज़रूरत होती है — उदाहरण के लिए, जब कोई कस्टम कॉम्पोनेंट बनाया जा रहा हो.

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

<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
    <option>Aisle seat</option>
    <option>Window seat</option>
    <option>No preference</option>
</select>

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

रेडियो बटन के लिए W3C निर्देश का हिस्सा.

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 पर फ़ोकस किए गए 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>

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

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

पानी कॉफ़ी चाय कोला जिंजर ऐले

// TODO: DevSite - कोड सैंपल को हटा दिया गया, क्योंकि उसमें इनलाइन इवेंट हैंडलर का इस्तेमाल किया गया था

आपके पास GitHub पर, इस एलिमेंट का पूरा सोर्स देखने का विकल्प है.

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

कभी-कभी, जब आप फ़ोकस मैनेज कर रहे होते हैं, तब आप ऐसी स्थिति में आ सकते हैं जहां से बाहर निकलने का काम नहीं हो पाता. अपने-आप पूरा होने वाले ऐसे विजेट का इस्तेमाल करें जो फ़ोकस को मैनेज करने और टैब की गतिविधियों को कैप्चर करने की कोशिश करता हो. हालांकि, यह उपयोगकर्ता को काम पूरा होने से पहले उसे छोड़कर जाने से रोकता है. इसे कीबोर्ड ट्रैप कहा जाता है और इससे उपयोगकर्ता बहुत परेशान हो सकता है. वेब एआई (AI) की चेकलिस्ट के सेक्शन 2.1.2 में, इस समस्या के बारे में बताया गया है. इसमें बताया गया है कि कीबोर्ड फ़ोकस को पेज के किसी एक खास एलिमेंट पर कभी भी लॉक या फंसा नहीं होना चाहिए. उपयोगकर्ता के पास सिर्फ़ कीबोर्ड का इस्तेमाल करके, पेज के सभी एलिमेंट पर जाने और वहां से नेविगेट करने की सुविधा होनी चाहिए.

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

एक मॉडल विंडो, जिसमें उपयोगकर्ता से अपना काम सेव करने के लिए कहा जा रहा है.

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

डेवलपर के लिए इसे आसान बनाने के कुछ प्रस्ताव हैं. इनमें <dialog> एलिमेंट भी शामिल है. हालांकि, इन्हें अब तक बड़े पैमाने पर ब्राउज़र पर काम नहीं करता है.

<dialog> के बारे में ज़्यादा जानकारी के लिए, यह MDN लेख पढ़ें. साथ ही, मोडल विंडो के बारे में ज़्यादा जानकारी के लिए, यह मोडल उदाहरण देखें.

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

  1. document.querySelector का इस्तेमाल करके, मोडल और ओवरले डिव्स चुनें और उनके रेफ़रंस स्टोर करें.
  2. मोडल खुलने पर, उस एलिमेंट का रेफ़रंस सेव करें जिस पर, मोडल खुलने के समय फ़ोकस किया गया था. इससे, फ़ोकस को उस एलिमेंट पर वापस लाया जा सकता है.
  3. मोडल चालू होने पर, बटन दबाए रखने के लिए कीडाउन लिसनर का इस्तेमाल करें. बैकग्राउंड ओवरले पर होने वाले क्लिक को सुना जा सकता है. साथ ही, अगर उपयोगकर्ता उस पर क्लिक करता है, तो मॉडल को बंद भी कर दिया जा सकता है.
  4. इसके बाद, मोडल में फ़ोकस करने लायक एलिमेंट का कलेक्शन पाएं. फ़ोकस करने लायक पहले और आखिरी एलिमेंट, "सेंटिनल" के तौर पर काम करेंगे, ताकि आपको पता चल सके कि मोडल के अंदर रहने के लिए, फ़ोकस को आगे या पीछे की ओर कब लूप करना है.
  5. मॉडल विंडो दिखाएं और फ़ोकस करने लायक पहले एलिमेंट पर फ़ोकस करें.
  6. जब उपयोगकर्ता Tab या Shift+Tab दबाता है, तो फ़ोकस आगे या पीछे जाएं, आखिरी या पहले एलिमेंट को ज़रूरत के मुताबिक लूप में चलाएं.
  7. अगर उपयोगकर्ता Esc दबाता है, तो मोडल बंद कर दें. इससे बहुत मदद मिलती है, क्योंकि इससे उपयोगकर्ता 'बंद करें' बटन को खोजे बिना, मॉडल को बंद कर सकते हैं. इससे माउस का इस्तेमाल करने वाले लोगों को भी फ़ायदा होता है.
  8. मोडल बंद होने पर, इसे और बैकग्राउंड ओवरले को छिपाएं. साथ ही, फ़ोकस को पहले सेव किए गए एलिमेंट पर वापस लाएं.

यह प्रोसेस आपको एक ऐसी मॉडल विंडो मुहैया कराती है जिसे इस्तेमाल किया जा सकता है और जो निराश नहीं करती. इसका इस्तेमाल सभी लोग असरदार तरीके से कर सकते हैं.

ज़्यादा जानकारी के लिए, इस सैंपल कोड की जांच करें और पूरे हो चुके पेज पर लाइव उदाहरण देखें.