HTML复杂嵌套表单如何正确实现ARIA无障碍访问结构？

针对词典类无限层级嵌套表单的场景，核心实现逻辑优先用原生HTML语义，尽量少依赖ARIA，具体规则如下：

<label>的适用边界 #

首先明确：<label>只能用来标注单个可交互表单控件，绝对不能作为分组、容器的标注使用。

• 正确用法：要么通过for属性绑定对应输入控件的id，要么直接把单个输入控件包裹在label内部，屏幕阅读器聚焦到控件时会自动播报关联的label文本。你代码里最上方单词输入框的label写法是完全正确的。
• 错误用法：你当前代码里给Meanings、Meaning 1这类分组标题加的无绑定目标的<label>全部是无效的——label没有绑定任何控件时，屏幕阅读器不会把它和后面的一组字段做关联，用户导航到内部输入框时，完全听不到上层分组的上下文，根本不知道自己当前填的是哪个义项、哪个词义下的内容。

嵌套分组的原生实现（优先推荐，零ARIA依赖） #

WAI-ARIA的第一设计原则是“能用原生HTML实现的语义，绝对不要用ARIA模拟”，多层表单分组的最优实现是用原生的<fieldset>+<legend>组合，天生支持无限层级嵌套，所有主流屏幕阅读器都能完美识别层级关系：

• 每一层同类型字段的集合，不管是最外层的义项组、单个义项、单个词义下的概念子分组，都用<fieldset>作为容器
• 每个fieldset内部的第一个元素放<legend>，写这一层分组的标题，比如“Meanings”“Meaning 1”“Sense 1.2 关联概念”
• 嵌套多少层就对应套多少层fieldset+legend即可，屏幕阅读器聚焦到最内层的输入框时，会从外到内依次播报所有层级的legend文本，再播报当前输入框的label，用户不会丢失任何上下文。比如聚焦到meaning1_sense2输入框时，阅读器会播报“Meanings 分组，Meaning 1 分组，Sense 1.2，文本输入框”，完全匹配层级需求。

改好的基础结构示例：

<form>
  <h2>Word Dictionary Entry</h2>
  <div class='field'>
    <label for="nameInput">Word</label>
    <input id="nameInput" name="word" />
  </div>
  <!-- 一级分组：所有义项 -->
  <fieldset class='field-group-container'>
    <legend>Meanings</legend>
    <!-- 二级分组：单个义项 -->
    <fieldset class='field-group'>
      <legend>Meaning 1</legend>
      <div class='field'>
        <label for="meaning1_sense1">Sense 1.1</label>
        <!-- 建议name按层级命名，后端处理和阅读器识别都更友好 -->
        <input id="meaning1_sense1" name="meanings[0][senses][0]" />
      </div>
      <div class='field'>
        <label for="meaning1_sense2">Sense 1.2</label>
        <input id="meaning1_sense2" name="meanings[0][senses][1]" />
      </div>
      <!-- 所有动态添加按钮必须加type="button"，避免误触发表单提交 -->
      <button type="button">Add sense</button>
    </fieldset>

    <fieldset class='field-group'>
      <legend>Meaning 2</legend>
      <!-- 内部字段结构同上 -->
      <button type="button">Add sense</button>
    </fieldset>

    <button type="button">Add meaning</button>
  </fieldset>
</form>

后续要加更深的概念层，直接在sense的fieldset内部继续套fieldset+legend即可，不需要调整其他逻辑。

需要使用ARIA的特殊场景 #

只有当你因为样式定制需求（fieldset/legend的默认浏览器样式在部分场景下确实比较难重写），实在无法使用原生fieldset时，才需要用ARIA补全语义，不要无意义堆砌ARIA属性：

• 给分组容器加role="group"（如果是跨页面级的大分组可以用role="region"）
• 给分组容器加aria-labelledby属性，值对应当前分组标题元素的id，模拟legend和fieldset的关联关系

替代写法示例：

<!-- 无法使用fieldset时的替代方案 -->
<div class='field-group-container' role="group" aria-labelledby="meaningsTitle">
  <h3 id="meaningsTitle">Meanings</h3>
  <div class='field-group' role="group" aria-labelledby="meaning1Title">
    <h4 id="meaning1Title">Meaning 1</h4>
    <!-- 内部字段 -->
  </div>
</div>

注意：不要给原生form加role="form"，原生form本身已经自带这个语义，加了属于冗余反而可能导致阅读器识别异常；动态新增/删除分组时不需要额外加大量ARIA提示，只要焦点管理逻辑正确即可。

额外适配要点 #

• 所有可交互元素的Tab导航顺序要和视觉层级顺序一致，不要随意加正数值的tabindex破坏默认导航流
• 用户点击“Add sense/Add meaning”按钮新增分组后，建议自动把焦点移动到新增分组的第一个输入框，减少屏幕阅读器用户的导航成本
• 不要仅靠缩进、颜色区分层级，视觉上的分组边界要足够清晰，文本和背景的对比度要满足WCAG 2.1的AA级标准
• 删除分组的按钮要加明确的可访问名称，比如不要只写一个“×”，可以加aria-label="删除Meaning 1"，避免用户不知道按钮的作用

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