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

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

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

但在我看来，这就是title属性应该做的事情。我进一步在Mozilla开发者网络中寻找一些例子和解释，但我唯一发现的是

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

这并没有给我提供任何标签(所以我认为我误解了这个想法)。我在jsfiddle中尝试了它。

所以我的问题是:为什么我需要aria-label，我应该如何使用它?

348827 次浏览
小开
最佳答案

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

这里有<label>元素:

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

<label>显式地告诉用户将他们的名字输入到id="fmUserName". c的input框中。

aria-label做了大致相同的事情，但它适用于那些在屏幕上显示label不实际或不可取的情况。MDN的例子:

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

大多数人可以直观地推断出这个按钮将关闭对话框。使用辅助技术的盲人可能只听到“X”被大声念出来，如果没有视觉线索，这没有多大意义。aria-label显式地告诉它们按钮将做什么。

小开

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

如果aria-label是一种辅助技术(如屏幕阅读器)使用的工具，它在浏览器上不受本地支持，对它们没有任何影响。它对WCAG所针对的大多数人(屏幕阅读器用户除外)没有任何帮助，例如智力残疾的人。

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

尽管事实上W3C似乎在这里提倡aria-label而不是title属性:在一个类似的例子中，你可以看到技术支持不包括标准浏览器: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>
小开

如果你想知道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 ..

我希望你现在得到了它!!

小开

先决条件:

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

艾瑞亚在视觉上没有改变任何东西。(Aria也害怕设计师)。

aria-label

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

如何使用:

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

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

aria-labelledby

aria-label和aria- labledby都用于传递标签。但是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">
小开

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

因此，这里的正念方法是为所有用户服务。我会同时添加title和aria-label属性(服务于不同类型的用户和不同类型的web使用)。

下面是一篇解释aria-label在深度的好文章

小开

作为一个侧面的回答，值得注意的是:

  • ARIA通常用于提高屏幕阅读器的可访问性。 (not only but most atm.)
  • 使用ARIA不一定会让事情变得更好!容易如果没有正确地实现和测试ARIA，可能会导致可访问性显著降低。不要使用ARIA只是为了在代码中添加一些“很酷的东西”。你并不完全了解。遗憾的是，ARIA实现在可访问性方面带来的问题往往多于解决方案。这是相当常见的，因为视力正常的用户和开发人员不太可能在屏幕阅读器的大量测试中投入额外的精力，而另一方面，ARIA规范和验证器目前还远远不够完美，在某些情况下甚至令人困惑。最重要的是，每个浏览器和屏幕阅读器都不一致地实现ARIA支持，从而导致行为中的主要不一致。通常，当不清楚ARIA到底是做什么的，它是如何行为的，并且它不会被所有屏幕阅读器和浏览器(或至少最常见的组合)密集测试时，完全避免ARIA是更好的主意。免责声明:我的意图不是羞辱ARIA，而是它糟糕的ARIA实现。事实上，HTML5并没有提供任何其他实现ARIA将为可访问性带来显著好处的替代方案，例如aria-hidden或aria-expanded，这并不罕见。但前提是正确地实现和测试!
小开

我相信你不应该使用它，除非你知道你在做什么，你要检查如何在aria支持的设备上。不要以解决问题为借口带来问题!🙃残障人士会感谢你


提交答案