为fieldset添加屏幕阅读器隐形标注的合适HTML元素/属性是什么？

嘿，这个需求抓得特别准——既要避免视觉上的冗余（不用把题干塞进legend重复显示），又要保证屏幕阅读器用户能明确题干和选项组的关联，对吧？这其实是无障碍设计里很常见的场景，最标准的解决办法就是用**aria-labelledby属性**。

具体操作分两步：

• 第一步：给页面上单独显示的题干元素添加一个唯一的id，比如：

  <h2 id="question-001">以下哪种动物是哺乳动物？</h2>
  

• 第二步：在你的fieldset标签上，用aria-labelledby属性指向这个id，把题干和选项组绑定起来：

  <fieldset aria-labelledby="question-001">
    <div>
      <input type="radio" id="opt-fish" name="animal-type" value="fish">
      <label for="opt-fish">金鱼</label>
    </div>
    <div>
      <input type="radio" id="opt-bat" name="animal-type" value="bat">
      <label for="opt-bat">蝙蝠</label>
    </div>
    <div>
      <input type="radio" id="opt-frog" name="animal-type" value="frog">
      <label for="opt-frog">青蛙</label>
    </div>
  </fieldset>
  

为什么这招管用？ #

当屏幕阅读器用户聚焦到fieldset内的单选按钮时，会先读取aria-labelledby关联的题干文本，然后再读选项内容，这样就建立了清晰的上下文关系——用户能立刻知道自己正在回答哪道题。而对于视力正常的用户来说，题干只显示一次，完全没有冗余问题。

额外提个小细节：如果你的题干之外还有补充说明（比如“请选择唯一正确答案”），还可以结合aria-describedby属性，把补充说明的id也加进去，用空格分隔多个id就行，比如aria-labelledby="question-001" aria-describedby="question-note"，这样屏幕阅读器会把题干和补充说明都读出来，信息更完整。

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