几个小时前，我读到了aria-label属性，它:
定义标记当前元素的字符串值。
但在我看来，这就是title属性应该做的事情。我在Mozilla开发者网络中进一步寻找了一些例子和解释，但我唯一找到的是
<button aria-label="Close" onclick="myDialog.close()">X</button>
这并没有给我提供任何标签(所以我认为我误解了这个想法)。我在jsfiddle中尝试过。
所以我的问题是:为什么我需要aria-label，我应该如何使用它?
当前回答
它是一个用来帮助辅助技术(例如屏幕阅读器)将标签附加到匿名HTML元素的属性。
这里有<label>元素:
<label for="fmUserName">Your name</label>
<input id="fmUserName">
<label>显式地告诉用户将他们的名字输入到id="fmUserName"的输入框中。
Aria-label做了大致相同的事情，但它适用于在屏幕上显示标签不实际或不可取的情况。以MDN为例:
<button aria-label="Close" onclick="myDialog.close()">X</button>`
大多数人可以直观地推断出这个按钮将关闭对话框。使用辅助技术的盲人可能只听到“X”被大声念出来，如果没有视觉线索，这没有多大意义。Aria-label显式地告诉它们按钮将做什么。
其他回答
它是一个用来帮助辅助技术(例如屏幕阅读器)将标签附加到匿名HTML元素的属性。
这里有<label>元素:
<label for="fmUserName">Your name</label>
<input id="fmUserName">
<label>显式地告诉用户将他们的名字输入到id="fmUserName"的输入框中。
Aria-label做了大致相同的事情，但它适用于在屏幕上显示标签不实际或不可取的情况。以MDN为例:
<button aria-label="Close" onclick="myDialog.close()">X</button>`
大多数人可以直观地推断出这个按钮将关闭对话框。使用辅助技术的盲人可能只听到“X”被大声念出来，如果没有视觉线索，这没有多大意义。Aria-label显式地告诉它们按钮将做什么。
在你给出的例子中，你完全正确，你必须设置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屏幕阅读器插件
一旦完成安装，把耳机在你的耳朵，打开html页面，使焦点在两个按钮(按tab键)一个接一个。你可以听到…聚焦第一个x按钮..会告诉你只有x按钮..但如果第二个x按钮。您只会听到返回页面按钮。
我希望你现在得到了它!!
先决条件:
Aria用于改善视障用户的用户体验。视障用户使用JAWS、NVDA等屏幕阅读器软件浏览应用程序。在应用程序中导航时，屏幕阅读器软件向用户宣布内容。Aria可用于在代码中添加内容，以帮助屏幕阅读器用户理解控件的角色、状态、标签和目的
艾瑞亚在视觉上没有改变任何东西。(Aria也害怕设计师)。
aria-label
Aria-label属性用于将标签传递给屏幕阅读器用户。通常搜索输入字段没有视觉标签(感谢设计师)。Aria-label可用于将控件的标签传递给屏幕阅读器用户
如何使用:
<input type="edit" aria-label="search" placeholder="search">
在应用中没有视觉上的变化。但是屏幕阅读器可以理解控制的目的
咏叹调-拉布莱德比
aria-label和aria- labledby都用于传递标签。但是aria-labelledby可以用来引用页面中已经存在的任何标签，而aria-label则用来传达没有在视觉上显示的标签
方法1:
<span id="sd">Search</span>
<input type="text" aria-labelledby="sd">
方法2:
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的好文章
