利用HTML语义标签构建无障碍复杂表单系统

在HTML表单世界中，能够同时满足语义分组、可访问性命名与原生批量禁用三项需求的，只有fieldset搭配legend这一组合。div加aria-labelledby等方案最多只能模拟其中一两个特性，而在键盘导航、屏幕阅读器播报、表单提交排除等关键环节极易出现问题。这对于需要高可访问性的复杂表单系统来说至关重要——选错方案会直接影响用户体验和合规性。

fieldset 与 legend 是HTML原生机制中唯一能同时实现语义分组、可访问性命名和原生批量禁用的解决方案；其他替代方案（如使用 div + aria-labelledby）通常只能模拟其中一或两项功能，在键盘导航、屏幕阅读器交互、表单提交排除等关键场景下会出现兼容性问题。

为何不应使用div包裹表单分组

常见误区是将“收货地址”“账单地址”等控件组全部放入

，并添加

作为标题。问题在于：屏幕阅读器无法将该

与整组控件的可访问名称关联；Tab 键无法自动跳过整组（即使设置 tabindex="-1"）；无法通过 fieldset[disabled] 真实禁用所有子控件并排除提交；搜索引擎和辅助工具可能报错 “missing landmark” 或 “ambiguous grouping”。

legend必须作为fieldset的首个子元素且不可被包裹

这条语义规则最容易被破坏。错误写法：

地址

→ legend 被忽略，NVDA/VoiceOver 完全不播报组名。错误写法：

地址

→ Safari 旧版本可能跳过 legend。正确写法：

收货地址

。legend 内容应为纯文本，不能包含 、 或空格占位符（如 ）。

fieldset[disabled]仅对直接子控件生效

该限制直接关系到禁用逻辑的可靠性。有效示例：

→ 两个控件均被禁用、不提交、focus() 失败。无效示例：

→ input 不受影响，仍可聚焦、提交。IE11 对 在 fieldset[disabled] 下兼容性较差，建议额外添加 style="pointer-events: none;" 保底。禁用后，整组在 FormData 中自动被排除，无需手动过滤。

多个fieldset应保持同级排列，避免嵌套

注册页面、多步骤表单、保险报价等场景，天然适合按照用户心智模型拆分为多个平行的 fieldset。正确示例：

身份信息

联系方式

。错误示例：

主信息

紧急联系人

→ 嵌套会破坏语义层级，部分辅助技术无法识别内层 legend。删除默认边框和内边距后，必须手动补充视觉线索（如背景色、分割线、间距），否则用户难以区分每组。每个 fieldset 都应配有明确、简短、动词导向的 legend（例如 “设置密码”，而非 “密码相关”）。