for 和 aria-labeled-by 之间的区别答案

【问题标题】：Difference between for and aria-labeled-byfor 和 aria-labeled-by 之间的区别
【发布时间】：2019-01-18 09:48:43
【问题描述】：

谁能解释一下在标签上使用 for-attribute 和在输入上使用 aria-labelled-by-attribute 之间的区别。

据我所知，aria-labelled-by 允许多个元素（egradio 按钮）用相同的标签标记，是否依赖于元素的 id，该元素应该是唯一的，因此只能分配给一个元素。

那么我应该在哪种情况下使用 aria-labelled-by？

【问题讨论】：

标签： html

【解决方案1】：

主要区别在于for属性具有功能用途。 for 属性用于将 label 与某个 id 的指定表单字段链接。例如：

<div>
  <input type="checkbox" id="checkboxId" />
  <label for="checkboxId">My cool checkbox with clickable label</label>
</div>

<div>
  <input type="checkbox" id="checkboxId2" />
  <label>My cool checkbox without clickable label</label>
</div>

如您所见，具有指定for 属性的标签能够切换在此for 属性中指定的id 复选框。

ARIA 属性主要用于使您的应用程序可供某些残障人士访问（例如，使您的应用程序适合屏幕阅读器等）。 ARIA 属性没有直接的功能目的，它们只是关于可访问性

<input aria-labeledby="myLabel" type="checkbox" id="checkboxId" />
<label id="myLabel">My cool label</label>

【讨论】：

我明白了。因此，如果我想标记两个单选按钮，我必须添加一个字段集并通过 css 对其进行样式设置，以便将其集成到我的设计中。感谢您澄清这一点。