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

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

Alice Boxhall

Dave Gash

Meggin Kearney

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

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

सबसे पहले, डीओएम से साफ़ तौर पर छिपा हुआ कोई भी आइटम, वह डेटा भी शामिल नहीं किया जाएगा में ज़रूरी जानकारी मिलेगी. इसलिए, ऐसी कोई भी चीज़ जिसकी सीएसएस स्टाइल 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 एट्रिब्यूट सेट करें. इस सादे 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 प्रॉपर्टी में बदलाव करना उपयोगकर्ता को बदले गए टेक्स्ट को पढ़ेगा.
• हटाने का मतलब है कि किसी भी टेक्स्ट या डिसेंडेंट नोड को हटा दिया जाना चाहिए उपयोगकर्ता को बताया जाना चाहिए.
• सभी का मतलब है कि सभी बदलाव काम के हैं. हालांकि, aria-relevant, additions text है. इसका मतलब है कि अगर अपनी पसंद के बारे में न बताया जाए, तो इसका मतलब है कि aria-relevant यह एलिमेंट में जोड़ी गई किसी भी चीज़ के लिए उपयोगकर्ता को अपडेट कर देगा, आपकी सबसे ज़्यादा दिलचस्पी हो सकती है.

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