咏叹调标签与表格标签

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标签，则在画外音时（例如，MAC上的cmd + F5或Windows计算机上的JAWS将读取HTML标签的aria-label属性中键入的任何内容。此功能对有视觉障碍的用户非常有用。此处https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

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

Answer 2

作为经验法则：如果实际元素可以完成任务，则使用真实元素。 当没有真正的元素表达语义时，或者当您做的事情很奇怪而无法使用常规元素时，ARIA就是您的后备。

（通常，当您做的事情很奇怪时 ，应该停止做这件事）。

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

浏览器不会像使用label元素那样将click目标扩展到div元素 。 单击标签将使输入集中，单击div则不会。

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

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

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