几个小时前，我阅读了有关<a href="https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-label" rel="noreferrer">aria-label</a>属性的信息：

<blockquote>
 定义一个标记当前元素的字符串值。
</blockquote>

但是我认为这就是<code>title</code>属性应该做的。我在<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" rel="noreferrer">Mozilla开发人员网络中</a>进一步查找了一些示例和解释，但是我发现的唯一是

<pre><code>&lt;button aria-label="Close" onclick="myDialog.close()"&gt;X&lt;/button&gt;
</code></pre>

这没有给我提供任何标签（所以我认为我误解了这个想法）。我在<a href="http://jsfiddle.net/KhgPa/" rel="noreferrer">jsfiddle中</a>尝试过。

所以我的问题是：为什么我需要<code>aria-label</code>和如何使用它？

HTML

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

此属性旨在帮助<a href="http://en.wikipedia.org/wiki/Assistive_technology" rel="noreferrer">辅助技术</a>（例如屏幕阅读器）将标签附加到其他匿名HTML元素上。

因此，有一个<code>&lt;label&gt;</code>元素：

<pre><code>&lt;label for="fmUserName"&gt;Your name&lt;/label&gt;
&lt;input id="fmUserName"&gt;
</code></pre>

在<code>&lt;label&gt;</code>明确地告诉用户输入他们的名字进入<code>input</code>对话框，在其中<code>id="fmUserName"</code>。

<code>aria-label</code>所做的事情大致相同，但这是针对那些不实际或不希望<code>label</code>在屏幕上显示的情况。以<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" rel="noreferrer">MDN为例</a>：

<pre><code>&lt;button aria-label="Close" onclick="myDialog.close()"&gt;X&lt;/button&gt;`
</code></pre>

大多数人都可以直观地推断出此按钮将关闭对话框。使用辅助技术的盲人可能只会听到“ X”声，如果没有视觉提示，这并没有多大意义。<code>aria-label</code>明确告诉他们该按钮将执行的操作。

<code>title</code>当鼠标悬停元素时，该属性显示工具提示。尽管这是一个很好的补充，但它不能帮助不能使用鼠标的人（由于行动不便）或看不到此工具提示的人（例如：视觉障碍者或使用屏幕阅读器的人）。

因此，此处的主观方法是为所有用户提供服务。我会同时添加<code>title</code>和<code>aria-label</code>属性（服务于不同类型的用户和不同类型的Web使用）。

这是一篇很好的文章，<a href="https://www.aditus.io/aria/aria-label/" rel="nofollow noreferrer">深入</a>解释<a href="https://www.aditus.io/aria/aria-label/" rel="nofollow noreferrer"><code>aria-label</code>了</a>

先决条件： 

Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control

Aria does not change anything visually. (Aria is scared of designers too).

aria-label

aria-label attribute is used to communicate the label to screen reader users. Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users

How To Use:

<pre><code>&lt;input type="edit" aria-label="search" placeholder="search"&gt;
</code></pre>

There is no visual change in application. But screen readers can understand the purpose of control

aria-labelledby

aria-label和aria-labeledby均用于传达标签。但是aria-labelledby可以用来引用页面中已经存在的任何标签，而aria-label用于传达我无法直观显示的标签

方法1：

<pre><code>&lt;span id="sd"&gt;Search&lt;/span&gt;

&lt;input type="text" aria-labelledby="sd"&gt;
</code></pre>

方法二：

aria-labelledby还可以用于为屏幕阅读器用户组合两个标签

<pre><code>&lt;span id="de"&gt;Billing Address&lt;/span&gt;

&lt;span id="sd"&gt;First Name&lt;/span&gt;

&lt;input type="text" aria-labelledby="de sd"&gt;
</code></pre>

如果你想知道如何<code>aria-label</code>帮助你几乎 ..然后按照步骤......你会被你自己弄吧..

创建具有以下代码的html页面

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;button title="Close"&gt; X &lt;/button&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;button aria-label="Back to the page" title="Close" &gt; X &lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

现在，您需要一个虚拟屏幕阅读器模拟器，该模拟器将在浏览器上运行以观察差异。因此，Chrome浏览器用户可以安装<a href="https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn" rel="noreferrer">chromevox</a>扩展名，而mozilla用户可以使用<a href="https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn" rel="noreferrer">fangs </a><a href="https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/" rel="noreferrer">屏幕阅读器</a>插件

安装完成后，将耳机戴在耳朵上，打开html页面，然后将两个按钮（通过按Tab键）分别放在一个按钮上..您会听到..专注于<code>first x button</code>..只会告诉您<code>x button</code>..如果是<code>second x button</code>..，您只会听到<code>back to the page button</code>..

我希望你现在一切顺利！