如何将 aria-expanded 设置为 html select

Question

我正在尝试在 select 上实施 ADA 的 aria-expanded。

    <select department="dep">
     <option *ngFor="let dep of departments" [value]="dep.name">{{dep.name}}</option>
    </select>

基本上，当用户打开下拉菜单时，我希望 aria-expanded = true 否则为 false。有办法吗？

Answer 1

这不是 aria-expanded 的正确用法，因此您不需要这样做。

aria-expanded 旨在指示可折叠部分何时在打开/关闭它的控件上打开或关闭，例如在 treeview.

上

A <select> 不需要这个，因为关联已经由元素创建。

Trying to determine if a <select> is open is actually quite difficult 并导致大量黑客攻击。

如果您使用 <div> 和 WAI-ARIA 构建自定义 <select>，则只需要使用 aria-expanded，但如果您能够制作，我建议您不要这样做<select> 可以满足您的需求，因为它比使用原生元素更复杂且更不可靠。到那时，您需要知道某个项目是打开还是关闭才能使自定义 select 正常工作，因此切换很容易。

如何将 aria-expanded 设置为 html select

How to set aria-expanded to html select

accessibility

wai-aria

angular