如何将 aria-expanded 设置为 html 选择答案

【问题标题】：How to set aria-expanded to html select如何将 aria-expanded 设置为 html 选择
【发布时间】：2020-12-02 11:57:50
【问题描述】：

我正在尝试实现 ADA 的 aria-expanded on select。

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

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

【问题讨论】：

标签： angular accessibility wai-aria

【解决方案1】：

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

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

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

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

如果您使用<div>s 和WAI-ARIA 构建自定义<select>，则只需要使用aria-expanded，但如果您能够使<select> 满足您的需求，我建议您不要这样做比使用原生元素更复杂且更不健壮。此时，您需要知道某个项目是打开还是关闭，以使自定义选择起作用，因此切换会很容易。

【讨论】：