टाइपहेड और स्क्रीनreaders

Question

मैं डेटाबेस की सामग्री से सूची उत्पन्न करने के लिए टाइपहेड/ब्लडहाउंड का उपयोग कर रहा हूं। हाइलाइट किए जाने पर मुझे स्क्रीनreader द्वारा रक्तपात सुझावों को पढ़ना होगा। मैंने स्क्रीन रीडर से सामग्री को पढ़ने के प्रयास में तत्वों को कुछ एरिया भूमिकाएं जोड़ दी हैं। हालांकि, जब हाइलाइट किया गया, स्क्रीनreader चुप है। यदि मैं तत्व पर ध्यान केंद्रित करता हूं, तो ब्लोडाउंड मोडल विंडो बंद हो जाती है, जो काम नहीं करेगी।

क्या मैं अब तक है:

var myTypeahead = $('.supersearch').typeahead({ 
     highlight: true, 
     autoselect: true 
     }, 
     { 
     name: 'search-content', 
     displayKey: 'title', 
     source: content.ttAdapter(), 
     templates:{ 
      header: '<h3 class="typeaheadTitle">Filtering Content...</h3>', 
      empty: [ 
       '<div class="noResults">', 
       'No Results', 
       '</div>' 
       ].join('\n'), 
      suggestion: Handlebars.compile('<div class="searchListItem"><a href="{{link}}" class="searchLink" aria-label="{{title}}">{{title}}</a></div>') 
     } 
     }); 


     myTypeahead.on('typeahead:cursorchanged', function($e, datum){ 
     $(this).html(datum["value"]); 
     var focused = $(document.activeElement) 
     var submenuHighlight = focused.parent().find('.tt-cursor .searchListItem a'); 
     console.log(submenuHighlight.text()); 
     }); 



     // Add aria dialog role 
     $('.tt-dataset-search-content').attr({ 
     'role': 'dialog', 
     'aria-live': 'assertive', 
     'aria-relevant':'additions' 
     }); 

कौन सा उत्पादन सूची और कंटेनर के लिए एरिया लेबल भूमिकाओं कहते हैं, पाठक को सूचित करने के कि इस सूची गतिशील में परिवर्तन का विफल प्रयास किया। मैं कर्सर को भी सुन रहा हूं, इसलिए मैं उस तत्व को अलग कर सकता हूं जिसकी मुझे आवाज़ की आवश्यकता है (console.log यह सत्यापित करता है), लेकिन मुझे नहीं पता कि पाठक को टीटी-कर्सर वर्ग के साथ वर्तमान आइटम को पढ़ने के लिए कैसे बताना है।

<div class="tt-dataset-search-content" role="dialog" aria-live="rude" aria-relevant="additions"> 
    <h3 class="typeaheadTitle">Filtering Content...</h3> 
    <span class="tt-suggestions" style="display: block;"> 
    <div class="tt-suggestion tt-cursor"> 
     <div class="searchListItem" style="white-space: normal;"> 
     <a href="/about" class="searchLink" aria-label="About"><strong class="tt-highlight">A</strong>bout</a> 
     </div> 
    </div> 
    <div class="tt-suggestion"> 
     <div class="searchListItem" style="white-space: normal;"> 
     <a href="Things" class="searchLink" aria-label="Things">THings</a> 
     </div> 
    </div> 

सभी पाठक मुझे पता चलता है कि इनपुट तत्व पर ध्यान केंद्रित यह एक खोज फ़ील्ड है:

यहाँ HTML आउटपुट होता है।

अद्यतन

जोड़ा एक बेला: http://jsfiddle.net/m9a4sg52/

हालांकि मुझे लगता है कि यह 1-1 से सेटअप है, के रूप में Typeahead परिणाम डोम लोड के बाद उत्पन्न कर रहे हैं नहीं है।

Answer 1

हाइलाइज्ड तत्व को शीर्षक देने से मदद मिल सकती है।

myTypeahead.on('typeahead:cursorchanged', function($e, datum) { 

    console.log($e); 
    $(".tt-cursor").attr("title", datum); 

    /* 
    $(this).html(datum["value"]); 
    var focused = $(document.activeElement) 
    var submenuHighlight = focused.parent().find('.tt-cursor .searchListItem a'); 
    console.log(submenuHighlight.text()); 
    */ 
}); 

या क्यों नहीं जोड़ने कस्टम टेम्पलेट तो this elements कि शीर्षक गुण का समर्थन की एक के लिए शीर्षक विशेषता दे।