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只是设置所选项目的ID，将使用适当的类将其突出显示。

有什么解决方案可以让屏幕阅读器读取所选项目的名称（displayName）？

Answer 1

做到这一点的一种方法（我并不主张这是最好的方法），但似乎可行，它是为您的输入字段（可能已经有）以及何时上/下键设置onkeydown处理程序按下箭头键（听起来您已经在听），您可以更新aria-live设置为“礼貌”的视觉上隐藏的<span>（或<div>）并进行更新<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”类-What is sr-only in Bootstrap 3?

没有重点的ARIA

1 个答案: