इंटरैक्टिव एलिमेंट पर, डिफ़ॉल्ट रूप से फ़ोकस किया जा सकता है और उन्हें टैब किया जा सकता है. जैसे, फ़ॉर्म कंट्रोल, लिंक, और बटन. टैब किए जा सकने वाले एलिमेंट, दस्तावेज़ के क्रम में फ़ोकस नेविगेशन क्रम का हिस्सा होते हैं. अन्य एलिमेंट इनऐक्टिव हैं. इसका मतलब है कि वे इंटरैक्टिव नहीं हैं. एचटीएमएल एट्रिब्यूट की मदद से, इंटरैक्टिव एलिमेंट को इनर्शियल बनाना और इनर्ट एलिमेंट को इंटरैक्टिव बनाया जा सकता है.
डिफ़ॉल्ट रूप से, नेविगेशन फ़ोकस का क्रम, विज़ुअल ऑर्डर के जैसा होता है. यह सोर्स कोड का क्रम होता है. कुछ ऐसे एचटीएमएल एट्रिब्यूट हैं जो इस क्रम और सीएसएस प्रॉपर्टी में बदलाव कर सकते हैं. इनकी वजह से, कॉन्टेंट का विज़ुअल क्रम बदल सकता है. एचटीएमएल या विज़ुअल रेंडरिंग क्रम में टैबिंग क्रम को सीएसएस के साथ बदलने से उपयोगकर्ता अनुभव को नुकसान पहुंच सकता है.
टैबिंग के अनुमानित और असल क्रम को सीएसएस और एचटीएमएल की मदद से न बदलें. जैसा कि नीचे दिए गए दो उदाहरणों से पता चलता है कि जिन टैब ऑर्डर के दिखने के क्रम से कोई अंतर होता है वे उपयोगकर्ताओं को भ्रमित करते हैं और उपयोगकर्ता को खराब अनुभव देते हैं.
इस उदाहरण में, tabindex एट्रिब्यूट की वैल्यू ने टैब का ऑर्डर अस्त-व्यस्त कर दिया है:
इस उदाहरण में, सीएसएस ने टैब करने और कॉन्टेंट के दिखने के क्रम के बीच फ़र्क़ बनाया है:
flex-flow: row-reverse; एलान ने विज़ुअल क्रम को उलट दिया है.
इसके अलावा, सीएसएस order प्रॉपर्टी को छठे शब्द "यह" पर लागू किया गया था. इससे विज़ुअल तौर पर उस एक शब्द को दूसरी जगह ले जाया गया. टैब करने का क्रम, कोड का क्रम होता है. यह अब विज़ुअल के क्रम से मेल नहीं खाता. इससे कीबोर्ड उपयोगकर्ताओं को डिसकनेक्ट हो जाता है.
इनर्ट एलिमेंट को इंटरैक्टिव बनाना
contenteditable और tabindex एट्रिब्यूट, ग्लोबल एट्रिब्यूट होने के नाते, किसी भी एलिमेंट में जोड़े जा सकते हैं, ताकि इस प्रोसेस में उन पर फ़ोकस किया जा सके. फ़ोकस करने लायक एलिमेंट को माउस या पॉइंटर की मदद से भी फ़ोकस किया जा सकता है. इसके लिए, autofocus एट्रिब्यूट को सेट करें या स्क्रिप्ट के मुताबिक काम करें, जैसे कि element.focus().
tabindex एट्रिब्यूट
एट्रिब्यूट में पेश किया गया ग्लोबल tabindex एट्रिब्यूट, उन एलिमेंट को चालू करता है जो फ़ोकस नहीं कर पाते. आम तौर पर, Tab बटन दबाएं और यही नाम काम करता है.
tabindex एट्रिब्यूट की वैल्यू को पूर्णांक के तौर पर इस्तेमाल किया जाता है. नेगेटिव वैल्यू से एलिमेंट पर फ़ोकस किया जा सकता है, लेकिन उसे टैब नहीं किया जा सकता. 0 की tabindex वैल्यू, एलिमेंट को फ़ोकस करने लायक और टैब करने लायक बनाती है. इससे एलिमेंट में वह एलिमेंट जुड़ जाता है जिस पर सोर्स कोड के क्रम में, क्रम के मुताबिक फ़ोकस नेविगेशन ऑर्डर पर यह एलिमेंट लागू किया जाता है. वैल्यू को 1 या उससे ज़्यादा पर सेट करने से, एलिमेंट पर फ़ोकस किया जा सकता है और उसे टैब किया जा सकता है. हालांकि, इसे प्राथमिकता वाले टैबिंग क्रम में जोड़ दिया जाता है. जैसा कि हमने ऊपर बताया है, इससे बचना चाहिए.
इस पेज पर, शेयर करें बटन <share-action> एक कस्टम एलिमेंट है. tabindex="0" आम तौर पर फ़ोकस न करने लायक एलिमेंट को कीबोर्ड की डिफ़ॉल्ट टैबिंग ऑर्डर में जोड़ देता है:
<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
इस पेज पर एक और कस्टम एलिमेंट मौजूद है: लोकल नेविगेशन में कस्टम एलिमेंट शामिल है, जिसकी वैल्यू नेगेटिव tabindex है:
<web-navigation-drawer type="standard" tabindex="-1">
नेगेटिव वैल्यू वाली tabindex एट्रिब्यूट की मदद से, एलिमेंट पर फ़ोकस किया जा सकता है, लेकिन उसे टैब नहीं किया जा सकता. एलिमेंट पर फ़ोकस हो सकता है, जैसे कि HTMLElement.focus() से. हालांकि, यह क्रम में फ़ोकस नेविगेशन ऑर्डर का हिस्सा नहीं है. टैब न किए जा सकने वाले और फ़ोकस करने लायक एलिमेंट के लिए, tabindex="-1" का इस्तेमाल किया जाता है. ध्यान दें कि
अगर tabindex="-1" को किसी इंटरैक्टिव एलिमेंट में जोड़ा जाता है, तो उसे टैब नहीं किया जा सकेगा.
element.focus() तरीके का इस्तेमाल, फ़ोकस किए जा सकने वाले एलिमेंट पर
फ़ोकस करने के लिए किया जा सकता है. ध्यान दें कि ब्राउज़र फ़ोकस किए गए एलिमेंट को स्क्रोल करके देखते हैं. इस वजह से, element.focus({preventScroll:true}) का इस्तेमाल न करें, क्योंकि न दिखने वाले किसी एलिमेंट पर फ़ोकस करने से, लोगों को खराब अनुभव मिलता है.
अगर आपको यह जानने के लिए दस्तावेज़ से क्वेरी करनी है कि फ़िलहाल किस एलिमेंट पर फ़ोकस है, तो रीड-ओनली Document.activeElement प्रॉपर्टी का इस्तेमाल करें.
1 या इससे ज़्यादा के tabindex वाले एलिमेंट को एक अलग टैब क्रम में शामिल किया जाता है. जैसा कि कोडपेन में देखा जा सकता है, टैबिंग एक अलग क्रम में शुरू होती है. यह सबसे कम मान से सबसे ज़्यादा वैल्यू के क्रम में होती है. इसके बाद, सामान्य क्रम (कोई tabindex सेट या tabindex="0" नहीं) वाली वैल्यू के सोर्स को ध्यान में रखा जाता है:
पॉज़िटिव वैल्यू वाली tabindex, एलिमेंट को प्राथमिकता वाले फ़ोकस सीक्वेंस में डाल देती है. इससे फ़ोकस ऑर्डर में गड़बड़ी हो सकती है.
tabindex की मदद से डीओएम ऑर्डर में बदलाव करने से बचें. टैबिंग ऑर्डर में बदलाव करके उपयोगकर्ताओं को खराब अनुभव
हो सकता है. साथ ही, डेवलपर के लिए इन्हें मैनेज करना और बनाए रखना भी मुश्किल होता है.
contenteditable एट्रिब्यूट
contenteditable एट्रिब्यूट के बारे में पहले बताया गया था. contenteditable="true" को किसी भी एलिमेंट पर सेट करने से, वह बदलाव किया जा सकता है, फ़ोकस करने लायक, और टैब क्रम का हिस्सा बन जाता है. फ़ोकस का व्यवहार tabindex="0" सेट करने जैसा ही है, लेकिन वैसा ही नहीं है. नेस्ट किए गए contenteditable एलिमेंट फ़ोकस किए जा सकते हैं, लेकिन उन्हें टैब नहीं किया जा सकता. नेस्ट किए गए contenteditable एलिमेंट को टैब करने लायक बनाने के लिए, tabindex="0" जोड़ें. इससे उसे क्रम से फ़ोकस नेविगेशन क्रम में जोड़ दिया जाएगा.
इंटरैक्टिव एलिमेंट पर फ़ोकस करना
autofocus एट्रिब्यूट
बूलियन autofocus एक ग्लोबल एट्रिब्यूट है, जिसे किसी भी एलिमेंट पर सेट किया जा सकता है. हालांकि, यह किसी इनर्ट एलिमेंट को इंटरैक्टिव नहीं बनाता है. पेज लोड होने पर, फ़ोकस करने लायक पहले एलिमेंट को autofocus एट्रिब्यूट सेट के साथ फ़ोकस किया जाएगा. ऐसा तब तक होगा, जब तक वह एलिमेंट <dialog> में नेस्ट न किया गया हो और दिखाया जा रहा हो.
कॉन्टेंट पर अपने-आप फ़ोकस सेट करने से, भ्रम की स्थिति पैदा हो सकती है. फ़ॉर्म कंट्रोल पर autofocus को सेट करने का मतलब है कि पेज लोड होने पर, फ़ॉर्म कंट्रोल स्क्रोल करके दिखेगा. आपके सभी उपयोगकर्ता, जिनमें स्क्रीन रीडर के उपयोगकर्ता और छोटे व्यूपोर्ट वाले उपयोगकर्ता शामिल हैं, फ़ॉर्म के लिए दिए गए निर्देश "नहीं देख" सकते. ऐसा भी हो सकता है कि वे फ़ॉर्म कंट्रोल के सामान्य तौर पर दिखने वाले लेबल से आगे स्क्रोल न करें. autofocus एट्रिब्यूट, दस्तावेज़ के क्रम में फ़ोकस नेविगेशन के क्रम में बदलाव नहीं करता. ऑटोफ़ोकस एलिमेंट से पहले आने वाले क्रम में मौजूद एलिमेंट को
छोड़ दिया जाता है. इन वजहों से, autofocus एट्रिब्यूट को शामिल करने की सलाह नहीं दी जाती है.
"autofocus का इस्तेमाल न करें" सुझाव का अपवाद, <dialog> एलिमेंट में autofocus एट्रिब्यूट शामिल करना है.
डायलॉग खोलने पर, ब्राउज़र अपने-आप <dialog> में फ़ोकस करने लायक पहले इंटरैक्टिव एलिमेंट पर फ़ोकस करेगा.
इसका मतलब है कि एलिमेंट के लिए autofocus का इस्तेमाल करना ज़रूरी नहीं है. अगर आपको यह पक्का करना है कि डायलॉग खुलने पर, उसमें मौजूद किसी इंटरैक्टिव एलिमेंट को फ़ोकस किया जाए, तो उस एलिमेंट में autofocus एट्रिब्यूट जोड़ें.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
बंद होने के <button> में सेट किया गया autofocus एट्रिब्यूट, यह पक्का करता है कि डायलॉग खोले जाने पर उस पर फ़ोकस किया जाए. डायलॉग में पहले एलिमेंट के तौर पर, इस पर फ़ोकस होता था. डिफ़ॉल्ट रूप से, जब कोई डायलॉग खोला जाता है, तो उस एलिमेंट पर फ़ोकस किया जा सकता है जिस पर फ़ोकस किया जा सकता है. ऐसा तब तक होगा, जब तक डायलॉग में autofocus एट्रिब्यूट सेट न हो.
इंटरैक्टिव एलिमेंट को इनऐक्टिव बनाना
कुछ एचटीएमएल एट्रिब्यूट भी होते हैं, जो टैबिंग क्रम से इंटरैक्टिव एलिमेंट हटा सकते हैं. फ़ोकस करने लायक एलिमेंट में नेगेटिव tabindex शामिल करने, साथ काम करने वाले फ़ॉर्म कंट्रोल में disabled एट्रिब्यूट जोड़ने, और कंटेनर में ग्लोबल inert एट्रिब्यूट जोड़ने से, एलिमेंट को टैब नहीं किया जा सकता. इन तीन एट्रिब्यूट को आपस में नहीं बदला जा सकता.
नेगेटिव tabindex वैल्यू
जैसा कि हमने ऊपर जाना, नेगेटिव वैल्यू वाली tabindex एट्रिब्यूट की वैल्यू से एलिमेंट पर फ़ोकस किया जा सकता है, लेकिन उसे टैब नहीं किया जा सकता. डिफ़ॉल्ट रूप से फ़ोकस करने लायक एलिमेंट में tabindex="0" जोड़ना ज़रूरी नहीं है. इसमें लिंक, बटन, फ़ॉर्म कंट्रोल, और contenteditable एलिमेंट शामिल हैं. नेगेटिव वैल्यू वाले tabindex को शामिल करना ज़रूरी नहीं है. इसे क्रम से लगाए जाने वाले फ़ोकस नेविगेशन क्रम से, आम तौर पर टैब किए जा सकने वाले एलिमेंट हटा दिए जाते हैं.
नेगेटिव tabindex वैल्यू, कीबोर्ड इस्तेमाल करने वालों को इंटरैक्टिव एलिमेंट पर फ़ोकस करने से रोकती है. हालांकि, यह एलिमेंट को बंद नहीं करती है. पॉइंटर इस्तेमाल करने वाले लोग, अब भी एलिमेंट पर फ़ोकस कर सकते हैं. किसी एलिमेंट को बंद करने के लिए, disabled एट्रिब्यूट का इस्तेमाल करें.
अक्षम किया गया
बूलियन अक्षम एट्रिब्यूट से फ़ॉर्म कंट्रोल मिलते हैं, जिस पर यह लागू किया जाना चाहिए और उनके डिसेंडेंट (अगर कोई है) पर फ़ोकस नहीं किया जा सकता है. बंद किए गए फ़ॉर्म कंट्रोल पर फ़ोकस नहीं किया जा सकता, न ही उन्हें क्लिक इवेंट मिलते हैं, और न ही इन्हें फ़ॉर्म सबमिट करने पर सबमिट किया जाता है. ध्यान दें कि disabled, ग्लोबल एट्रिब्यूट नहीं है. यह <button>, <input>, <optgroup>, <option>, <select>, <textarea>, फ़ॉर्म से जुड़े कस्टम एलिमेंट, और <fieldset> पर लागू होता है.
<optgroup> या <fieldset> पर सेट होने पर, <fieldset> के पहले <legend> कॉन्टेंट को छोड़कर, चाइल्ड फ़ॉर्म के सभी कंट्रोल बंद हो जाते हैं.
disabled के साथ काम करने वाले एलिमेंट को, :disabled और :enabled स्यूडोक्लास से भी टारगेट किया जा सकता है. disabled एट्रिब्यूट की मदद से बंद किए गए एलिमेंट को आम तौर पर उपयोगकर्ता-एजेंट स्टाइलशीट के ज़रिए हल्के स्लेटी रंग के तौर पर स्टाइल किया जाता है. भले ही, accent-color सेट किया गया हो.
बूलियन एट्रिब्यूट होने पर, एट्रिब्यूट की मौजूदगी से ऐसा एलिमेंट बंद हो जाता है जो शायद चालू न हो; इसे false पर सेट नहीं किया जा सकता.
बंद किए गए किसी एलिमेंट को फिर से चालू करने के लिए, एट्रिब्यूट को हटाना ज़रूरी है. आम तौर पर, ऐसा Element.removeAttribute('disabled') के ज़रिए किया जाता है.
HTMLInputElement.disabled प्रॉपर्टी की मदद से यह देखा जा सकता है कि कोई इनपुट बंद है या नहीं. disabled एक ग्लोबल एट्रिब्यूट नहीं है, इसलिए इसे एचटीएमएल एलिमेंट से इनहेरिट नहीं किया जाता है. हालांकि, साथ काम करने वाले हर एलिमेंट इंटरफ़ेस, जैसे कि HTMLSelectElement,
HTMLTextareaElement में, रीड-ओनली प्रॉपर्टी एक जैसी होती है.
disabled एट्रिब्यूट, आम तौर पर उन inert एलिमेंट पर लागू नहीं होता जिन्हें tabindex या contenteditable के ज़रिए फ़ोकस करने लायक बनाया जाता है.
यह <form> एलिमेंट पर भी लागू नहीं होता. इन्हें बंद करने के लिए, ग्लोबल inert एट्रिब्यूट का इस्तेमाल किया जा सकता है.
inert एट्रिब्यूट
जब किसी एलिमेंट में inert ग्लोबल बूलियन एट्रिब्यूट जोड़ा जाता है, तो वह एलिमेंट और नेस्ट किया गया सारा कॉन्टेंट बंद हो जाता है. साथ ही, उस कॉन्टेंट को न तो क्लिक किया जा सकता है और न ही टैब किया जा सकता है. साथ ही, उसे सुलभता ट्री से हटा दिया जाता है. inert को किसी भी एलिमेंट पर लागू किया जा सकता है. हालांकि, आम तौर पर इसका इस्तेमाल कॉन्टेंट के सेक्शन के लिए किया जाता है. जैसे, ऑफ़स्क्रीन या छिपा हुआ कॉन्टेंट.
फ़ॉर्म के कंट्रोल में disabled को लागू करने पर, ब्राउज़र डिफ़ॉल्ट स्टाइल उपलब्ध कराता है. इसे :disabled सूडो क्लास का इस्तेमाल करके स्टाइल किया जा सकता है. inert एट्रिब्यूट, कोई विज़ुअल इंडिकेटर नहीं दिखाता है. साथ ही, इससे मिलता-जुलता कोई pseudoclass नहीं होता है. हालांकि, [inert] एट्रिब्यूट सिलेक्टर मेल खाता है.
अगर किसी कॉन्टेंट पर inert का इस्तेमाल किया जाता है, तो उपयोगकर्ता को खराब अनुभव मिल सकता है. ऐसा इन स्टाइल के बिना किया जा सकता है. इनऐक्टिव कॉन्टेंट, स्क्रीन रीडर इस्तेमाल करने वालों के लिए उपलब्ध नहीं होता. इस वजह से, जब स्क्रीन रीडर इस्तेमाल करने वाले लोगों को स्क्रीन पर ऐसा कॉन्टेंट दिखता है जो सुलभता टूल के लिए उपलब्ध नहीं है, तो भ्रम की स्थिति पैदा हो सकती है. सीएसएस के ज़रिए जड़त्व को साफ़ तौर पर दिखाएं.
पक्का करें कि वीडियो में सारा फ़ोकस ऐसे कॉन्टेंट पर न हो जो लोगों को नहीं दिखता. स्क्रीन के बाहर रेंडर की जाने वाली कोई भी ऐसी चीज़ जो फ़ोकस किए जाने पर अपने आप नहीं दिखती, उसे इनर्ट किया जाना चाहिए. अगर कॉन्टेंट छिपा हुआ है, लेकिन फ़ोकस करने पर यह दिखता है, जैसे कि इस पेज पर मौजूद कॉन्टेंट के लिंक पर जाएं को, तो इसे इनर्शियल बनाने की ज़रूरत नहीं है.
जांचें कि आपको कितना समझ आया
जांचें कि आपको कितना समझ आया
फ़ोकस करने के बारे में अपनी जानकारी को परखें.
अगर किसी एलिमेंट पर फ़ोकस नहीं किया जा सकता, तो उसे किस तरह का है?
अगर एलिमेंट में disabled एट्रिब्यूट है, तो क्या सही होगा?