创建表单时，您可以使用label你是否曾经对如何处理群组感到困惑？特别是如何给整个群组贴标签，以及for有时我会为如何处理属性而苦恼。
这次我们就来整理一下这些群体的标注，并介绍一下具体的方法。
常见观看方法及问题
至第一项for观点
对于单选按钮或复选框组，<label>的for这是将属性指向第一项的一种方法。
例如下面的代码：
バナナ
Topics
网页可访问性：如何正确标记单选按钮或复选框组？
- column
至第一项
从视觉上看，它看起来不错，但屏幕阅读器无法正确显示“最喜欢的水果”标签。它仅与第一个单选按钮相关联。因此，整个组无法被正确识别。
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 可能更容易使用。
网站无障碍设计仍处于未来阶段！
撰稿人
我们以可靠的团队结构和快速的响应能力而自豪。
您在网络访问方面遇到困难吗？
案例研究
他从桌面出版（DTP）领域跳槽到网络领域，不知不觉中就成为了一位精通标记语言、前端、方向和无障碍设计的“技术大师”。自Liberogic创立以来，他一直活跃于多个领域，如今已成为公司内部的一本活字典。最近，他专注于探索如何充分利用提示来提高效率，并思考着“我们能否更多地依赖人工智能来实现无障碍？”他的技术和思维仍在不断发展。
Futa
标记工程师 / 前端工程师 / Web 无障碍工程师 / Web 总监