W3C两款Dropdown组件NVDA+Firefox读屏异常问题排查

经过对比两款W3C Combobox示例的交互逻辑和辅助技术适配细节，在NVDA+Firefox环境下select-only组件选中项不朗读的核心原因如下：

1. 选中项后的ARIA状态与焦点管理缺失 #

两款组件的role属性结构看似一致，但select-only组件在选中下拉项后，未实现符合Firefox+NVDA组合的状态通知机制：

• autocomplete-list组件选中选项时，会将选中项的aria-selected设为true，同时通过焦点移动或隐式状态广播让NVDA捕获到选中变化；
• select-only组件虽设置了aria-selected，但选中后直接关闭下拉面板，既未将焦点返回至combobox输入框并同步关联选中项文本，也没有通过aria-live区域主动通知选中内容。

Firefox+NVDA对combobox的状态感知高度依赖显式的事件触发或焦点同步，仅修改DOM标签（div改为ul/li）无法弥补通知逻辑的缺失。

2. 事件处理的辅助技术兼容性不足 #

select-only组件的选中逻辑未触发符合ARIA规范的原生change或select事件，而autocomplete-list组件会同步触发这些事件，NVDA依赖这类事件捕获内容变更。

修复建议 #

• 选中下拉项后，将焦点返回至combobox输入框，确保输入框的aria-activedescendant或aria-labelledby关联到选中项文本，让NVDA朗读输入框当前值；
• 添加隐藏的aria-live="polite"区域，选中项时更新该区域文本，主动通知读屏工具选中内容；
• 确保选中操作触发原生change事件，帮助辅助技术感知状态变更。

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