फ़ोकस

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

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

सीएसएस और एचटीएमएल का इस्तेमाल करके, टैब करने के क्रम में बदलाव न करें. यहां दिए गए दो उदाहरणों से पता चलता है कि टैब का क्रम, दिखने वाले क्रम से अलग होने पर लोगों को समझने में मुश्किल होती है. साथ ही, इससे लोगों को साइट इस्तेमाल करने में परेशानी होती है.

इस उदाहरण में, tabindex एट्रिब्यूट की वैल्यू की वजह से, टैब का क्रम गड़बड़ हो गया है:

इस उदाहरण में, सीएसएस ने टैब करने के क्रम और कॉन्टेंट के विज़ुअल क्रम के बीच अंतर पैदा किया है:

flex-flow: row-reverse; एलान की वजह से, विज़ुअल का क्रम बदल गया है. इसके अलावा, सीएसएस की order प्रॉपर्टी को छठे शब्द, "This" पर लागू किया गया था. इससे वह शब्द विज़ुअल तौर पर अपनी जगह से हट गया. टैबिंग का क्रम, कोड का क्रम होता है. यह अब विज़ुअल क्रम से मेल नहीं खाता. इससे कीबोर्ड का इस्तेमाल करने वाले लोगों को परेशानी होती है.

इनर्ट एलिमेंट को इंटरैक्टिव बनाना

contenteditable और tabindex एट्रिब्यूट, ग्लोबल एट्रिब्यूट होने की वजह से, किसी भी एलिमेंट में जोड़े जा सकते हैं. इससे वे फ़ोकस किए जा सकते हैं. autofocus एट्रिब्यूट सेट करके या स्क्रिप्ट की मदद से, फ़ोकस किए जा सकने वाले एलिमेंट पर माउस या पॉइंटर से भी फ़ोकस किया जा सकता है. जैसे, element.focus() का इस्तेमाल करके.

tabindex एट्रिब्यूट

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

tabindex एट्रिब्यूट की वैल्यू के तौर पर पूर्णांक का इस्तेमाल किया जाता है. ऋणात्मक वैल्यू सेट करने पर, एलिमेंट पर फ़ोकस किया जा सकता है, लेकिन टैब नहीं किया जा सकता. tabindex की वैल्यू 0 होने पर, एलिमेंट पर फ़ोकस किया जा सकता है और उसे टैब किया जा सकता है. साथ ही, जिस एलिमेंट पर इसे लागू किया जाता है उसे सोर्स कोड के क्रम में, फ़ोकस नेविगेशन के क्रम में जोड़ा जाता है. 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 वाले एलिमेंट, अलग टैब क्रम में शामिल किए जाते हैं. Codepen में आपको दिखेगा कि टैबिंग, सबसे कम वैल्यू से लेकर सबसे ज़्यादा वैल्यू के क्रम में, अलग सीक्वेंस में शुरू होती है. इसके बाद, सोर्स के क्रम में रेगुलर सीक्वेंस (कोई 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 एट्रिब्यूट, उन फ़ॉर्म कंट्रोल को फ़ोकस नहीं किया जा सकने वाला बनाता है जिन पर इसे लागू किया गया है. साथ ही, अगर कोई डिसेंडेंट मौजूद है, तो उसे भी फ़ोकस नहीं किया जा सकता. बंद किए गए फ़ॉर्म कंट्रोल पर फ़ोकस नहीं किया जा सकता. साथ ही, उन पर क्लिक इवेंट नहीं होते हैं. इसके अलावा, फ़ॉर्म सबमिट करने पर उन्हें सबमिट नहीं किया जाता.

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

disabled एट्रिब्यूट, आम तौर पर inert एलिमेंट पर लागू नहीं होता. हालांकि, tabindex या contenteditable की मदद से, इन एलिमेंट को फ़ोकस किया जा सकता है. साथ ही, यह <form> एलिमेंट पर भी लागू नहीं होता. इन एलिमेंट को बंद करने के लिए, ग्लोबल inert एट्रिब्यूट का इस्तेमाल किया जा सकता है.

inert एट्रिब्यूट

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

फ़ॉर्म कंट्रोल पर disabled लागू करने पर, ब्राउज़र डिफ़ॉल्ट स्टाइलिंग उपलब्ध कराता है. साथ ही, :disabled सूडो क्लास का इस्तेमाल करके स्टाइल किया जा सकता है. inert एट्रिब्यूट कोई विज़ुअल इंडिकेटर नहीं देता है और इसमें कोई मैचिंग स्यूडोक्लास नहीं है. हालांकि, [inert] एट्रिब्यूट सिलेक्टर मैच करता है.

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

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

देखें कि आपको कितना समझ आया

फ़ोकस के बारे में अपनी जानकारी को परखें.