Html 什么是 aria-label，我应该如何使用它？

What is aria-label and how should I use it?

提问by Salvador Dali

A few hours ago I read about the aria-labelattribute, which:

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

Defines a string value that labels the current element.

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

But in my opinion this is what the titleattribute was supposed to do. I looked further in the Mozilla Developer Networkto get some examples and explanations, but the only thing I found was

但在我看来，这就是title属性应该做的事情。我在Mozilla Developer Network 中进一步查看以获取一些示例和解释，但我发现的唯一内容是

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

Which does not provide me with any label (so I assume I misunderstood the idea). I tried it here in jsfiddle.

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

So my question is: why do I need aria-labeland how should I use it?

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

回答by Olly Hodgson

It's an attribute designed to help assistive technology(e.g. screen readers) attach a label to an otherwise anonymous HTML element.

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

So there's the <label>element:

所以有一个<label>元素：

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

The <label>explicitly tells the user to type their name into the inputbox where id="fmUserName".

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

aria-labeldoes much the same thing, but it's for those cases where it isn't practical or desirable to have a labelon screen. Take the MDN example:

aria-label做很多相同的事情，但它适用于那些label在屏幕上不切实际或不理想的情况。以MDN 为例：

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

Most people would be able to infer visually that this button will close the dialog. A blind person using assistive technology might just hear "X" read aloud, which doesn't mean much without the visual clues. aria-labelexplicitly tells them what the button will do.

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

回答by Adam

In the example you give, you're perfectly right, you have to set the title attribute.

在您给出的示例中，您完全正确，您必须设置 title 属性。

If the aria-labelis one tool used by assistive technologies (like screen readers), it is not natively supported on browsers and has no effect on them. It won't be of any help to most of the people targetted by the WCAG (except screen reader users), for instance a person with intellectal disabilities.

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

The "X" is not sufficient enough to give information to the action led by the button (think about someone with no computer knowledge). It might mean "close", "delete", "cancel", "reduce", a strange cross, a doodle, nothing.

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

Despite the fact that the W3C seems to promote the aria-labelrather that the titleattribute here: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14in a similar example, you can see that the technology support does not include standard browsers : http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

尽管 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

In fact aria-label, in this exact situation might be used to give more context to an action:

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

For instance, blind people do not perceive popups like those of us with good vision, it's like a change of context. "Back to the page" will be a more convenient alternative for a screen reader, when "Close" is more significant for someone with no screen reader.

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

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

回答by Moumit

If you wants to know how aria-labelhelps you practically.. then follow the steps ... you will get it by your own ..

如果您想知道如何实际aria-label帮助您.. 然后按照步骤操作...您将自己获得它..

Create a html page having below code

创建一个具有以下代码的 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>

Now, you need a virtual screen reader emulator which will run on browser to observe the difference. So, chrome browser users can install chromevoxextension and mozilla users can go with fangs screen readeraddin

现在，您需要一个虚拟屏幕阅读器模拟器，它将在浏览器上运行以观察差异。因此，chrome 浏览器用户可以安装chromevox扩展，而 mozilla 用户可以使用fangs屏幕阅读器插件

Once done with installation, put headphones in your ears, open the html page and make focus on both button(by pressing tab) one-by-one .. and you can hear .. focusing on first x button.. will tell you only x button.. but in case of second x button.. you will hear back to the page buttononly..

安装完成后，将耳机戴在耳朵上，打开 html 页面并将焦点放在两个按钮上（通过按 Tab 键）一一.. 你可以听到 .. focus on first x button.. 只会告诉你x button.. 但是在second x button..的情况下，您只会听到back to the page button..

i hope you got it well now!!

我希望你现在一切都好！！

回答by ndioewbnc

Prerequisite:

先决条件：

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 用于改善视障用户的用户体验。视障用户使用 JAWS、NVDA 等屏幕阅读器软件浏览应用程序。在浏览应用程序时，屏幕阅读器软件会向用户宣布内容。Aria 可用于在代码中添加内容，帮助屏幕阅读器用户了解控件的角色、状态、标签和目的

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

咏叹调在视觉上没有任何改变。（Aria 也害怕设计师）。

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

aria-label 属性用于将标签传达给屏幕阅读器用户。通常搜索输入字段没有视觉标签（感谢设计师）。aria-label 可用于将控件标签传达给屏幕阅读器用户

How To Use:

如何使用：

<input type="edit" aria-label="search" placeholder="search">

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

应用程序没有视觉变化。但是屏幕阅读器可以理解控制的目的

aria-labelledby

咏叹调

Both aria-label and aria-labelledby is used to communicate the label. But aria-labelledby can be used to reference any label already present in the page whereas aria-label is used to communicate the label which i not displayed visually

aria-label 和 aria-labelledby 都用于传递标签。但是 aria-labelledby 可用于引用页面中已存在的任何标签，而 aria-label 用于传达我未在视觉上显示的标签

Approach 1:

方法一：

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Approach 2:

方法二：

aria-labelledby can also be used to combine two labels for screen reader users

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

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

回答by lucalanca

The titleattribute displays a tooltip when the mouse is hovering the element. While this is a great addition, it doesn't help people who cannot use the mouse (due to mobility disabilities) or people who can't see this tooltip (e.g.: people with visual disabilities or people who use a screen reader).

title当鼠标悬停在元素上时，该属性会显示工具提示。虽然这是一个很好的补充，但它对无法使用鼠标（由于行动不便）或看不到此工具提示的人（例如：有视觉障碍的人或使用屏幕阅读器的人）没有帮助。

As such, the mindful approach here would be to serve all users. I would add both titleand aria-labelattributes (serving different types of users and different types of usage of the web).

因此，这里的谨慎方法是为所有用户提供服务。我会同时添加title和aria-label属性（为不同类型的用户和不同类型的网络使用提供服务）。

Here's a good article that explains aria-labelin depth

这是一篇深入解释的好文章aria-label