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

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

inert एट्रिब्यूट, खास तौर पर सुलभता के लिए मददगार होता है. उदाहरण के लिए, फ़ोकस ट्रैपिंग को रोकने के लिए.

बेहतर सुलभता

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

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

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

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

स्क्रीन पर न दिखने वाले या छिपे हुए डीओएम एलिमेंट

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

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

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

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

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

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

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

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

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

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

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

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

कौनसे इंटरैक्शन और मूवमेंट ब्लॉक किए जाते हैं?

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

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