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

Question

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

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

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>

用户界面看起来像这样

每次我用箭头键浏览结果时，屏幕阅读器都会读取“suh”。

我尝试过的事情：

1. 将 aria-label 属性添加到列表项 -没用，我猜该元素应该是标签焦点，以便读取 aria label。
2. 将 tabindex = -1 添加到列表项以使其可聚焦但不可导航。 也没有用。

Answer 1

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