फ़ोकस बढ़ाने वाले

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

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

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

इस उदाहरण में, tabindex एट्रिब्यूट की वैल्यू ने टैब का क्रम अव्यवस्थित कर दिया है:

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

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

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

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

tabindex एट्रिब्यूट

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

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

इस पेज पर, 'शेयर करें' बटन, <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 एक ग्लोबल एट्रिब्यूट है जिसे किसी भी एलिमेंट पर सेट किया जा सकता है, लेकिन यह इनर्ट एलिमेंट को इंटरैक्टिव नहीं बनाता. पेज लोड होने पर, फ़ोकस करने लायक पहला एलिमेंट जब तक एलिमेंट दिखाया जाता है और <dialog> में नेस्ट नहीं किया जाता, तब तक autofocus एट्रिब्यूट सेट पर फ़ोकस होगा.

कॉन्टेंट पर अपने-आप फ़ोकस सेट करने से भ्रम हो सकता है. फ़ॉर्म कंट्रोल पर 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 वैल्यू, कीबोर्ड के उपयोगकर्ताओं को इंटरैक्टिव एलिमेंट पर फ़ोकस करने से रोकती है. हालांकि, यह एलिमेंट को बंद नहीं करती. Pointer उपयोगकर्ता अब भी एलिमेंट पर फ़ोकस कर सकते हैं. किसी एलिमेंट को बंद करने के लिए, disabled एट्रिब्यूट का इस्तेमाल करें.

बंद है

बूलियन disable एट्रिब्यूट, फ़ॉर्म के कंट्रोल को इन चीज़ों पर भी लागू करता है लागू किया जाता है और उनके डिसेंडेंट, अगर कोई है, तो फ़ोकस नहीं किया जा सकता. फ़ॉर्म के बंद किए गए कंट्रोल पर फ़ोकस नहीं किया जा सकता, उन्हें क्लिक इवेंट नहीं मिलते, और फ़ॉर्म सबमिट करने के बाद उन्हें सबमिट नहीं किया जाता है. ध्यान दें कि disabled, ग्लोबल एट्रिब्यूट नहीं है. यह <button>, <input>, <optgroup>, <option>, <select>, <textarea>, फ़ॉर्म से जुड़े कस्टम एलिमेंट, और <fieldset>. <optgroup> या <fieldset> पर सेट करने पर, <fieldset> के पहले <legend> के कॉन्टेंट को छोड़कर, चाइल्ड फ़ॉर्म के सभी कंट्रोल बंद रहते हैं.

:disabled की मदद से, disabled के साथ काम करने वाले जिन एलिमेंट को भी टारगेट किया जा सकता है उन्हें भी टारगेट किया जा सकता है और :enabled pseudoclasses. वे एलिमेंट जिन्हें इसके साथ बंद किया गया है उपयोगकर्ता-एजेंट स्टाइलशीट के ज़रिए 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 एट्रिब्यूट से कोई विज़ुअल इंडिकेटर नहीं दिखता. साथ ही, इसमें मिलता-जुलता कोई pseudoclass नहीं है. हालांकि, [inert] एट्रिब्यूट सिलेक्टर इससे मिलता-जुलता है.

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

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

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

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

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