inert एट्रिब्यूट, एक ग्लोबल एचटीएमएल एट्रिब्यूट है. इससे किसी एलिमेंट के लिए, उपयोगकर्ता इनपुट इवेंट को हटाने और वापस लाने का तरीका आसान हो जाता है. इन इवेंट में, फ़ोकस इवेंट और सहायक टेक्नोलॉजी से मिलने वाले इवेंट भी शामिल हैं.
डायलॉग एलिमेंट में, इनर्ट डिफ़ॉल्ट रूप से लागू होता है. जैसे, जब उपयोगकर्ताओं को कोई विकल्प चुनने के लिए डायलॉग खोलने के लिए showModal का इस्तेमाल किया जाता है और फिर उसे स्क्रीन से हटा दिया जाता है.
<dialog> खोलने के बाद, पेज का बाकी हिस्सा काम नहीं करता. उदाहरण के लिए, अब लिंक पर क्लिक नहीं किया जा सकता या टैब नहीं किया जा सकता.
अन्य एलिमेंट पर भी यही व्यवहार पाने के लिए, 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 एलिमेंट
ड्रॉअर जैसे एलिमेंट से, आम तौर पर सुलभता से जुड़ी समस्याएं आती हैं. ये एलिमेंट, DOM में ऐसे एलिमेंट जोड़ते हैं जो उपयोगकर्ता को हमेशा नहीं दिखते.
inert की मदद से, यह पक्का किया जा सकता है कि ड्रॉअर के सब-एलिमेंट ऑफ़स्क्रीन होने पर, कीबोर्ड का इस्तेमाल करने वाला व्यक्ति गलती से उनसे इंटरैक्ट न कर पाए.
नॉन-इंटरैक्टिव डीओएम एलिमेंट
सुलभता से जुड़ी एक और आम समस्या यह है कि यूज़र इंटरफ़ेस (यूआई) का डिज़ाइन दिख रहा हो या कुछ हद तक दिख रहा हो, लेकिन वह इंटरैक्टिव न हो. यह पेज लोड होने के दौरान, फ़ॉर्म सबमिट करने के दौरान या डायलॉग ओवरले खुला होने पर हो सकता है.
उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, यूज़र इंटरफ़ेस (यूआई) की स्थिति बताएं और पेज के उस हिस्से पर फ़ोकस को "ट्रैप" करें जो इंटरैक्टिव है.
फ़ोकस ट्रैपिंग
फ़ोकस ट्रैपिंग, यूज़र इंटरफ़ेस (यूआई) को ऐक्सेस करने के बेहतर तरीके का मुख्य कॉन्सेप्ट है. आपको यह पक्का करना चाहिए कि स्क्रीन रीडर का फ़ोकस, इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर हो. साथ ही, यह भी पता हो कि कोई एलिमेंट इंटरैक्टिविटी को ब्लॉक कर रहा है या नहीं. इससे, गलत तरीके से काम करने वाले स्क्रीन रीडर को पेज के ओवरले के पीछे जाने से रोकने में भी मदद मिलती है. साथ ही, पहले फ़ॉर्म के प्रोसेस होने के दौरान, गलती से कोई दूसरा फ़ॉर्म सबमिट होने से भी रोका जा सकता है.
inert का इस्तेमाल करके, यह पक्का किया जा सकता है कि सिर्फ़ खोजे जाने लायक कॉन्टेंट को ऐक्सेस किया जा सकता है. यह इन कामों के लिए मददगार है:
- मॉडल डायलॉग, फ़ोकस-ट्रैपिंग मेन्यू या साइड नेविगेशन जैसे एलिमेंट ब्लॉक करना.
- कैरसेल में ऐसे आइटम मौजूद हैं जो चालू नहीं हैं.
- लागू न होने वाले फ़ॉर्म का कॉन्टेंट. उदाहरण के लिए, "बिलिंग पते के जैसा" चेकबॉक्स पर सही का निशान लगाने के बाद, "शिपिंग पता" फ़ील्ड फ़ेड होना या उसे बंद कर देना.
- अलग-अलग स्थिति में होने पर, पूरे यूज़र इंटरफ़ेस (यूआई) को बंद करना.
inert एलिमेंट को विज़ुअल तौर पर दिखाना
डिफ़ॉल्ट रूप से, किसी सबट्री के इनऐक्टिव होने की जानकारी विज़ुअल तौर पर नहीं दी जाती. हमारा सुझाव है कि आप साफ़ तौर पर मार्क करें कि डीओएम के कौनसे हिस्से चालू हैं और कौनसे नहीं.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
सभी उपयोगकर्ता, एक पेज के सभी हिस्सों को एक साथ नहीं देख सकते. उदाहरण के लिए, स्क्रीन रीडर, छोटे डिवाइसों या ज़ूम करने की सुविधा का इस्तेमाल करने वाले उपयोगकर्ताओं को, हो सकता है कि वे पेज का ऐक्टिव हिस्सा न देख पाएं. साथ ही, हो सकता है कि वे ऐसे सेक्शन को ऐक्टिव न समझ पाएं जो ऐक्टिव नहीं हैं. अलग-अलग कंट्रोल के लिए, बंद है एट्रिब्यूट का इस्तेमाल करना ज़्यादा सही रहेगा.
कौनसे इंटरैक्शन और मूवमेंट ब्लॉक किए जाते हैं?
डिफ़ॉल्ट रूप से, inert फ़ोकस और क्लिक इवेंट को ब्लॉक करता है. सहायक टेक्नोलॉजी के लिए, यह टैब करने की सुविधा और खोजने की सुविधा को भी ब्लॉक कर देता है. ब्राउज़र, एलिमेंट में पेज खोज और टेक्स्ट चुनने की सुविधा को भी अनदेखा कर सकता है.
inert की डिफ़ॉल्ट वैल्यू false है.