कॉन्टेंट छिपाना और अपडेट करना

सहायक टेक्नोलॉजी से कॉन्टेंट छिपाना

ऐलिस बॉक्सहॉल

डेव गैश

मेगिन किर्नी

आरिया-छिपा हुआ

सहायक टेक्नोलॉजी के उपयोगकर्ताओं के अनुभव को बेहतर बनाने की एक और तकनीक यह पक्का करना है कि पेज के सिर्फ़ काम के हिस्सों को सहायक टेक्नोलॉजी दिख सके. यह पक्का करने के कई तरीके हैं कि डीओएम के किसी सेक्शन को Accessibility API के ज़रिए न दिखाया जाए.

सबसे पहले, डीओएम से पूरी तरह छिपी हुई किसी भी चीज़ को सुलभता ट्री में शामिल नहीं किया जाएगा. इसलिए, visibility: hidden या display: none की सीएसएस स्टाइल या HTML5 hidden एट्रिब्यूट का इस्तेमाल करने वाली किसी भी चीज़ को, सहायक टेक्नोलॉजी इस्तेमाल करने वालों को नहीं दिखाया जाएगा.

हालांकि, एक ऐसा एलिमेंट जो विज़ुअल तौर पर रेंडर नहीं होता है, लेकिन पूरी तरह से छिपा हुआ नहीं है, उसे अब भी सुलभता ट्री में शामिल कर लिया जाता है. एक सामान्य तकनीक यह है कि ऐसे एलिमेंट में "सिर्फ़ स्क्रीन रीडर के लिए टेक्स्ट" शामिल किया जाए जो ऑफ़स्क्रीन पोज़िशन में बिलकुल सही हो.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

साथ ही, जैसा कि हमने देखा है, सिर्फ़ स्क्रीन रीडर को टेक्स्ट के तौर पर aria-label, aria-labelledby या aria-describedby एट्रिब्यूट की मदद से, ऐसे एलिमेंट के बारे में बताया जा सकता है जो छिपा हुआ हो.

"सिर्फ़ स्क्रीन रीडर" टेक्स्ट बनाने के बारे में ज़्यादा जानकारी के लिए, टेक्स्ट छिपाने की तकनीकों के बारे में WebAIM का यह लेख देखें.

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

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

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

अब जब आपको ARIA की बुनियादी बातें समझ आ गई हैं, यह नेटिव एचटीएमएल सिमैंटिक के साथ कैसे काम करता है, और सुलभता ट्री पर कोई बड़ी सर्जरी करने के साथ-साथ किसी एक एलिमेंट के सिमैंटिक को बदलने के लिए, इसका इस्तेमाल कैसे किया जा सकता है, चलिए देखते हैं कि समय के हिसाब से संवेदनशील जानकारी देने के लिए, इसका इस्तेमाल कैसे किया जा सकता है.

aria-live

aria-live से डेवलपर को पेज के किसी हिस्से को "लाइव" के तौर पर मार्क करने की सुविधा मिलती है. इससे पेज के किसी भी हिस्से को एक्सप्लोर करने के बजाय, पेज की स्थिति चाहे कुछ भी हो, अपडेट की जानकारी उपयोगकर्ताओं को तुरंत दी जानी चाहिए. जब किसी एलिमेंट में aria-live एट्रिब्यूट होता है, तो पेज के उस हिस्से को लाइव रीजन कहा जाता है जिसमें वह एलिमेंट और उसके डिसेंडेंट शामिल होते हैं.

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

<div class="status">Your message has been sent.</div>

करने के लिए डिज़ाइन किया गया है.

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live में तीन वैल्यू डाली जा सकती हैं: polite, assertive, और off.

• aria-live="polite" सहायक टेक्नोलॉजी को बताता है कि जो काम अभी किया जा रहा है उसे पूरा कर लेने पर, उपयोगकर्ता को इस बदलाव के बारे में चेतावनी दी जाएगी. अगर कोई ज़रूरी चीज़ ज़रूरी नहीं है, लेकिन ज़रूरी नहीं है और aria-live का ज़्यादातर इस्तेमाल किया जाता है, तो उसका इस्तेमाल करना बेहतर होता है.
• aria-live="assertive" सहायक टेक्नोलॉजी को किसी भी काम में रुकावट डालने के लिए कहता है और उपयोगकर्ताओं को इस बदलाव के बारे में तुरंत सूचना देता है. ऐसा सिर्फ़ ज़रूरी और तुरंत किए जाने वाले अपडेट के लिए होता है. जैसे, "सर्वर की गड़बड़ी हुई है और आपके बदलाव सेव नहीं हुए हैं; कृपया पेज को रीफ़्रेश करें" या उपयोगकर्ता की कार्रवाई से सीधे तौर पर, जैसे कि स्टेपर विजेट पर बटन को इनपुट फ़ील्ड में अपडेट करने के लिए.
• aria-live="off" की मदद से, सहायक टेक्नोलॉजी की मदद से aria-live रुकावटों को कुछ समय के लिए बंद किया जा सकता है.

यहां कुछ ऐसी तरकीबें दी गई हैं जिनसे यह पक्का किया जा सकता है कि आपके लाइव इलाके ठीक से काम करें.

सबसे पहले, यह ज़रूरी है कि आपका aria-live क्षेत्र, पेज लोड होने के शुरुआती समय में सेट हो. यह एक मुश्किल नियम नहीं है. हालांकि, अगर आपको aria-live इलाके में समस्या आ रही है, तो यह समस्या हो सकती है.

दूसरा, अलग-अलग तरह के बदलावों पर अलग-अलग स्क्रीन रीडर अलग-अलग तरह से प्रतिक्रिया देते हैं. उदाहरण के लिए, डिसेंडेंट एलिमेंट की hidden स्टाइल को सही से गलत में टॉगल करके, कुछ स्क्रीन रीडर पर सूचना ट्रिगर की जा सकती है.

aria-live के साथ काम करने वाले अन्य एट्रिब्यूट से, आपको यह बेहतर बनाने में मदद मिलती है कि लाइव एरिया बदलने पर, उपयोगकर्ता को कौनसी जानकारी भेजी जाए.

aria-atomic बताता है कि अपडेट देते समय पूरे इलाके को पूरा माना जाना चाहिए या नहीं. उदाहरण के लिए, अगर तारीख के किसी विजेट में दिन, महीने, और साल शामिल हैं, तो aria-live=true और aria-atomic=true हैं. साथ ही, उपयोगकर्ता सिर्फ़ महीने की वैल्यू बदलने के लिए स्टेपर कंट्रोल का इस्तेमाल करता है, तो तारीख वाले विजेट का पूरा कॉन्टेंट फिर से पढ़ा जाएगा. aria-atomic की वैल्यू true या false (डिफ़ॉल्ट) हो सकती है.

aria-relevant से पता चलता है कि उपयोगकर्ता को किस तरह के बदलाव किए जाने चाहिए. कुछ विकल्प होते हैं, जिन्हें अलग से या टोकन सूची के तौर पर इस्तेमाल किया जा सकता है.

• जोड़ का मतलब है कि लाइव रीजन में जोड़ा जा रहा कोई भी एलिमेंट अहम होता है. उदाहरण के लिए, स्टेटस मैसेज के किसी मौजूदा लॉग में स्पैन जोड़ने का मतलब यह है कि उपयोगकर्ता को स्पैन के बारे में बताया जाएगा (यह मानते हुए कि aria-atomic false था).
• text का मतलब है कि किसी भी डिसेंडेंट नोड में जोड़ा जा रहा टेक्स्ट कॉन्टेंट, काम का है. उदाहरण के लिए, किसी कस्टम टेक्स्ट फ़ील्ड की textContent प्रॉपर्टी में बदलाव करने पर, उपयोगकर्ता को बदला गया टेक्स्ट पढ़कर सुनाया जाएगा.
• रिमूवल, इसका मतलब है कि किसी भी टेक्स्ट या डिसेंडेंट नोड को हटाने की जानकारी उपयोगकर्ता को दी जानी चाहिए.
• all का मतलब है कि सभी बदलाव काम के हैं. हालांकि, aria-relevant का डिफ़ॉल्ट वैल्यू additions text है. इसका मतलब है कि अगर aria-relevant की जानकारी नहीं दी जाती है, तो यह उपयोगकर्ता को एलिमेंट में जोड़े जाने के लिए अपडेट कर देगी. यह ऐसा एलिमेंट होगा जिसे आपको सबसे ज़्यादा पसंद आएगा.

आखिर में, aria-busy से आप सहायक टेक्नोलॉजी को यह सूचना दे सकते हैं कि उसे किसी एलिमेंट में हुए बदलावों को कुछ समय के लिए अनदेखा करना चाहिए, जैसे कि चीज़ें लोड हो रही हों. सब कुछ सही तरीके से हो जाने के बाद, लोगों के काम करने के तरीके को सामान्य बनाने के लिए, aria-busy को 'गलत' पर सेट किया जाना चाहिए.