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

321

几个小时前，我阅读了有关aria-label属性的信息：

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

但是我认为这就是title属性应该做的。我在Mozilla开发人员网络中进一步查找了一些示例和解释，但是我发现的唯一是

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

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

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

html assistive-technology

— 萨尔瓦多·达利
source

3

查看您链接的资源，aria-label如果您不想显示title属性提供的工具提示，似乎可以使用它：在不希望使用可见标签或可见工具提示的情况下，作者可以设置图标的可访问名称。元素使用ARIA标签

— 法布里奇奥Calderan

13

fyi ARIA =可访问的富Internet应用程序

— Eric D'Souza

没有人知道当<h1>元素内的实际可见文本太简短并且不希望显示全文时，使用aria-label来描述更具描述性的<h1>文本是否合适？在该线程的示例中，可以使用标签。但是标签不适用于标题，这就是我问的原因

— HelloWorld

您所要求的唯一适当的类似内容是需要更多信息的“ longdesc”属性（仅用于图像）-无法想象文本会有一个，因为无论如何它应该始终是描述性的。-@HelloWorld

— Jamie Paterson

427

此属性旨在帮助辅助技术（例如屏幕阅读器）将标签附加到其他匿名HTML元素上。

因此，有一个<label>元素：

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

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

aria-label所做的事情大致相同，但这是针对那些不实际或不希望label在屏幕上显示的情况。以MDN为例：

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

大多数人可以从视觉上推断此按钮将关闭对话框。使用辅助技术的盲人可能只会听到“ X”声，这在没有视觉提示的情况下意义不大。aria-label明确告诉他们该按钮将执行的操作。

— 奥利·霍奇森
source

4

感谢您的解释，但是他会听到怎样的声音？我可以在浏览器（chrome）中做什么以听到此消息？如果盲人不知道按钮在哪里，该如何选择呢？

— Salvador Dali

1

我想像ChromeVox这样的扩展程序是一个不错的起点吗？我从来没有用过。他们通过大声地向用户阅读屏幕，从HTML中获取提示来进行工作（例如，h1应强调a而不是a p，a这显然是链接, 形式，指示在某处输入信息， aria-*属性进一步提示了元素的作用，等等）。

— 2014年

2

在这种情况下，我会将其添加到title中attribute。在显示工具提示“看到”用户没有危害时，他们悬停X.

— GolezTrol

3

除了ChromeVox，还有NVDA。两者都很容易安装和启动，而且很难掌握。

— ivarni

1

@SalvadorDali-仅供参考。在移动盲人中，可以启用辅助功能工具，例如对于android移动设备是TalkBack，对于iOS移动设备则是VoiceOver。通过使用此选项，页面可以逐行读取。

— Rahul J. Rane

71

在您给出的示例中，您说得很对，您必须设置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>

— 亚当
source

35

如果你想知道如何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页面，然后将两个按钮（按Tab键）分别放在一个按钮上..您会听到..专注于first x button..只会告诉您x button..如果是second x button..，您只会听到back to the page button..

我希望你现在一切顺利！

— 穆米特
source

1

重要的一点是title，即使在第一个按钮上，该属性也会被忽略。更多信息：silktide.com/...

— Sphinxxx

2

还是这样吗？还是提供title 和 aria-label？

— 卡马菲瑟

2

这正是我想要的。我只是想看看和听到它在现实世界中的chromevox运作方式，以及像魅力一样的作品，并且会背诵咏叹调标签的田野。谢谢。

— 拉吉（Raj Rajeshwar）辛格（Singh Rathore）'18年

7

先决条件：

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

咏叹调不会在视觉上改变任何东西。（咏叹调也害怕设计师）。

咏叹调标签

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

如何使用：

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

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

咏叹调标记

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

方法1：

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

— Ndioewbnc
source

3

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

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

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

— 卢卡兰卡
source