Question

Are there any differences between these two screen reader techniques on forms, and is one more encouraged than the other:

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

The first way has always been the way to set this up, but since WAI-ARIA was introduced, it's got me thinking if using aria-label with forms is the better than using <label for="x">.

Answer 1

Aria-label is for accessibility. If Aria-label is added, on voice-over i.e (cmd +F5 on MAC or JAWS on windows machine will read whatever is typed inside the aria-label attribute of the HTML tag. This functionality is highly helpful for visually disabled users. Read here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Label is HTML tag , just like <form> or <h1>..<h6> , etc tags, when tag is used it renders Label on the UI. E.g: <Label>ENTER NAME</Label>

Answer 2

作为经验法则：如果真实元素可以完成任务，则使用真实元素。当没有真正的元素可以表达语义时，或者当您做一些真的很怪异的事情时，ARIA就是您的后备选择，这会阻止您使用常规元素。

（大多数情况下，当您做某事真的很奇怪时，您应该停止做这奇怪的事情）。

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

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

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

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

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

aria-label vs form labels

2 个答案: