JAWS无法读取更新的aria标签

Question

我们正在使用一个自定义的角表，它也包含排序功能。

当用户排序列n1时，我们将列n1的aria-label设置为:"单击以升序对列1排序"。

如果用户再次单击同一标题，我们将相同的aria标签更改为"Click to sort column1 in降序"。

但是我们观察到更新后的aria-label没有被JAWS解说员检测到。

我们如何解决JAWS可以读取更新的aria-label的问题，或者有其他替代方案吗?

谢谢

Answer 1

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

Answer 2

谢谢你的回复，但我用了不同的方式，

1. 我已经添加了下面的代码到html的角色="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 3

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