复杂HTML表单的无障碍设计：如何在表单控件间使用标题？

场景背景 #

在创建复杂表单时，我们会用<fieldset>/<legend>对相关表单元素进行分组，但面对层级更深的大型表单时，单纯的嵌套已经无法兼顾结构清晰性与无障碍体验。

先看一个基础的分组示例：

基础分组代码 #

<form>
  <fieldset>
    <legend>Your personal details</legend>

    <label>First name: <input name="first_name"></label>
    <label>Last name:  <input name="last_name"></label>

    <fieldset>
      <legend>Gender</legend>

      <label>Male:   <input type="radio" name="gender" value="male"></label>
      <label>Female: <input type="radio" name="gender" value="female"></label>
      <label>Other:  <input type="radio" name="gender" value="other"></label>
    </fieldset>
  </fieldset>
</form>

大型表单的分组困境 #

假设这只是大型表单的一小部分，比如表单包含「邮寄地址」和「账单地址」两个独立模块，我们尝试了两种分组方式，但都存在明显问题：

方案1：多层嵌套<fieldset>/<legend> #

<form>
  <fieldset>
    <legend>Postal address</legend>

    <fieldset>
      <legend>Your personal details</legend>
      ...

      <fieldset>
        <legend>Gender</legend>
        ...
      </fieldset>
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>Billing address</legend>

    ...
  </fieldset>
</form>

这种写法语法上完全合法，但过度嵌套会造成无障碍体验不一致：JAWS会为组内的每个输入元素重复播报所有层级的<legend>内容，导致信息冗余；而NVDA仅在首次进入分组时播报一次层级信息，后续切换元素时不再提示，用户可能会混淆当前所在的模块。

方案2：用标题作为模块级分组 #

<form>
  <h2>Postal address</h2>

  <fieldset>
    <legend>Your personal details</legend>
    ...

    <fieldset>
      <legend>Gender</legend>
      ...
    </fieldset>
  </fieldset>

  <h2>Billing address</h2>
  ...
</form>

这种方式视觉上结构清晰，但桌面屏幕阅读器在通过Tab/Shift-Tab切换表单元素时，不会主动播报标题内容，用户很容易忽略这些模块级别的分组信息，无法感知自己当前处于表单的哪个部分。

求助问题 #

想向屏幕阅读器领域的专家请教：

• 是否可以通过aria-describedby将标题与后续的<fieldset>关联，让屏幕阅读器在切换元素时能播报模块信息？
• 如果一个标题下对应多个<fieldset>，该如何处理这种关联关系？

目前还没找到能兼顾所有场景的完美方案，恳请给出专业的优化建议。

内容的提问来源于stack exchange，提问作者Joshua Muheim