Web 无障碍性：如何正确为单选按钮和复选框组提供标签？

在创建表单时，您是否对单选框或复选框组的label处理方式感到困惑？特别是在标签化整个组时，以及如何处理for属性时，往往会产生疑惑。

本次我们将整理这些分组的标记方法，同时介绍具体的实现方式。

常见的方法和问题

将关注投向第一个项目的for

对于单选按钮或复选框的组合，将的for属性指向第一个项目的方法。

例如以下所示的代码。

<div class="form-group">
  <label for="fruit-apple">好きな果物</label>
  <div>
    <label><input type="radio" id="fruit-apple" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

外观看起来没有问题，但屏幕阅读器会将"喜欢的水果"标签只关联到第一个单选按钮，因此整个选项组无法被正确识别。

不指定for

<div class="form-group">
  <label>好きな果物</label>
  <div>
    <label><input type="radio" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

这种方法不能清楚地表明标签与哪个元素相关。特别是对于使用屏幕阅读器的用户来说，哪个选项与标签相关联变得不清楚。

这样的良好改善建议

使用 role 属性分组并通过 aria-labelledby 进行标签化

使用 role="radiogroup" 或 role="group" 对单选按钮或复选框进行分组，并通过 aria-labelledby 将其与指定了相应 ID 的标签元素关联。这样可以向屏幕阅读器明确表示"喜欢的水果"这一标签适用于整个分组。

单选按钮

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="radiogroup" aria-labelledby="fruit-group">
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

复选框

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="group" aria-labelledby="fruit-group">
      <label><input type="checkbox" name="fruit" value="apple">りんご</label>
      <label><input type="checkbox" name="fruit" value="orange">みかん</label>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

使用 和 的方法

另一种方法是使用 和 。这种方法基于 HTML 语义学，即使不添加特殊属性或 role，整个组也能被正确识别。

在下面的例子中，单选按钮组用包装，并使用作为标签。

※ 注意！：设计上可能希望将标签和输入框并排排列。在这种情况下，虽然需要将 fieldset 设置为 display: contents;，但某些浏览器会将 legend 从无障碍树中删除，因此不推荐使用。用 CSS 强行统一布局而损害无障碍性并不是理想做法。

<div class="form-group">
  <fieldset>
    <legend>好きな果物</legend>
    <div>
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </fieldset>
</div>

总结

单选按钮和复选框组的标签方式可以按如下方式整理。

使用 role 属性和 aria-labelledby 的方法

• 如需自定义，可灵活调整
• 将组标签与 role="group" 结合进行显式设置

使用 和 的方法

• 基于语义的标准方法
• 可实现更加强大且无障碍的实现
• 某些布局在无障碍方面存在问题

根据设计和需求，无论选择哪种方法，都可以实现适当的无障碍性。

虽然和在语义上更合适，但在联系表单等项目中，从整体布局结构来看，使用 role 属性和 aria-labelledby 可能会更便利。

网络无障碍还有很多深度内容！