Ввод текста и программы чтения с экрана

Я использую Typeahead/Bloodhound для создания списка из содержимого базы данных. Я хотел бы, чтобы предложения ищейки читались программой чтения с экрана, когда они были выделены. Я добавил несколько ролей арии к элементам, пытаясь получить содержимое, прочитанное программой чтения с экрана. Однако при выделении программа чтения с экрана молчит. Если я добавлю фокус на элемент, то модальное окно ищейки закроется, что не сработает.

Что у меня есть до сих пор:

 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.


jquery typeahead.js accessibility screen-readers bloodhound
person Carey Estes    schedule 02.06.2015    source источник
comment
не могли бы вы создать образец на jsfiddle.net?   -  person Dhiraj    schedule 04.06.2015
comment
Ваша демонстрация jsfiddle должна быть исполняемым кодом, который воспроизводит вашу проблему, чтобы другие пользователи могли помочь вам лучше.   -  person Dhiraj    schedule 05.06.2015
comment
Лучший рабочий пример здесь: twitter.github.io/typeahead.js/examples. Моя установка точно такая же. Вы можете видеть, что это вроде работает.   -  person Carey Estes    schedule 05.06.2015
comment
С какими программами для чтения с экрана вы тестировали?   -  person Andy    schedule 09.12.2019

Ответы (2)


arrow_upward
0
arrow_downward

Может помочь присвоение заголовка выделенному элементу.

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 для одного из этих элементов которые поддерживают атрибут title.

person irfan    schedule 24.02.2016

arrow_upward
-1
arrow_downward

Попробуйте использовать один из шаблонов проектирования, доступных в ARIA APG.

Шаблон автозаполнения ARIA1.1 с использованием списка лучше всего подходит для вашего случая. Он использует поля со списком, текстовые поля или поля поиска и роли списка с несколькими другими атрибутами aria-.

Вы, вероятно, обнаружите, что поддержка средств чтения с экрана немного непоследовательна, но это самый надежный доступный шаблон. GDS провел обширное тестирование и итерацию версии, которую они используют на веб-сайте Gov.UK, и шаблон доступен на Репозиторий AlphaGov

person Léonie Watson    schedule 31.12.2018
comment
Хотя APG полезно знать и можно использовать для улучшения этого случая, спрашивающий уже выбрал Typeahead в качестве реализации поля со списком и столкнулся с одной конкретной технической проблемой, когда sr не читает список. - person Andy; 09.12.2019