预输入和屏幕阅读器

Question

我正在使用 Typeahead/Bloodhound 从数据库的内容中生成一个列表。我希望屏幕阅读器在突出显示时阅读猎犬建议。我在元素中添加了一些 aria 角色，以尝试从屏幕阅读器中读取内容。但是，当突出显示时，屏幕阅读器是静音的。如果我将焦点添加到该元素，那么猎犬模式窗口将关闭，这将不起作用。

到目前为止我所拥有的：

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

这会将 aria 标签角色添加到输出列表和容器中，以失败尝试通知读者此列表动态更改。我也在听 cursorchanged，所以我可以隔离我需要发声的元素（console.log 验证这一点），但我不知道如何告诉读者使用 tt-cursor 类阅读当前项目。

这是 HTML 输出：

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

当关注输入元素时，读者告诉我的只是它是一个搜索字段。

更新

添加了一个小提琴：http://jsfiddle.net/m9a4sg52/

虽然我不认为这是 1-1 设置，因为预输入结果是在 DOM 加载后生成的。

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

或者为什么不添加自定义模板然后给标题属性 支持 title 属性的this elements 之一。

Answer 2

尝试使用ARIA APG 中提供的一种设计模式。

使用列表框的 ARIA1.1 自动完成模式似乎最适合您的情况。它使用组合框、文本框或搜索框、列表框角色以及其他一些 aria- 属性。

您可能会发现屏幕阅读器支持有点不一致，但这是可用的最强大的模式。 GDS 对他们在 Gov.UK 网站上使用的版本进行了一些广泛的测试和迭代，该模式可在 AlphaGov repo