什么是 aria-label 以及我应该如何使用它？答案

【问题标题】：What is aria-label and how should I use it?什么是 aria-label 以及我应该如何使用它？
【发布时间】：2014-03-29 04:39:09
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

查看您链接的资源，如果您不想显示标题属性提供的工具提示，似乎可以使用aria-label：在可见标签的情况下或可见的工具提示是不可取的，作者可以使用 aria-label 设置元素的可访问名称
仅供参考 ARIA = 可访问的富 Internet 应用程序
当
元素中的实际可见文本太简短并且不希望有全文可见？在此线程中的示例中，可以使用标签。但是标签不适用于标题，这就是我问的原因
您要求的唯一合适的类似内容是需要更多信息的“longdesc”属性（仅适用于图像） - 无法想象会有一个用于文本的属性，因为无论如何它都应该是描述性的. - @HelloWorld
@HelloWorld 我会说将它设置在<h1> 上不是一个好主意。大多数在非交互元素上aria-label 被忽略。在内部使用视觉隐藏的跨度，甚至更好地为所有用户使用相同的描述性文本。想象一下这样一个场景，盲人用户想向视力正常的人展示一些东西，说“你看到那个带有‘xxx’文本的标题了吗？”有视力的人看不到它，因为它是隐藏的。 aria-label 的其他问题可能是在翻译页面时它不会被翻译，或者通过 Ctrl+F 搜索无法访问，盲人用户倾向于这样做以加快导航速度

标签： html assistive-technology

【解决方案1】：

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

所以有<label> 元素：

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

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

aria-label 做了很多相同的事情，但它适用于那些在屏幕上显示label 不切实际或不理想的情况。取the MDN example：

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

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

【讨论】：

感谢您的解释，但他怎么听得近？我可以在我的浏览器（chrome）中做什么来听到这个？如果一个盲人不知道它在哪里，他怎么能选择这个按钮呢？
我想像ChromeVox 这样的扩展是一个不错的起点？不过我从来没用过。他们通过向用户大声朗读屏幕来工作，从 HTML 中获取提示（例如，h1 应该比p 更强调，a 显然是一个链接, form` 指示在某处输入信息， aria-* 属性为元素的作用等提供了更多线索。
在这种特殊情况下，我会将其添加到标题attribute。当用户悬停在 X 上时，向“看到”用户显示工具提示并没有什么坏处。
除了 ChromeVox，还有NVDA。两者都相当容易安装和启动，但很难掌握。
@SalvadorDali - 仅供参考。在移动盲人可以启用辅助工具，如 android 手机它是 TalkBack 和 iOS 手机它是 VoiceOver。通过使用它，页面被逐行读取。

【解决方案2】：

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

如果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>

【讨论】：

@HrvojeGolcic 这正是我的回答：ARIA 仅适用于屏幕阅读器，不会帮助其他用户，需要为所有用户提供替代方法。如果您已经有了自己的答案，则无需在每个答案下方评论。
答案是you have to set the title attribute，恕我直言并没有说我的评论是做什么的。我不会对答案投反对票，而是发表评论以确保人们清楚地理解其中的区别。我认为离开 cmets、教育和使可访问网络成为一个更好的地方不会伤害任何人。真的没有什么私人的。
以“强烈反对！”开始评论虽然解释帖子是不好的网络礼仪。在我的回答中，一切都清楚地表明“X”不是一个好的文本，但由于这是所问的问题，所以在我的回答下没有必要回答这一点。没有什么私人的，只是糟糕的网络礼仪。

【解决方案3】：

如果你想知道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 screen reader插件

安装完成后，将耳机戴在耳朵上，打开 html 页面并一个接一个地关注两个按钮（通过按 Tab）.. 你可以听到 .. 专注于 first x button .. 将只告诉你x button .. 但如果是second x button .. 你只会听到back to the page button ..

希望你现在一切都好！！

【讨论】：

重要的一点是title 属性被忽略，即使在第一个按钮上也是如此。更多信息：silktide.com/…
还是这样吗？最好提供title 和 aria-label?
这正是我想要的。我只是想看看和听听它在现实世界中是如何工作的，chromevox 就像一个魅力，会背诵 aria-labelledby 字段。谢谢。

【解决方案4】：

先决条件：

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

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

咏叹调标签

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

如何使用：

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

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

aria-labelledby

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

方法一：

<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">

【讨论】：

【解决方案5】：

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

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

这是一篇很好的文章，解释了aria-label in depth

【讨论】：

请记住，aria-label 大部分情况下仅对屏幕阅读器可见。 title 将不可用，正如您对不使用鼠标的人所说的那样。 这包括智能手机用户。最好实施一个适用于所有用户的自定义工具提示解决方案，无论是否使用鼠标，也可以使用屏幕阅读器，例如Bootstrap 提供什么

【解决方案6】：

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

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

【讨论】：

元素中的实际可见文本太简短并且不希望有全文可见？在此线程中的示例中，可以使用标签。但是标签不适用于标题，这就是我问的原因