什么是咏叹调标签，我该如何使用它？

几个小时前，我读了关于咏叹调标签属性，其中：

定义标签当前元素的string值。

但在我看来，这是title属性应该做的。我在Mozilla开发者networking中进一步了解了一些例子和解释，但是我发现的唯一的东西是

 <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"的input框中input他们的名字。

aria-label作用大同小异，但是对于那些在屏幕上没有实用性或者不可取的label ，以MDN为例：

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

大多数人可以通过视觉推断出这个button将closures对话框。一个盲人使用辅助技术可能只是听到“X”朗读，没有视觉线索没有多大的意义。 aria-label明确告诉他们button将做什么。

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

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

“X”不足以提供button引导的操作信息（想想没有计算机知识的人）。这可能意味着“closures”，“删除”，“取消”，“减less”，一个奇怪的十字架，一个涂鸦，什么都没有。

尽pipeW3C似乎推广了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可能会被用来给一个行动提供更多的背景：

例如，盲人不会像我们每个人一样感受到一个popup窗口，这就像情境的变化。当“closures”对于没有屏幕阅读器的人更重要时，“返回页面”对于屏幕阅读器将是更方便的select。

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

如果你想知道aria-label如何帮助你实际上 ..然后按照步骤…你会得到它自己..

创build一个具有以下代码的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用户可以使用f牙屏幕阅读器插件

一旦完成安装，把耳机放在你的耳朵，打开HTML页面，并把焦点放在两个button（通过按tab）一个接一个..你可以听到..专注于first x button ..只会告诉你x button ..但在second x button情况下..你只会听到back to the page button ..

我希望你现在得到它！