几小时前，我读到了关于 aria-label 属性的介绍，该属性：
定义一个字符串值来标记当前元素。
但是在我看来，这正是 title 属性应该做的事情。我在 Mozilla 开发者网络 上进一步查看了一些例子和解释，但我只找到了：
<button aria-label="Close" onclick="myDialog.close()">X</button>
没有为我提供任何标签（所以我认为我误解了这个想法）。我在jsfiddle尝试了一下。
所以我的问题是：我为什么需要aria-label，以及如何使用它？
<label>元素：<label for="fmUserName">Your name</label>
<input id="fmUserName">
aria-label做了类似的事情，但它适用于那些在屏幕上没有h1 应比 p 更突出显示，a 显然是链接，form 表示输入信息的位置，aria-* 属性提供了更多有关元素功能的线索等）。 - Olly Hodgson根据你提供的示例，你是完全正确的，必须设置'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>
如果你想知道如何在实践中使用aria-label，请按照以下步骤操作，你将可以自行理解：
创建一个包含以下代码的HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<button title="Close"> X </button>
<br />
<br />
<br />
<br />
<button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>
现在，您需要一个能够在浏览器上运行的虚拟屏幕阅读器模拟器来观察差异。因此，Chrome浏览器用户可以安装 Chromevox 扩展程序，而Mozilla用户则可以选择 fangs screen reader 插件。
安装完成后，戴上耳机，在HTML页面上逐个将焦点放在两个按钮上（通过按下Tab键）...您会听到....将焦点集中在first x button上..只会告诉您x button..但是对于second x button，您将只听到back to the page button...
希望您现在已经明白了！！
title属性也会被忽略。更多信息：https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/ - Sphinxxxtitle和aria-label仍然更好吗？ - Kamafeatherchromevox 的表现非常好，可以朗读 aria-labelledby 字段。谢谢。 - Raj Rajeshwar Singh Rathore<input type="edit" aria-label="search" placeholder="search">
应用程序没有视觉上的变化。但屏幕阅读器可以理解控件的目的。
aria-labelledby
aria-label和aria-labelledby都用于传达标签信息。但是aria-labelledby可以引用页面中已经存在的任何标签，而aria-label用于传达在视觉上未显示的标签。
方法1：
<span id="sd">Search</span>
<input type="text" aria-labelledby="sd">
方法二：
aria-labelledby也可以用于组合两个标签，以供屏幕阅读器用户使用。
<span id="de">Billing Address</span>
<span id="sd">First Name</span>
<input type="text" aria-labelledby="de sd">
title属性在鼠标悬停元素时显示工具提示。虽然这是一个很好的补充，但它并不能帮助那些无法使用鼠标（由于行动不便）或看不到此工具提示的人（例如：视觉障碍者或使用屏幕阅读器的人）。title和aria-label属性（以服务不同类型的用户和Web使用方式）。aria-label深入理解的好文章：aria-label。aria-label 主要只对屏幕阅读器可见。如您所说，title 对于不使用鼠标的人来说将不可用，包括智能手机用户。最好实现一个自定义工具提示解决方案，适用于所有用户，无论是否使用鼠标，以及是否使用屏幕阅读器，例如 Bootstrap 提供的解决方案。 - Hrvoje Golcicaria-hidden 或 aria-expanded。但前提是正确实施和测试！我认为除非你知道自己在做什么并且要检查它在所有支持aria的设备上的外观，否则你不应该使用它。不要以解决问题的借口带来问题！残障人士会感谢你。
aria-label可以用来代替title属性中提供的工具提示。在不希望显示可见标签或工具提示的情况下，作者可以使用aria-label设置元素的无障碍名称。请注意，这不会改变原本的意思。 - Fabrizio Calderan<h1>上设置它不是一个好主意。大多数情况下，对于非交互元素，aria-label会被忽略。可以在内部使用一个视觉上隐藏的span，或者更好的方法是为所有用户使用相同的描述性文本。想象一下这样的场景：一个盲人想向一个有视力的人展示某些内容，说“你看到那个带有'xxx'文本的标题吗？”有视力的人看不到它，因为它是隐藏的。aria-label的其他问题可能是，在页面翻译时它不会被翻译，或者在盲人进行更快速的导航时无法通过Ctrl+F搜索到。 - Hrvoje Golcic