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

Question

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

定义标记当前元素的字符串值。

但在我看来，这就是 title 属性应该做的。我进一步查看了 Mozilla 开发者网络 以获取一些示例和解释，但我唯一发现的是

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

它没有为我提供任何标签（所以我想我误解了这个想法）。我在 jsfiddle 中尝试过。

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

原文由 Salvador Dali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个旨在帮助 辅助技术（例如屏幕阅读器）将标签附加到匿名 HTML 元素的属性。

所以有 <label> 元素：

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

<label> 明确告诉用户在 input 框中键入他们的名字，其中 id="fmUserName" 。

aria-label 做同样的事情，但它适用于那些在屏幕上显示 label 不切实际或不可取的情况。以 MDN 为例：

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

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

原文由 Olly Hodgson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在你给出的例子中，你是完全正确的，你必须设置 title 属性。

如果 aria-label 是辅助技术（如屏幕阅读器）使用的一种工具，则浏览器本身不支持它并且对它们没有影响。它对大多数 WCAG 的目标人群（屏幕阅读器用户除外）没有任何帮助，例如智障人士。

“X”不足以为按钮引导的操作提供信息（想想那些没有计算机知识的人）。它可能意味着“关闭”、“删除”、“取消”、“减少”、一个奇怪的十字、一个涂鸦，什么都没有。

尽管 W3C 似乎在此处推广 aria-label 而不是 title 属性：http: //www.w3.org/TR/2014/NOTE-WCAG20-TECHS- 20140916/ARIA14 在一个类似的例子中，你可以看到技术支持不包括标准浏览器： http ://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

事实上 aria-label ，在这种情况下可能会被用来为一个动作提供更多的上下文：

例如，盲人不会像我们视力好的人那样感知弹出窗口，这就像上下文的变化。当“关闭”对于没有屏幕阅读器的人来说更重要时，“返回页面”对于屏幕阅读器来说将是一个更方便的选择。

   <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

原文由 Adam 发布，翻译遵循 CC BY-SA 3.0 许可协议