Блог

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

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

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

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

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

Спасибо

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

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

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

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

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

2. когда пользователь нажимает на заголовок столбца для сортировки, вызывает угловую функцию и обновляет переменную 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.

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

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