使用箭头键导航时屏幕 reader 未读取列表值

Question

我有一个输入字段，搜索内容时会出现预先输入的弹出窗口。屏幕 reader 无法读取弹出窗口中的建议值。

我正在使用 $ActiveIndex 变量保持焦点。我只能使用 箭头键 来浏览列表，屏幕 reader 只是在浏览弹出列表时读取输入文本，而不是建议中的实际值

HTML代码是这样的：

<input type="text" 
       class="search" 
       title="Search User" 
       ng-model="vm.SearchText" 
       ng-model-options="{ debounce: 300 }" 
       aria-label="{{ placeholder }}"
       ng-required="requiredattr" />
<ul class="ui list menu typeahead popup-layer vertical" ng-show="vm.MenuShown" ng-mousedown="vm.RetainFocus()">
    <li class="item"
        ng-class="{ active: $index == vm.ActiveIndex }"
        ng-click="vm.Add(match)"
        ng-repeat="match in vm.Matches track by $index">
        <div class="header">
            <i class="ban icon" ng-if="match.Deleted"></i>
            <span ng-bind-html="match.DisplayName"></span> <!-- I want this DisplayName to be read -->
        </div>
    </li>
</ul>

UI 看起来像这样

每次我使用箭头键浏览结果时，屏幕 reader 只是显示“suh”。

我尝试过的事情：

将 aria-label 属性添加到列表项 - 没用，我想该元素应该是制表符可聚焦的，以便读出 aria 标签。
将 tabindex = -1 添加到列表项以使其可聚焦但不可导航。也没用。

Answer 1

您可以使用 aria-active-descendant 属性并将其设置为列表选项 ID，还可以使用输入框中的 aria-owns 属性来引用列表项。

使用箭头键导航时屏幕 reader 未读取列表值

Screen reader not reading list values while navigating with arrow keys

accessibility

screen-readers

angularjs

nvda