Question

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

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

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

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

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

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

Answer 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明确告诉他们按钮会做什么。

Answer 2

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

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

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

尽管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，在这种情况下，可能会用于为行动提供更多背景信息：

例如，盲人不会像我们这些有良好视力的人一样感知弹出窗口，它就像是改变了背景。＆＃34;返回页面＆＃34;对于屏幕阅读器来说，这将是一个更方便的选择，当＆＃34;关闭＆＃34;对于没有屏幕阅读器的人来说更重要。

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

Answer 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 addin

完成安装后，将耳机放入耳中，打开html页面，然后一个一个地按下两个按钮（通过按Tab键），你可以听到......专注于first x button。。只会告诉你x button ..如果是second x button ..你只会听到back to the page button ..

我希望你现在好好开心!!

Answer 4

先决条件：

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

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

aria标签

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

使用方法：

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

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

aria标签为

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

方法1：

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

Answer 5

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

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

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

Answer 6

作为附带答案，值得注意的是：

ARIA通常用于改善屏幕阅读器的可访问性。（不仅是atm，而且主要是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，而是贬低ARIA的不良实现。实际上，在实施ARIA会为可访问性带来重大好处的情况下，HTML5不提供任何其他替代方案并不少见。 aria-hidden或aria-expanded。但前提是必须正确实施和测试！

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

6 个答案: