JAWS阅读器重复读取表单标签问题排查求助

你的问题核心是JAWS会重复读取问题标签，主要原因及对应修正方案如下：

• 避免单选按钮与组标签重复关联
  确保每个单选按钮的<label>仅绑定自身的选项文本，不要让单选按钮的标签或aria属性再次引用question1的id。如果你的单选按钮代码里不小心重复关联了问题标签，就会导致JAWS既读组的标签，又读每个单选按钮的重复标签。
  正确的单选按钮结构示例：

  <input type="radio" id="color-red" name="favorite-color" value="red">
  <label for="color-red">红色</label>
  

• 移除冗余的提示文本
  原生的radiogroup角色已经隐含了“选择一个选项”的语义，你添加的<span class="sr-only">select one color</span>会被JAWS和组标签一起读取，加重重复感。建议移除这段冗余文本，若必须保留，不要将其包含在aria-labelledby关联的元素内。

• 确保原生HTML属性完整
  同一个单选组内的所有<input type="radio">必须拥有相同的name属性，这是保证单选组功能和无障碍识别的基础，aria-labelledby只是增强标签说明的补充，不能替代原生规则。

修正后的完整代码示例：

<div class="form-group">
  <p id="question1">你最喜欢的颜色是什么？</p>
  <div class="radio-group" role="radiogroup" aria-labelledby="question1">
    <input type="radio" id="color-red" name="favorite-color" value="red">
    <label for="color-red">红色</label>

    <input type="radio" id="color-blue" name="favorite-color" value="blue">
    <label for="color-blue">蓝色</label>

    <input type="radio" id="color-green" name="favorite-color" value="green">
    <label for="color-green">绿色</label>
  </div>
</div>

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