如何在不使用fieldset的情况下实现表单输入的无障碍分组？

你提到的role="group"确实是解决这个问题的合适方案，但需要补充一个关键属性才能让它完全等效于<fieldset>+<legend>的无障碍体验——那就是aria-labelledby，用来把组标签和分组元素关联起来。

为什么<fieldset>不适合你的场景？ #

你说得没错，<fieldset>和<legend>虽然是原生的无障碍分组工具，但它们的样式控制确实有很多限制：

• 多数浏览器中，<legend>的定位逻辑比较特殊，很难用Flexbox实现和普通元素一样的同行对齐
• 默认样式（比如边框）需要额外覆盖，增加了样式复杂度

role="group"的正确用法 #

要让role="group"达到和<fieldset>相同的无障碍效果，你需要：

1. 给组标签（也就是你的.control-label）添加一个唯一id
2. 在带有role="group"的容器上，通过aria-labelledby属性关联这个id

这样屏幕阅读器就能识别出这个标签是整个分组的标题，和<legend>的作用完全一致。同时，你可以自由使用Flexbox或其他布局方案来控制样式，没有原生元素的限制。

示例代码 #

<div role="group" class="control" aria-labelledby="type-label">
  <div class="control-label" id="type-label">Type</div>
  <div class="control-inputs">
    <input type="radio" name="type" value="a" id="type-a" />
    <label for="type-a">A</label>
    <input type="radio" name="type" value="b" id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

关键注意事项 #

• 不要忽略name属性：对于单选按钮组，name属性依然是必须的——它不仅控制原生的单选互斥逻辑，也是无障碍工具识别组内控件关联的重要依据
• role="group" vs <fieldset>：两者在无障碍体验上几乎等效，但<fieldset>是专门为表单设计的原生语义元素，而role="group"是通用的分组角色。如果你的分组完全是表单控件，两种方案都可行，但role="group"给了你更多样式自由
• 测试无障碍效果：建议用NVDA、VoiceOver等屏幕阅读器测试，确保标签和分组的关联能被正确播报

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