javascript - 下拉组件的可访问性

Question

我正在实现下拉组件的可访问性，我的下拉列表的特殊功能是它仅在打开下拉列表时填充选项菜单中的值，这意味着它会动态编译模板并附加到下拉框。

Dropdown HTML: 

<div id="dropdown" ng-click="openDropdown()">
   <div id="selectedValue"  role="listbox"  tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div>
</div>

DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) :

<div id="dropDownMenu">
  <li ng-click="selectItem()" role="option">item1</li>
  <li ng-click="selectItem()" role="option">item2</li>
</div>

我面临两个问题

1. 由于我的#dropdownMenu是通过点击#dropdown(动态模板生成)生成的，当焦点到达#selectedValue时，下巴无法访问#dropdownMenu，因此它不会宣布选项的数量等，以防万一典型的选择框。

2. 我为 #selectedValue 提供 aria-label="{{selectedVal}}"，因此单击箭头键时，即使 #dropdownMenu 未打开，javascript 也会更新 selectedVal ，但 selectedVal 的更改值不会打开由颌骨 16.0 宣布，它仅在用户第一次使用 Tab 键进入它时才宣布。请注意，这在颌骨 14.0 中工作正常。

期待一些解决方案......

Answer 1

1. 添加 aria-live=polite 应该可以解决此问题。
2. 您不使用标准选择框并使用动态内容填充选项元素是否有原因？这将消除使用当前选项更新 aria 属性的需要，因为屏幕阅读器会自己找到它。此外 aria-label 应该是选择框的名称(或其用途)而不是其选定的选项。如果您使用带有选项的 HTML 选择，则也可以删除 tabindex 和 aria-live，因为默认情况下 native 表单输入具有完整的键盘和屏幕阅读器支持。