NVDA屏幕阅读器：select标签选项超9个时不显示展开状态的解决方案咨询

先排查基础问题 #

• 确认select的原生语义没被破坏：别乱加role属性（比如role="listbox"）覆盖原生控件的无障碍语义，原生select本身自带完整的屏幕阅读器支持。
• 检查自定义代码的影响：如果用CSS隐藏了原生下拉箭头，或者用JS阻止了select的默认展开事件，这些操作都可能让NVDA抓不到展开状态的变化，先把这类代码暂时注释掉测试。

替代解决办法 #

1. 改用符合无障碍标准的自定义下拉组件 #

如果必须保留大量选项，自己造一个靠谱的自定义下拉：

• 用button当触发按钮，加上aria-haspopup="listbox"和aria-expanded属性，展开/收起时实时更新aria-expanded的true/false值。
• 下拉列表用ul，给它加role="listbox"，每个选项设role="option"，选中项要加aria-selected="true"。
• 必须实现完整的键盘交互：上下箭头导航选项、Enter/空格选中、Esc收起列表，和原生select的操作逻辑保持一致。

2. 用<optgroup>拆分选项 #

如果业务允许，把超过9个的选项分组：

• 用<optgroup label="分组名称">把相关选项包起来，NVDA会读取分组标签，用户能更快定位选项。
• 这种方式保留原生select的所有特性，还能优化大量选项的导航体验，说不定能间接解决展开状态识别的问题。

3. 加个实时状态提示 #

在select旁边加个仅屏幕阅读器可见的提示文本，用JS同步展开状态：

• 搞个<span>，设置aria-live="polite"和视觉隐藏样式（比如position: absolute; left: -9999px;）。
• 当select展开时，把文本改成“下拉列表已展开，共X个选项”；收起时改成“下拉列表已收起”，NVDA会自动读取这个实时更新的内容。

测试注意事项 #

• 用NVDA搭配Firefox或Chrome测试，确保每个操作的状态播报正常。
• 检查是否符合WCAG 2.1的无障碍要求，尤其是键盘可访问性和语义正确性。

内容的提问来源于stack exchange，提问作者Vinay