Topics

创建表单时，您可以使用label你是否曾经对如何处理群组感到困惑？特别是如何给整个群组贴标签，以及for有时我会为如何处理属性而苦恼。

这次我们就来整理一下这些群体的标注，并介绍一下具体的方法。

常见观看方法及问题

至第一项for观点

对于单选按钮或复选框组，<label>的for这是将属性指向第一项的一种方法。

例如下面的代码：

 最喜欢的水果



  苹果

  橘子

  香蕉

从视觉上看，它看起来不错，但屏幕阅读器无法正确显示“最喜欢的水果”标签。它仅与第一个单选按钮相关联。因此，整个组无法被正确识别。

for不指定

最喜欢的水果



苹果

橘子

香蕉

这种方法使得标签与哪个元素相关变得不清楚，特别是对于使用屏幕阅读器的用户而言。目前尚不清楚哪些选项与标签相关。就变成这样了。

这些都是很好的改进想法

使用 aria-labelledby 按角色属性和标签分组

单选按钮和复选框role="radiogroup"或者role="group"并将元素与 aria-labelledby 指定的 ID 的标签关联起来。这样可以让屏幕阅读器清楚地看到“Favorite Fruit”这个标签适用于整个组。

单选按钮

最喜欢的水果





 苹果

 橘子

 香蕉

复选框

好きな果物





 苹果

 橙子

 香蕉

<fieldset>和<legend>如何使用

另一种方法是<fieldset>和<legend>这种方法依赖于 HTML 语义，并确保整个组被正确识别，而无需任何特殊属性或角色。

在下面的示例中，我们创建了一组单选按钮。<fieldset>并作为标签<legend>我正在使用。

※ 注意！：有时您可能需要并排布局标签和输入框。在这种情况下，请使用 fieldset。display: contents;但不建议这样做，因为有些浏览器会将图例从可访问性树中移除。强行用 CSS 对齐布局并失去可访问性并不好。

最喜欢的水果



苹果

橘子

香蕉

概括

单选按钮或复选框组的标签可以按如下方式组织：

使用 role 属性和 aria-labelledby

• 如有需要，可灵活定制
• 显式设置组标签并结合 role="group"

<fieldset>和<legend>如何使用

• 基于语义的标准方法
• 允许更强大、更易于访问的实现
• 某些布局存在可访问性问题

根据您的设计和要求，您可以通过选择任一方法来实现适当的可访问性。

<fieldset>和<legend>更具语义性，但在查询表单的情况下，例如，由于整体布局结构，role 属性和 aria-labelledby 可能更容易使用。

网站无障碍设计仍处于未来阶段！