表单无障碍实现：用section替代fieldset嵌套是否合规？

你的这种实现方式完全符合无障碍标准（如WCAG）和语义化HTML规范，是避开嵌套fieldset问题、实现表单组内组结构的合理方案，具体分析如下：

为什么这个方案可行？ #

• 语义化角度：<section>是HTML原生的主题区块元素，用来划分表单内的一组相关字段（比如家长信息、孩子信息），完全符合语义化的设计初衷，不会破坏页面的语义层级。
• 无障碍角度：通过aria-labelledby将<section>与对应的<h2>标题关联，屏幕阅读器会正确识别这是一个带有明确标题的表单分组，在播报内部控件时会带上分组上下文；而内部的<fieldset>+<legend>负责单选按钮组的局部分组，两个层级的分组边界清晰，不会像嵌套fieldset那样导致辅助技术解析混乱。

现有代码的几个优化建议 #

• 修正非法id：HTML的id不能包含/这类特殊字符，示例里的he/him、child_he/him都不符合规范，建议改成he-him、child-he-him这类合法标识符，避免出现兼容性问题。
• 修复标签关联错误：示例中child_theythem的label对应child_they/them的input，id不匹配，需要统一成相同的合法id（比如child-they-them）。
• 可选增强：明确表单分组语义：如果需要更明确地告诉辅助技术这是表单分组，可以给<section>添加role="group"，不过这不是必须的——原生<section>结合aria-labelledby已经能被辅助技术正确识别。

修正后的示例代码 #

<form>
  <h2 id="label_parent">Your Details (parent or guardian)</h2>
  <section aria-labelledby="label_parent">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name"><br>
    <fieldset>
      <legend>Pronoun</legend>
      <label for="he-him">he/him</label>
      <input type="radio" id="he-him" name="parent_pronoun">
      <label for="she-her">she/her</label>
      <input type="radio" id="she-her" name="parent_pronoun">
      <label for="they-them">they/them</label>
      <input type="radio" id="they-them" name="parent_pronoun">
    </fieldset>
  </section>

  <h2 id="label_child">Your Child's Details</h2>
  <section aria-labelledby="label_child">
    <label for="child_name">Full Name</label>
    <input type="text" id="child_name" name="child_name"><br>

    <fieldset>
      <legend>Pronoun</legend>
      <label for="child-he-him">he/him</label>
      <input type="radio" id="child-he-him" name="child_pronoun">
      <label for="child-she-her">she/her</label>
      <input type="radio" id="child-she-her" name="child_pronoun">
      <label for="child-they-them">they/them</label>
      <input type="radio" id="child-they-them" name="child_pronoun">
    </fieldset>
  </section>
  <button>Submit</button>
</form>

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