html - 什么是 aria-label 以及我应该如何使用它？

Question

几个小时前，我读到了 aria-label属性，其中:

Defines a string value that labels the current element.

但在我看来，这是 title 属性应该做的。我进一步查看了Mozilla Developer Network得到一些例子和解释，但我发现的唯一的东西是

<button aria-label="Close" onclick="myDialog.close()">X</button>

它没有为我提供任何标签(所以我认为我误解了这个想法)。我在这里尝试过 jsfiddle .

所以我的问题是:为什么我需要 aria-label 以及我应该如何使用它？

Answer 1

这是一个旨在帮助 assistive technology 的属性(例如屏幕阅读器)将标签附加到其他匿名 HTML 元素。

所以有 <label>元素:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>明确告诉用户在 input 中输入他们的名字。 id="fmUserName" .

aria-label做同样的事情，但它适用于那些不实用或不希望拥有 label 的情况。在屏幕上。拍the MDN example :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

大多数人都可以直观地推断出此按钮将关闭对话框。使用辅助技术的盲人可能只是听到“X”大声朗读，如果没有视觉线索，这并没有多大意义。 aria-label明确告诉他们按钮将做什么。