वाईएआई-एआरआईए का उपयोग कर स्क्रीन पाठकों को कैसे सूचित करें कि एक div अब दिखाई दे रहा है

Question

आप वाई-एआरआईए का उपयोग करके स्क्रीन पाठकों को कैसे सूचित करते हैं कि एक div अब दिखाई दे रहा है?

अगर हम एचटीएमएल मिला

<div id="foo">Present main content</div> 
<div id="bar" style="display: none;">Hidden content</div> 

और फिर हम

$('#foo').hide(); 
$('#bar').show(); 

कैसे हम स्क्रीन रीडर है कि वे अब दिखाई div के बारे में उपयोगकर्ता (स्वचालित रूप से सूचित करना चाहिए या संभवतः पर ध्यान केंद्रित करने को सूचित करना अब दृश्य div)?

Answer 1

आप स्क्रीन रीडर्स बताने के लिए है कि सामग्री अब दिखाई दे रहा है आम तौर पर की जरूरत नहीं है हो सकता है। aria-hidden का उपयोग अभ्यास में कोई फर्क नहीं पड़ता है, इसलिए मैं इसका उपयोग न करने का सुझाव दूंगा। यदि आप स्क्रीन रीडर द्वारा छुपा div की टेक्स्ट सामग्री की घोषणा करना चाहते हैं तो आप role=alert या aria-live=polite (उदाहरण के लिए) का उपयोग कर सकते हैं। आप इसे अद्यतन सामग्री के लिए उपयोग करेंगे, जिसे आप स्क्रीन रीडर को खोजने के लिए सामग्री स्थान पर जाने के बिना सुनना चाहते हैं। उदाहरण के लिए एक पॉप अप संदेश जो फ़ोकस प्राप्त नहीं करता है, लेकिन इसमें टेक्स्ट जानकारी शामिल होती है जो एक बटन दबाकर किसी क्रिया के बाद उपयोगकर्ता के लिए प्रासंगिक होती है।

अद्यतन: मैं लोग हैं, जो ARIA 1.0 विकसित में से एक के साथ चर्चा की है, वह एक अर्थ संकेत है कि सामग्री छिपा हुआ है के रूप में HTML5 hidden बजाय aria-hidden का उपयोग कर का सुझाव दिया। पुराने ब्राउज़र के लिए इसे सीएसएस display:none के साथ संयोजन में उपयोग करें। एचटीएमएलका समर्थन करने वाले ब्राउज़र उपयोगकर्ता एजेंट स्टाइल शीट में display:none का उपयोग करके इसे लागू करते हैं।

<div id="content" role="alert"> 
... 
</div> 

$("#content").show(); 

इस उपयोगकर्ता को सचेत होगा जब #content दिखाई देने लगता है:

Answer 2

उपयोग aria-hidden

इंगित करता है कि तत्व और उसके वंश के सभी दृश्य लेखक द्वारा कार्यान्वित के रूप में नहीं कर रहे हैं या किसी भी उपयोगकर्ता के लिए समझ योग्य। संबंधित एरिया-अक्षम देखें।

यदि कोई तत्व केवल कुछ उपयोगकर्ता क्रिया के बाद दिखाई देता है, तो लेखकों को एरिया-छुपे हुए गुण को सत्य पर सेट करना होगा। जब तत्व प्रस्तुत किया जाता है, तो लेखकों को एरिया-छिपी हुई विशेषता को झूठी पर सेट करना होगा या विशेषता को हटा देना होगा, यह दर्शाता है कि तत्व दिखाई दे रहा है। कुछ सहायक प्रौद्योगिकियां सीधे डब्ल्यूओएम के माध्यम से वाईएआई-एआरआईए जानकारी तक पहुंचती हैं और ब्राउज़र द्वारा समर्थित प्लेटफ़ॉर्म पहुंच के माध्यम से नहीं। लेखकों को उस सामग्री पर Aria-hidden = "true" सेट करना चाहिए जो प्रदर्शित नहीं होता है, भले ही इसे छिपाने के लिए उपयोग की गई तंत्र के बावजूद। यह सहायक तकनीकों या उपयोगकर्ता एजेंटों को दस्तावेज़ में छिपा तत्वों को सही ढंग से छोड़ने की अनुमति देता है।

तो अपने कोड

$('#foo').hide().attr('aria-hidden', 'true'); 
$('#bar').show().attr('aria-hidden', 'false'); 

Answer 3

भूमिका के साथ सामग्री को टैग = "सचेत" यह एक चेतावनी घटना है जो स्क्रीन रीडर जब यह दिखाई देने लगता है का जवाब देंगे आग का कारण होगा।

एरिया-छुपा उपयोग किया जाना चाहिए जब आप स्क्रीन रीडर से कुछ छिपाना चाहते हैं, लेकिन इसे देखने वाले उपयोगकर्ताओं को दिखाएं। हालांकि देखभाल के साथ प्रयोग करें।यहाँ और अधिक के लिए देखें: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Answer 4

मैं जब वे, एक पाठ क्षेत्र तत्व के चरित्र सीमा तक पहुंच रहे है, तो आप कैसे करने के लिए समझने की कोशिश कर रहे हैं स्क्रीन रीडर उपयोगकर्ताओं को सूचित करने के लिए कैसे आप भूमिका का उपयोग कर सकता है दिखा एक नमूना बनाया = "चेतावनी" चेतावनी भूमिका उपयोग करें, यह मदद मिल सकती है:

वहाँ यह करने के लिए अधिक है, लेकिन यहाँ कोड है जो चेतावनी का उत्पादन का छोटा सा हिस्सा है:

if (characterCount > myAlertTheshold) { 
     var newAlert = document.createElement("div"); /* using the native js because it's faster */ 
     newAlert.setAttribute("role", "alert"); 
     newAlert.setAttribute("id", "alert"); 
     newAlert.setAttribute("class","sr-only"); 
     var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left'); 
     newAlert.appendChild(msg); 
     document.body.appendChild(newAlert); 
    } 

http://codepen.io/chris-hore/pen/emXovR