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