多个表单字段使用同一aria-describedby描述是否为合规用法？

结论 #

你当前的写法完全符合WAI-ARIA无障碍开发规范，规范本身没有禁止多个元素通过aria-describedby关联同一个描述节点的用法，不管是「一个元素关联多个描述节点」还是「多个元素关联同一个描述节点」，都是允许的合法用法。

现有写法的体验问题 #

虽然写法合法，但从实际无障碍体验来看，你的用法并不合理，核心问题在于：

• 你绑定的feedback节点内容是两个表单字段联动后的动态结果，不属于任何单个表单字段的固有描述
• 当用户聚焦到车辆选择下拉框时，还未填写价格，feedback要么是未填充占位符的无效内容，要么还没有实际反馈，此时屏幕阅读器朗读这段内容只会干扰用户操作
• 当用户聚焦到价格输入框时，同样存在内容不完整、信息无效的问题

更合理的实现方案 #

推荐你做如下调整：

1. 移除两个表单字段上的aria-describedby="feedback"属性，这段反馈不属于单个字段的描述，不需要和单个字段绑定
2. 给feedback节点添加aria-live="polite"属性，当用户填完两个字段、你动态更新feedback的内容后，屏幕阅读器会自动、不打断用户操作地播报最新的反馈内容，完全可以满足信息触达的需求
3. 如果这段反馈属于错误类的强提醒，可以替换为aria-live="assertive"，也可以额外添加role="alert"属性
4. 如果你需要给单个字段补充专属的提示说明，可以分别给两个字段创建独立的描述节点，各自绑定自己的aria-describedby即可

优化后的代码示例：

<label for="cars">Choose a car:</label>
<select name="carType" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<label for="carPrice">Enter a purchase price:</label>
<input id="carPrice" type="number">

<div id="feedback" aria-live="polite">The {car} you are considering for {carPrice} is {good/bad} value.</div>

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