1. fieldset 的作用与基本原理
字段分组的概念与好处
在复杂表单中，fieldset 提供一个逻辑上的分组容器，用来把相关控件统一在一起，形成清晰的结构。这样的分组有助于用户快速理解表单的组织方式，提升可用性与可访问性。通过将相关输入项放在一个 fieldset 内，屏幕阅读器也会将其视为一个整体区域，便于跳转与导航。
与之搭配的 legend 元素提供对该分组的简短描述，作为分组的可读标签。legend 的存在使辅助技术可以直接朗读或定位到该组，避免对单个控件的重复叙述。
<form><fieldset><legend>个人信息</legend><label for="name">姓名</label><input id="name" name="name" type="text"><label for="email">邮箱</label><input id="email" name="email" type="email"></fieldset>
</form>
在无障碍设计中，fieldset 与 legend 的组合是实现表单分组的核心要点之一。通过使用这些元素，开发者能够以语义化的方式组织控件，同时保持良好的视觉分隔和逻辑关系。
视觉与语义的分离：字段集的容器化作用
使用 fieldset 还可以在视觉上为一组控件创建统一的边框和边距，这种视觉分离与语义分组相互印证，有助于用户快速定位目标区域。同时，浏览器会为 fieldset 提供一个区域性的读取顺序，确保屏幕阅读器用户获得一致的导航体验。
当表单需要调整布局时，保持 fieldset 的语义完整性比仅凭 CSS 样式实现更稳妥，语义优先级高的结构能让搜索引擎和辅助技术更准确地理解页面内容。
代码示例：简单表单分组
<form><fieldset><legend>账户信息</legend><label for="user">用户名</label><input id="user" name="user" type="text"><label for="pwd">密码</label><input id="pwd" name="pwd" type="password"></fieldset>
</form>
通过上述代码，可以清晰地将用户名与密码等控件作为一个独立区域呈现，便于理解与导航，也便于后续的样式调整与无障碍增强。
2. 使用 legend 提升可访问性
为字段集提供可读标签
legend 元素通常作为 fieldset 的直接子元素出现，负责为该分组提供可读标签。它的文本应该简洁明了，避免冗长描述，因为屏幕阅读器会把它当作区域标签进行朗读。
正确的做法是确保 legend 与该组的控件具有一致的语义，且不要将 legend 用作视觉上的唯一装饰。可通过给 legend 设置一个明确的文本来帮助用户快速定位相关输入。
<fieldset><legend>联系方式</legend><label for="phone">电话</label><input id="phone" name="phone" type="tel"><label for="email2">邮箱</label><input id="email2" name="email2" type="email">
</fieldset>
此外，若需要通过脚本或辅助技术额外标识分组，可以使用 aria-labelledby 指定对 Legend 的引用，保持无障碍信息的一致性。
<fieldset aria-labelledby="contact-label"><legend id="contact-label">联系方式</legend><input type="text" name="name" /><input type="email" name="email" />
</fieldset>
3. 可访问性实现要点与无障碍增强
键盘导航与屏幕阅读器的支持
浏览器原生的 fieldset 与 legend 组合会形成语义区域，帮助屏幕阅读器把控件分组传达给用户。确保分组内的控件按逻辑顺序出现，以实现自然的 键盘导航 流程。
在实现中，给 fieldset 使用 aria-labelledby 或通过 Legend 自身的文本进行标签，可以增强对复杂表单的可访问性。对于需要禁用的分组，可以使用 disabled 属性，屏幕阅读器同样会识别并忽略其中的控件。
<fieldset aria-labelledby="contact-label"><legend id="contact-label">联系信息</legend><input type="text" name="name" /><input type="email" name="email" />
</fieldset>
4. 使用场景与最佳实践
常见应用场景
在注册、结账或个人信息收集等场景中，fieldset 适用于将相关控件分组，如“账户信息”、“联系地址”、“支付方式”等。通过这种分组方式，用户可以更快地聚焦到目标区域，并理解不同区域之间的逻辑关系。
一个常见的做法是将同一组的单选按钮放置在一个 fieldset 内，并用 legend 提供分组标签，以便于屏幕阅读器和视觉浏览者都能清晰识别。
<form><fieldset><legend>账户信息</legend><label for="user">用户名</label><input id="user" name="user" type="text"><label for="pwd">密码</label><input id="pwd" name="pwd" type="password"></fieldset><fieldset disabled><legend>预设选项</legend><!-- 其他控件 --></fieldset>
</form>
此外，字段集也支持通过 CSS 进行视觉样式化，同时保持语义结构完整。这是实现美观界面的同时不牺牲 可访问性 的一种常见做法。
