फ़ोकस

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

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

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

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

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

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

सीएसएस की कुछ सुविधाएं, कॉन्टेंट के विज़ुअल क्रम को बदल सकती हैं. इनमें फ़्लेक्सबॉक्स, ग्रिड, पोजीशनिंग, ट्रांसफ़ॉर्म, और मल्टी-कॉलम शामिल हैं. कीबोर्ड की मदद से, कॉन्टेंट को टैब करके उसकी जांच करें: कॉन्टेंट में पीछे की ओर जाने के लिए, Shift + Tab दबाएं. सीएसएस का इस्तेमाल करके यह बताएं कि किस एलिमेंट पर फ़ोकस किया गया है. सीएसएस का इस्तेमाल करके, फ़ोकस किए जा सकने वाले एलिमेंट का क्रम न बदलें.

यह ज़रूरी है कि सभी व्यूपोर्ट साइज़ पर, टैब करने का क्रम सही हो.

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

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

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

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

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