जावास्क्रिप्ट

के साथ जोड़े गए नए सामग्री को पढ़ने के लिए स्क्रीन रीडर प्राप्त करना जब कोई वेब पेज लोड होता है, स्क्रीन पाठक (जैसे ओएस एक्स के साथ आता है, या विंडोज़ पर जेएडब्ल्यूएस) पूरे पृष्ठ की सामग्री को पढ़ेगा। लेकिन कहें कि आपका पृष्ठ गतिशील है, और जैसे ही उपयोगकर्ता कोई कार्रवाई कर रहे हैं, पृष्ठ पर नई सामग्री जोड़ दी जाती है। सादगी के लिए, कहें कि आप कहीं <span> में एक संदेश प्रदर्शित करते हैं। नया संदेश पढ़ने के लिए आप स्क्रीन रीडर कैसे प्राप्त कर सकते हैं?जावास्क्रिप्ट

स्रोत

2010-09-08 avernet

स्क्रीन पाठक फ़ोकस प्राप्त करते समय फ़ॉर्म फ़ील्ड और लिंक पढ़ते हैं। इसलिए एक संभावना है कि पाठ के चारों ओर एक लंगर डालें और उस एंकर पर ध्यान केंद्रित करें। सीएसएस के साथ आप पेज को देख रहे उपयोगकर्ताओं के लिंक के रूप में दिखाने के लिए लिंक प्राप्त कर सकते हैं। लेकिन यह विधि बहुत संतोषजनक नहीं है क्योंकि स्क्रीन रीडर उपयोगकर्ताओं को झूठा विश्वास किया जाएगा कि यह एक लिंक है। – avernet

किसी भी तत्व में tabindex जोड़ें और यह पठनीय हो जाएगा, मुझे विश्वास है (tabindex = -1 इसे पटकथा बनाता है लेकिन टैबबल योग्य नहीं है)। लिंक पर क्लिक करने के बाद मैं प्रायः प्रोग्रामेटिक रूप से नई सामग्री पर ध्यान केंद्रित करता हूं (जैसे टैब स्विचर या एग्रीजन) - लेकिन इसे फोकस करने योग्य लिंक नहीं होना चाहिए। Tabindex पर पढ़ें। –

WAI-ARIA विनिर्देशन कई तरीकों को परिभाषित करता है जिससे स्क्रीन पाठक एक डोम तत्व "देख" सकते हैं। सबसे अच्छी समर्थित विधि aria-live विशेषता है। इसमें off, polite, assertive और rude मोड हैं। दृढ़ता के स्तर जितना अधिक होगा, स्क्रीन पाठक द्वारा वर्तमान में जो बात की जा रही है, उसे बाधित करना अधिक संभावना है।

निम्नलिखित Firefox 3 और फ़ायरफ़ॉक्स 4.0b9 के तहत NVDA साथ परीक्षण किया गया है:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="js/jquery-1.4.2.min.js"></script> 
</head> 
<body> 
    <button onclick="$('#statusbar').html(new Date().toString())">Update</button> 
    <div id="statusbar" aria-live="assertive"></div> 
</body>

एक ही बात WAI-ARIA rolesrole="status" और role="alert" साथ accomplished हो सकता है। मेरे पास असंगतता की रिपोर्टें हैं, लेकिन उन्हें पुन: उत्पन्न करने में सक्षम नहीं हैं।

<div id="statusbar" role="status">...</div>

स्रोत

2011-01-06 20:29:46

बस स्पष्ट होने के लिए, 'एरिया-लाइव' के लिए केवल वैध मान 'ऑफ', 'विनम्र' और 'जोरदार' हैं। यदि कोई भी जीवित क्षेत्रों से जुड़ी भूमिकाओं के लिए चूक के बारे में उत्सुक है या यहां तक कि सिर्फ यह देखना चाहता है कि वे क्या करते हैं, तो मैंने एक छोटा सा खेल का मैदान लिखा जो कार्य में लाइव क्षेत्रों को दिखाता है: http://schne324.github.io/live-region-playground/ – harris

यह मैक में फ़ायरफ़ॉक्स 41.0.2 के साथ मेरे लिए काम नहीं करता है क्या आपके पास कोई सुराग है? सफारी और क्रोम –

के साथ ठीक काम करता है बस एरिया-लाइव के वैध मानों को जोड़ने के लिए, वास्तव में 4 मान हैं। ** ** ** ** ** विनम्र **, ** ज़ोरदार **, और ** कठोर ** जैसा कि यहां दस्तावेज़ों से नोट किया गया है: https://msdn.microsoft.com/en-us/library/windows/apps /hh465711.aspx –

यहाँ एक अनुकूलित असली दुनिया उदाहरण है - यह ऊपर स्तर के मार्कअप पहले से ही जे एस के माध्यम से एक का चयन करें मेनू में लिंक के साथ एक बिना क्रम वाली सूची से बदल दिया गया है। वास्तविक कोड बहुत जटिल है और स्पष्ट रूप से इसकी पूरी तरह से शामिल नहीं किया जा सकता है, इसलिए याद रखें कि इसे उत्पादन के उपयोग के लिए पुनर्विचार करना होगा। कीबोर्ड को सुलभ बनाने के लिए चुनिंदा मेनू के लिए, हमने कुंजीपटल & ऑनचेंज इवेंट्स पंजीकृत किया और उपयोगकर्ताओं ने सूची से टैबब किए जाने पर AJAX कॉल निकाल दिया (विनिमय ईवेंट के समय में ब्राउज़र अंतर से सावधान रहें)। यह सुलभ बनाने के लिए एक गंभीर पिटा था, लेकिन यह संभव है।

// HTML 

    <!-- select element with content URL --> 
    <label for="select_element">State</label> 
    <select id="select_element"> 
    <option value="#URL_TO_CONTENT_PAGE#" rel="alabama">Alabama</option> 
    </select> 
    <p id="loading_element">Content Loading</p> 

    <!-- AJAX content loads into this container --> 
    <div id="results_container"></div> 


    // JAVASCRIPT (abstracted from a Prototype class, DO NOT use as-is) 

    var selectMenu = $('select_element'); 
    var loadingElement = $('loading_element'); 
    var resultsContainer = $('results_container'); 

// listen for keypress event (omitted other listeners and support test logic) 
    this.selectMenu.addEventListener('keypress', this.__keyPressDetector, false); 


/* event callbacks */ 

// Keypress listener 

    __keyPressDetector:function(e){ 

    // if we are arrowing through the select, enable the loading element 
    if(e.keyCode === 40 || e.keyCode === 38){ 
     if(e.target.id === 'select_element'){ 
      this.loadingElement.setAttribute('tabIndex','0'); 
     } 
    } 
    // if we tab off of the select, send focus to the loading element 
    // while it is fetching data 
    else if(e.keyCode === 9){ 
     if(targ.id === 'select_element' && targ.options[targ.selectedIndex].value !== ''){    
      this.__changeStateDetector(e); 

      this.loadingElement.focus(); 

     } 
    } 
} 

// content changer (also used for clicks) 
__changeStateDetector:function(e){ 

    // only execute if there is a state change 
    if(this.selectedState !== e.target.options[e.target.selectedIndex].rel){ 

     // get state name and file path 
     var stateName = e.target.options[e.target.selectedIndex].rel; 
     var stateFile = e.target.options[e.target.selectedIndex].value; 

     // get the state file 
     this.getStateFile(stateFile); 

     this.selectedState = stateName; 

    } 
} 

getStateFile:function(stateFile){ 
    new Ajax.Request(stateFile, { 
     method: 'get', 
     onSuccess:function(transport){  

      // insert markup into container 
      var markup = transport.responseText; 

      // NOTE: select which part of the fetched page you want to insert, 
      // this code was written to grab the whole page and sort later 

      this.resultsContainer.update(markup); 

      var timeout = setTimeout(function(){ 

       // focus on new content 
       this.resultsContainer.focus(); 

      }.bind(this), 150); 

     }.bind(this) 
    }); 
}

स्रोत

2011-05-05 21:22:18

उत्तर

संबंधित मुद्दे