इनर्ट एट्रिब्यूट

Emma Twersky

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

डायलॉग एलिमेंट में, इनर्ट डिफ़ॉल्ट तरीका होता है. उदाहरण के लिए, जब उपयोगकर्ताओं के लिए एक डायलॉग बॉक्स खोलने के लिए showModal का इस्तेमाल किया जाता है, ताकि डायलॉग बॉक्स में उन्हें चुना जा सके और फिर उसे स्क्रीन से खारिज किया जा सके. <dialog> को खोलने के बाद, बाकी पेज निष्क्रिय हो जाता है, उदाहरण के लिए आप लिंक पर क्लिक या टैब नहीं कर सकेंगे.

दूसरे एलिमेंट पर भी ऐसा ही व्यवहार पाने के लिए, inert एट्रिब्यूट का इस्तेमाल किया जा सकता है.

Inert का मतलब है कि चलने-फिरने की क्षमता में कमी. इसलिए, जब आप किसी चीज़ पर निष्क्रियता का निशान लगाते हैं, उन डीओएम एलिमेंट से मूवमेंट या इंटरैक्शन को हटाया जाता है.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

यहां, inert का एलान दूसरे <div> एलिमेंट में किया गया है, जिसमें button2 शामिल है, इसलिए, इस <div> में मौजूद बटन और लेबल समेत सभी कॉन्टेंट पर फ़ोकस नहीं किया जा सकता या उस पर क्लिक नहीं किया जा सकता.

inert एट्रिब्यूट खास तौर पर सुलभता के लिए काम का है, ताकि वीडियो पर फ़ोकस न किया जा सके.

बेहतर सुलभता

वेब कॉन्टेंट की सुलभता से जुड़े दिशा-निर्देशों के मुताबिक, फ़ोकस मैनेजमेंट और एक सही फ़ोकस ऑर्डर की ज़रूरत होती है. इसमें, वीडियो खोजने की सुविधा और इंटरैक्टिविटी, दोनों शामिल हैं. पहले, aria-hidden="true" का इस्तेमाल किए जाने पर, खोजने की सुविधा कम हो सकती थी. हालांकि, बातचीत करना ज़्यादा मुश्किल था.

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

किसी एलिमेंट पर inert लागू करके, उसे बेहतर तरीके से इस्तेमाल किया जा सकता है. इसके लिए, इस्तेमाल के दो मुख्य उदाहरण हैं:

• जब कोई एलिमेंट, डीओएम ट्री का हिस्सा हो, लेकिन वह ऑफ़स्क्रीन हो या छिपा हो.
• जब कोई एलिमेंट डीओएम ट्री का हिस्सा होता है, लेकिन वह इंटरैक्टिव नहीं होना चाहिए.

ऑफ़स्क्रीन या छिपे हुए DOM एलिमेंट

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

नॉन-इंटरैक्टिव डीओएम एलिमेंट

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

उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, यूज़र इंटरफ़ेस (यूआई) की स्थिति और "ट्रैप" की जानकारी दें पेज के उस हिस्से पर फ़ोकस करें जो इंटरैक्टिव है.

फ़ोकस ट्रैपिंग

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

inert का इस्तेमाल करके, यह पक्का किया जा सकता है कि सिर्फ़ वही कॉन्टेंट ऐक्सेस किया जा सकता है जिसे खोजा जा सकता है. यह इन कामों के लिए मददगार है:

• मॉडल डायलॉग, फ़ोकस-ट्रैपिंग मेन्यू या साइड नेविगेशन जैसे एलिमेंट ब्लॉक करना.
• कैरसेल में ऐसे आइटम मौजूद हैं जो चालू नहीं हैं.
• लागू न होने वाले फ़ॉर्म का कॉन्टेंट. उदाहरण के लिए, "बिलिंग पते के जैसा" चेकबॉक्स पर सही का निशान लगाने के बाद, "शिपिंग पता" फ़ील्ड फ़ेड होना या उसे बंद कर देना.
• अलग-अलग स्थिति में होने पर, पूरे यूज़र इंटरफ़ेस (यूआई) को बंद करना.

inert एलिमेंट को विज़ुअल तौर पर दिखाएं

डिफ़ॉल्ट रूप से, किसी सबट्री के निष्क्रिय होने का कोई विज़ुअल संकेत नहीं होता. हमारा सुझाव है कि आप साफ़ तौर पर मार्क कर लें कि डीओएम के कौनसे हिस्से ऐक्टिव हैं और कौनसे इनर्ट हैं.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

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

कौनसे इंटरैक्शन और हलचल ब्लॉक की गई हैं?

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

inert की डिफ़ॉल्ट वैल्यू false है.