427

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

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

但在我看来，这是该title属性应该做的。我进一步查看了Mozilla 开发者网络以获取一些示例和解释，但我发现的唯一内容是

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

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

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

4

6 回答 6

533

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

So there's the <label> element: 

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

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

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

<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-label explicitly tells them what the button will do.

于 2014-02-26T11:50:15.360 回答
81

在您给出的示例中，您完全正确，您必须设置 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>
于 2015-09-14T08:10:37.527 回答
47

如果您想知道实际上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 页面并一个接一个地关注两个按钮（通过按标签）.. 你可以听到..专注于first x button..只会告诉你x button..但是在second x button..的情况下，您只会听到back to the page button..

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

于 2016-05-30T13:29:55.040 回答
14

先决条件：

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

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

咏叹调标签

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

如何使用：

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

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

咏叹调-labelledby

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

方法一：

<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">
于 2019-04-26T18:01:15.503 回答
6

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

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

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

于 2019-10-09T12:07:41.950 回答
5

作为一个侧面答案，值得注意的是：

  • ARIA 通常用于提高屏幕阅读器的可访问性。（不仅但主要是atm。）
  • 使用 ARIA 并不一定会让事情变得更好！如果没有正确实施和测试，ARIA很容易导致可访问性显着下降. 不要仅仅为了在代码中加入一些你不完全理解的“很酷的东西”而使用 ARIA。遗憾的是，在可访问性方面，ARIA 实现经常引入比解决方案更多的问题。这是相当普遍的，因为有视力的用户和开发人员不太可能在屏幕阅读器的广泛测试中付出额外的努力，而另一方面，ARIA 规范和验证器目前还远非完美，在某些情况下甚至令人困惑。最重要的是，每个浏览器和屏幕阅读器均不统一地实现 ARIA 支持，从而导致行为中的主要不一致。通常最好完全避免 ARIA，因为它不清楚它的确切作用、行为方式，并且不会使用所有屏幕阅读器和浏览器（或至少是最常见的组合）进行密集测试）。免责声明：我的目的不是要羞辱 ARIA，而是要羞辱 ARIA 的糟糕实现。事实上，HTML5 不提供任何其他替代方案来实现 ARIA 将为可访问性带来显着好处的情况并不少见，aria-hidden例如aria-expanded. 但只有在正确实施和测试的情况下！
于 2020-07-18T11:39:16.933 回答