Typeahead and screenreaders Typeahead and screenreaders jquery jquery

Typeahead and screenreaders


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.


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