ARIA для элементов без фокуса

Question

Я изо всех сил пытаюсь включить надлежащую поддержку ARIA для этого случая. У меня есть поле ввода, которое работает как фильтр, и набор элементов, которые будут фильтроваться этим полем ввода. Фокус всегда находится на поле ввода, и с помощью стрелок вверх и вниз вы можете перемещаться по набору результатов. Ввод требует постоянного фокуса, потому что всякий раз, когда я начинаю печатать снова, ввод должен обновляться и фильтровать набор результатов.

Теперь я хочу, чтобы программа чтения с экрана считывала названия элементов при навигации по набору результатов. Но если я нажимаю стрелку вниз (или вверх), считыватель повторяет всю часть поля ввода.

Подсказка: результирующий набор содержит изображения и текст и при щелчке откроет элемент в новом виде.

<input ng-change="$ctrl.doFilter()" ng-keydown="$ctrl.handleKeydown($event)">    

<div class="filter-results" role="list">
  <div ng-repeat="item in $ctrl.results track by $index"
      ng-class="($index == $ctrl.selectedItem ? 'item-selected' : '')"
      ng-click="$ctrl.navigateToSelected()"
      ng-mouseover="$ctrl.selectItem($index)"
      role="listitem"
    <div ng-bind-html="$ctrl.displayName(item)"></div>
  </div>
</div>  

(сокращенный пример)

HandleKeypress просто устанавливает идентификатор выбранного элемента, который будет выделен с помощью соответствующего класса.

Есть ли какое-либо решение, позволяющее программам чтения с экрана читать имя (displayName) выбранного элемента?

Answer 1

Один из способов сделать это, и я не защищаю это лучший способ, но, похоже, он работает, это иметь обработчик onkeydown для вашего поля ввода (которое у вас, возможно, уже есть) и когда вверх / вниз Нажата клавиша со стрелкой (которая звучит так, как будто вы уже слушаете), вы можете обновить визуально скрытый <span> (или <div>), для которого aria-live установлено в «вежливое», и обновить текст в этом <span> с текстом вашего результата. Я думаю, что программа чтения с экрана все равно будет читать содержимое вашего поля ввода, но также должна читать и текст aria-live. Возможно, это не идеальное решение, но вы объявите свой результат.

Некоторый (очень) грубый код:

<span id="result" aria-live="polite" class="sr-only"></span>

<script>
function mykeydown(e) {
  if (e.keyCode == 40)
    document.getElementById("result").innerHTML = "whatever is the next result";
}
</script>

Примечание : Здесь вы можете увидеть класс "sr-only" - Что такое sr-only в Bootstrap 3?