JAWS не читает обновленную метку aria

Мы используем пользовательскую таблицу angular, которая также включает в себя функцию сортировки.

Когда пользователь сортирует столбец1, мы устанавливаем aria-label для столбца1 как: «Нажмите, чтобы отсортировать столбец1 в порядке возрастания».

Если пользователь снова нажимает на тот же заголовок, мы меняем ту же метку арии на «Нажмите, чтобы отсортировать столбец 1 в порядке убывания».

Но замечено, что обновленный aria-label не обнаруживается рассказчиком JAWS.

Как мы можем решить эту проблему, когда JAWS может читать обновленный aria-label, или есть ли какая-либо альтернатива для этого?

Спасибо


wai-aria jaws-screen-reader narrator
person user3249448    schedule 17.10.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Альтернативный текст уже просчитан, но вы можете определить две кнопки/дива и скрыть ненужную.

<th>
  <div role="button"
      class="ascending"
      aria-label="Click to sort column in ascending order"></div>
  <div role="button"
       class="descending hidden"
       aria-label="Click to sort column in ascending order"></div>
</th>
person Adam    schedule 18.10.2016

arrow_upward
1
arrow_downward

Спасибо за ответ, но я сделал это по-другому,

1. Я добавил ниже код в html, который имеет role="log" aria-live"="polite"

<div class="hidden" id="sortAnnouncer" role="log" aria-live"="polite">
        <span ng-bind="sortingChangedMessage"></span>
</div>

2. когда пользователь нажимает на заголовок столбца для сортировки, вызывает функцию angular и обновляет переменную sortingChangedMessage

       <th ng-click="setSortMessage('column name',direction)">Column name</th>

        $scope.setSortMessage = function(columnName, direction)
        {
          $scope.sortingChangedMessage = "Click on column " + columnName + " to sort in " + direction + " order";      }

Изменения сообщения были обнаружены JAWS и начали чтение обновленного sortingChangedMessage.

Этот метод решил мою проблему.

person user3249448    schedule 18.10.2016

arrow_upward
1
arrow_downward

Просто добавьте role="alert". Это решит вашу проблему. Роль «предупреждение» используется для обнаружения динамических изменений.

person Kedar Hire    schedule 12.05.2017