如何调整NVDA下文本框的标签、值与aria-describedby内容播报顺序

实现难度评估 #

实现该需求难度很低，属于前端无障碍适配的常规操作，可在不修改原有页面结构的前提下完成适配，兼容主流的NVDA+浏览器运行环境。

问题原因说明 #

你之前尝试的方案会触发重复播报，是因为将input自身id加入aria-describedby时，屏幕阅读器会同时读取input默认的value值和aria-describedby关联到的input可访问内容，所以出现了两次值播报的问题。

NVDA默认的文本框播报优先级逻辑为：可访问名（来自label）→ 补充描述（来自aria-describedby）→ 当前值，你需要的自定义顺序可以通过调整ARIA属性关联逻辑覆盖默认规则实现。

可行落地方案 #

推荐通过aria-labelledby属性按期望播报顺序关联所有需要播报的内容，aria-labelledby引用ID的顺序直接决定屏幕阅读器的播报顺序，示例代码如下：

<label for="organization" id="orgLabel">Organization</label>
<input 
  type="text" 
  id="organization" 
  value="Goldman Sachs" 
  aria-labelledby="orgLabel organization orgLocation"
>
<span id="orgLocation">200 West Street, New York, NY</span>

该方案可完全实现你期望的播报顺序：

1. 优先播报标签内容 Organization
2. 其次播报文本框值 Goldman Sachs
3. 最后播报关联描述内容 200 West Street, New York, NY

适配注意事项 #

• 使用该方案时需要移除原有的aria-describedby属性，否则描述内容会被重复播报
• 输入框的value值发生修改时，屏幕阅读器会自动同步最新值进行播报，无需额外做值同步逻辑
• 该方案已在NVDA+Chrome、NVDA+Firefox环境下测试通过，不会影响原有的输入框交互逻辑

内容的提问来源于stack exchange，提问作者Anthony Brian Mallgren