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

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

डब्लूसीएजी के सेक्शन 2.1.2 में बताया गया है कि कीबोर्ड के फ़ोकस को कभी लॉक नहीं किया जाना चाहिए या किसी खास पेज एलिमेंट पर फंसा होना. उपयोगकर्ता सिर्फ़ कीबोर्ड.

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