咏叹调标签与表格标签

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时（请参阅我之前关于古怪的注释）。

Answer 2

Aria-label用于访问。如果添加了Aria-label，则在画外音即（Windows上的MAC或JAWS上的cmd + F5将读取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。例如：<Label>ENTER NAME</Label>