可访问性和复杂的 HTML 表单：如何在表单控件之间使用标题？

Question

客户需要创建一个相当复杂的表单。我们使用<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>

想象一下，这只是更大形式的一小部分。例如，我们可以有一个“邮政地址”和一个“帐单地址”。我们是否需要使用<fieldset>/<legend>s 再次“缩进”整个内容？

<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>

还是应该使用标题？

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

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

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

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

虽然嵌套<fieldset>/<legend>s 可能是有效的，但我不会过度这样做。参与，因为 JAWS 将为每个包含的输入元素宣布 <legend>（与 NVDA 相比，在到达第一个包含的输入元素时只会宣布一次）。

另一方面，当使用Tab/Shift-Tab 在表单元素之间跳转时，桌面屏幕阅读器根本不会宣布标题。所以很容易漏掉它的信息。

亲爱的屏幕阅读器专家，您对此有何看法？我们应该使用aria-describedby 将标题附加到后续的<fieldset> 吗？如果该标题下方有多个<fieldset> 怎么办？

我觉得这里没有完美的解决方案。有什么建议吗？

Answer 1

嵌套字段集+图例是完全有效的，但正如您所说，一些屏幕阅读器会为该图例下的每个元素重复它。 它产生了很多完全无用的冗余。

当然没有完美的解决方案，也没有规范的解决方案，但我会选择混合结构。 仅将图例用于最深层，其中元素非常接近，例如男性/女性、是/否等（即单选按钮组），以及所有其余和中间级别的标题。例如：

<h2>Personal information</h2>
<fieldset>
<legend>Gender</legend>
...
</fieldset>
<fieldset>
<legend>Marital status</legend>
...
</legend>
</fieldset>
<h2>Billing address</h2>
...
<h2>Delivery address</h2>
...

标题有很大的加成优势，有快捷键可以直接跳转。当您只想修改整个表单中的一两个特定字段时，它特别有用。你不能用图例做到这一点。

如果您担心屏幕阅读器用户漏掉“个人信息”、“帐单地址”和“送货地址”，您可以通过引用两个 ID 来使用 aria-labelled：

<h2 id="billingAddressHeading">Billing address</h2>
<p><label id="streetLabel" for=street">Street: </label>
<input type="text" aria-labelledby="streetLabel billingAddressHeading"/>
</p>
    

如果您只在组的第一个字段上使用这样的两个 ID，请确保屏幕阅读器不会无用地读取每个字段的组标签。

注意不要忘记在 aria-labelledby 中引用标签本身，因为它完全替换了 <label>。

请注意，从技术上讲，您也可以使用不带图例的字段集。

<h2 id="billingAddressHeading">Billing address</h2>
<p><label id="streetLabel" for=street">Street: </label>
<input type="text" aria-labelledby="streetLabel billingAddressHeading"/>
</p>

最后一点，如果您发现表单过于复杂，也许是时候考虑将其拆分为几个较小的页面了。