Typeahead and screenreaders

Question

I am using Typeahead/Bloodhound to generate a list from the content of a database. I would like the bloodhound suggestions to be read by the screenreader when highlighted. I have added a few aria roles to the elements in an attempt to get the content read from the screen reader. However, when highlighted, the screenreader is silent. If I add focus to the element, then the blodhound modal window closes, which will not work.

What I have so far:

 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'
 });

Which adds aria label roles to the output list and the container, in a failed attempt to notify the reader that this list changes dynamically. I am also listening to the cursorchanged, so I can isolate the element I need voiced (the console.log verifies this), but I do not know how to tell the reader to read the current item with the tt-cursor class.

Here is the HTML output:

 <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>
 </div>

All the reader tells me when focused on the input element is it is a search field.

UPdate

Added a fiddle: http://jsfiddle.net/m9a4sg52/

although I dont think this is a 1-1 setup, as the typeahead results are generated after the DOM loads.

Christeenchristel

can you please create a sample on jsfiddle.net ? – Corkhill

Your jsfiddle demo should be a runnable code that reproduces you problem so that other users can help you better. – Corkhill

The best working example is here: twitter.github.io/typeahead.js/examples. My setup is exactly the same. You can see it kinda works. – Christeenchristel

Which screenreaders have you tested with? – Avon

Answer 1

Giving title to highligted element might help.

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());
  */
});

Or why not adding Custom template then give title attribute to one of this elements that support title attribute.

Gravesend

Answer 2

Try using one of the design patterns available in the ARIA APG.

The ARIA1.1 autocomplete pattern using listbox is the one that seems to fit your case best. It uses the combobox, textbox or searchbox, and listbox roles, with a few other aria- attributes.

You'll likely find screen reader support a bit inconsistent, but this is the most robust pattern available. GDS did some extensive testing and iteration on the version they use on the Gov.UK website, and the pattern is available on the AlphaGov repo

Autotoxin

While the APG are great to know and can used to improve this case, the questioner already chose Typeahead as an implementation of the combobox, and is facing one particular technical issue where the sr is not reading the list. – Avon