aria-label 与表单标签答案

【问题标题】：aria-label vs form labelsaria-label 与表单标签
【发布时间】：2019-09-12 19:40:31
【问题描述】：

这两种屏幕阅读器技术在表单上是否有任何区别，其中一种比另一种更受鼓励：

<label for="titleInput">Title</label>
<input type="text" id="titleInput" name="title" value="">


<div>Title</div>
<input type="text" aria-label="Title" name="title" value="">

第一种方式一直是设置它的方式，但自从引入了 WAI-ARIA 后，我开始思考是否在表单中使用 aria-label 是否比使用 <label for="x"> 更好。

【问题讨论】：

为什么不同时使用呢？如果您使用适当的标签，它还允许用户单击标签以专注于输入

标签： html accessibility forms wai-aria screen-readers

【解决方案1】：

根据经验：如果一个真正的元素可以完成这项工作，那么就使用一个真正的元素。当没有表达语义的真实元素或当你在做某事非常奇怪阻止你使用普通元素时，你会回退到 ARIA。

（大多数时候，当你在做一些非常奇怪的事情时，你应该停止做那些奇怪的事情。

在这种特殊情况下，两者之间有几个主要区别。

浏览器不会像使用标签元素那样将点击目标扩展到 div 元素。单击标签将聚焦输入，单击 div 不会。

您现在有两个标签。 div 和属性在两个不同的地方提供 same 信息。该属性不会替换 div，因此屏幕阅读器会读出 div 文本和与输入关联的标签。

使用<label>。它专门用于将文本与表单控件相关联。

aria-label 旨在提供屏幕阅读器无法读取的某些内容的文本描述。例如当您使用背景图像而不是使用带有 alt 属性的 <img> 来传达信息时（请参阅我之前关于怪异的注释）。

【讨论】：

【解决方案2】：

Aria-label 用于辅助功能。如果添加了 Aria-label，则在画外音中，即（MAC 上的 cmd +F5 或 Windows 机器上的 JAWS 将读取 HTML 标签的 aria-label 属性内键入的任何内容。此功能对视障用户非常有用。阅读这里https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Label 是 HTML 标签，就像 <form> or <h1>..<h6> 等标签一样，当使用标签时，它会在 UI 上呈现标签。例如：<Label>ENTER NAME</Label>

【讨论】：

Payel，虽然这是对的，因为 label 具有内置的可访问性语义，因此在您应该使用标签的情况下（例如几乎或所有情况下您有输入），那么它是比 aria-label 更好，因为 aria-label 不会帮助有视力的用户受益于原生 HTML 元素也可以提供的可访问性/可用性的视觉方面。