咏叹调标签与表单标签

Question

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

<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">.

Answer 1

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

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

在这种特殊情况下，两者之间存在一些主要差异。

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

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

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

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