时间戳

首页 > 解决方案 > aria-label 与表单标签

html - aria-label 与表单标签

问题描述

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

<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-labelwith forms 是否比使用<label for="x">.

标签： htmlaccessibilityformswai-ariascreen-readers

解决方案

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

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

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

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

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

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

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

推荐阅读