如何在fieldset标签内无障碍地正确展示错误信息？

这个问题确实挺常见的，很多人在处理表单组错误时都会纠结语义和屏幕阅读器的兼容性问题。你提到的两种情况都有各自的问题：用单纯的div加alert角色之所以没被读取，是因为屏幕阅读器默认不会主动关联fieldset组和这个独立的提示区域；而用label虽然能被读取，但语义上完全不对——label是用来绑定单个表单控件的，不是给整个组做错误提示的，确实不恰当。

下面是几种符合无障碍标准的正确实现方式：

方案一：通过aria-describedby关联错误信息到fieldset #

这是最推荐的方式，既能让错误信息和整个表单组建立语义关联，又能保留实时播报的能力：

<fieldset aria-describedby="group-error" aria-invalid="true">
  <legend>Some Legend</legend>
  <div id="group-error" role="alert" aria-live="assertive" aria-relevant="all">
    请填写完整这个区域的所有字段
  </div>
  <!-- 表单控件示例 -->
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email">
  </div>
</fieldset>

关键细节： #

• aria-describedby：把fieldset和错误信息的id绑定，这样当用户聚焦到组内任意控件时，屏幕阅读器会自动读取组的描述（也就是错误信息）
• aria-invalid="true"：给fieldset添加这个属性，明确告诉屏幕阅读器整个组存在错误状态
• 保留aria-live区域：当错误信息动态出现时（比如表单提交后校验失败），aria-live="assertive"会强制屏幕阅读器立即播报这条信息，不需要用户主动聚焦到提示区域

方案二：如果错误针对组内多个控件，可给单个控件关联错误 #

如果错误是组内多个控件共同导致的（比如“请至少选择一个选项”），除了关联到fieldset，还可以给每个相关控件都添加aria-describedby指向同一个错误信息id，这样用户聚焦到任意单个控件时都能听到错误提示：

<fieldset aria-describedby="checkbox-error" aria-invalid="true">
  <legend>选择你的兴趣爱好</legend>
  <div id="checkbox-error" role="alert" aria-live="assertive">
    请至少选择一个兴趣爱好
  </div>
  <div>
    <input type="checkbox" id="hobby1" name="hobby" aria-describedby="checkbox-error">
    <label for="hobby1">阅读</label>
  </div>
  <div>
    <input type="checkbox" id="hobby2" name="hobby" aria-describedby="checkbox-error">
    <label for="hobby2">运动</label>
  </div>
</fieldset>

为什么你的初始写法无效？ #

你最初的div加alert角色的写法，只是一个独立的实时播报区域，但没有和fieldset建立语义关联。屏幕阅读器不会自动把这个区域和上方的fieldset组关联起来，所以只有当错误动态出现时可能会播报一次，但用户聚焦到组内控件时，不会再次读取这条错误信息，导致用户可能不知道错误对应的是哪个区域。

而用label的话，语义上会被识别为某个控件的标签，破坏了fieldset组的语义结构，反而会让屏幕阅读器用户混淆信息的归属。

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