wai-aria - JAWS 没有读取更新的 aria-label

Question

我们正在使用一个自定义的角度表，其中也包括排序功能。

当用户对 column1 进行排序时，我们将aria-labelcolumn1 设置为：“单击以按升序对 column1 进行排序”。

如果用户再次单击相同的标题，我们将相同的 aria-label 更改为“单击以按降序对 column1 进行排序”。

但据观察，aria-labelJAWS 叙述者未检测到更新。

我们如何解决这个 JAWS 可以读取更新的问题，aria-label或者有什么替代方法？

谢谢

Answer 1

感谢您的回复，但我以不同的方式做到了，

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。

这种方法解决了我的问题。

Answer 2

只需添加角色 =“警报”。它会解决你的问题。“alert”角色用于检测动态变化。

Answer 3

替代文本已被计算，但您可以定义两个按钮/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>