几个小时前,我读到了aria-label属性,该属性是:


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


但是在我看来,这就是title属性应该执行的操作。我在Mozilla开发人员网络中进一步查找了一些示例和说明,但是我发现的唯一结果是
假设我误解了这个想法)。我在jsfiddle中在这里尝试过。

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

评论

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

fyi ARIA =可访问的富互联网应用程序

没有人知道当

元素内的实际可见文本太简短并且不希望使全文可见时,使用aria-label来描述更具描述性的

文本是否合适?在该线程的示例中,可以使用标签。但是标签不适用于标题,这就是为什么我问

您所要求的唯一适当的相似内容是需要更多信息的“ longdesc”属性(仅用于图像)-无法想象会有一个文本,因为无论如何我应该总是描述性的。 -@HelloWorld

@HelloWorld我说在

上设置它不是一个好主意。通常在非交互式元素上,aria-label被忽略。在内部使用视觉上隐藏的跨度,甚至为所有用户使用相同的描述性文字。想象一下一个场景,一个盲人用户想向有视力的人展示一些东西,说“你看到带有'xxx'文本的标题了吗?”有视力的人看不到它,因为它是隐藏的。 aria-label的其他问题可能是页面翻译时无法翻译,或者用Ctrl + F搜索无法访问,而盲人用户通常会这样做以加快导航速度

#1 楼

此属性旨在帮助辅助技术(例如屏幕阅读器)将标签附加到否则为匿名的HTML元素上。

因此存在<label>元素:
<label>明确告诉用户在input框中键入他们的名字。屏幕上显示id="fmUserName"。以MDN为例:

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


大多数人都可以直观地推断出此按钮将关闭对话框。使用辅助技术的盲人可能只会听到“ X”声,如果没有视觉提示,这没有多大意义。 aria-label明确告诉他们该按钮将执行的操作。

评论


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

–萨尔瓦多·达利(Salvador Dali)
2014-2-26在11:57

我想像ChromeVox这样的扩展程序是一个不错的起点吗?我从来没有用过。他们通过向用户大声阅读屏幕,从HTML中获取提示来进行工作(例如,h1应该比ap更加强调,a显然是一个链接,表单`表示在某处输入信息,aria- *属性为进一步提示元素等等)。

–奥利·霍奇森(Olly Hodgson)
14年2月26日在13:08

在这种情况下,我将其添加到title属性。在用户悬停X时向他们“看到”用户显示工具提示没有什么害处。

– GolezTrol
15年8月17日在15:56

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

– ivarni
15-10-12在7:20



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

–拉胡尔(Rahul J. Rane)
19年5月21日在13:08

#2 楼

在您给出的示例中,您完全正确,必须设置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>


评论


@HrvojeGolcic这正是我的回答:ARIA仅适用于屏幕阅读器,不会帮助其他用户,因此有必要为所有用户提供替代方法。如果您已经有了自己的答案,则无需在每个答案下方评论。

–亚当
20年7月18日在14:28

答案是说您必须设置title属性,恕我直言,我不会说我的评论是做什么的。我不会拒绝答案,而是要发表评论以确保人们清楚地理解差异。我认为留下评论,教育并使可访问的网络成为一个更好的地方不会伤害任何人。真的没什么私人的。

– Hrvoje Golcic
20年7月18日在15:05

以“强烈不同意!”发表评论改写这个职位是不好的礼节。我的答案中的所有内容都清楚地表明,“ X”不是一个好的文字,但是由于这是所要提出的问题,因此在我的答案下无需对此进行回答。没什么私人的,只是不好的礼节。

–亚当
20年7月18日在22:10

#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屏幕阅读器插件添加

安装完成后,戴上耳机,打开html页面,然后将焦点集中在两个按钮上(按按选项卡)一对一..您会听到..专注于first x button ..只会告诉您x button ..但如果是second x button ..您只会听到back to the page button ..我希望你现在一切都好!

评论


重要的一点是,即使在第一个按钮上,标题属性也将被忽略。更多信息:Silktide.com/…

– Sphinxxx
16年6月26日在23:04

还是这样吗?还是提供标题和aria标签?

–卡马羽
18-3-15在13:03



这正是我想要的。我只是想看看和听到它在现实世界中是如何工作的,而chromevox就像一种魅力一样工作,并且会背诵咏叹调标签的字段。谢谢。

–拉伊·拉杰什瓦尔·辛格·拉索尔(Raj Rajeshwar Singh Rathore)
18年8月22日在17:32

#4 楼

先决条件:

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

Aria不会在视觉上进行任何更改。 (Aria也害怕设计师)。

aria-label

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

如何使用:

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


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

aria-labelledby

aria-label和aria-labelledby都用于传达标签。但是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">


#5 楼

当鼠标悬停元素时,title属性显示工具提示。尽管这是一个很好的补充,但它不能帮助无法使用鼠标的人(由于行动不便)或看不到此工具提示的人(例如:视觉障碍者或使用屏幕阅读器的人)。 br />
照这样,此处注意的方法是为所有用户提供服务。我将同时添加titlearia-label属性(服务于不同类型的用户和不同类型的Web使用)。

这是一篇很好的文章,深入介绍了aria-label

评论


请记住,aria标签几乎只对屏幕阅读器可见。正如您对不使用鼠标的人所说的那样,标题将不可用。这包括智能手机用户。实施一个适用于所有用户的自定义工具提示解决方案将是一件好事,该解决方案可以带/不带鼠标,也可以带屏幕阅读器,例如Bootstrap提供什么

– Hrvoje Golcic
20 Jul 18'11:37



#6 楼

附带说明一下,值得注意的是:


ARIA通常用于改善屏幕阅读器的可访问性。 (不仅是atm,而且主要是atm。)

使用ARIA不一定会使事情变得更好!如果未正确实施和测试,ARIA很容易导致可访问性大大降低。不要使用ARIA只是为了让您理解一些“很酷的代码”。令人遗憾的是,在可访问性方面,ARIA实现经常引入比解决方案更多的问题。这是相当普遍的,因为有视力的用户和开发人员不太可能在屏幕阅读器上进行广泛的测试,而另一方面,ARIA规范和验证程序目前还不完善,甚至在某些情况下令人困惑。最重要的是,每个浏览器和屏幕阅读器都实现了对ARIA支持的不一致,从而导致行为上的重大不一致。通常最好的方法是,在不清楚ARIA的功能,行为方式并且不对所有屏幕阅读器和浏览器(或至少是最常见的组合)进行严格测试时,完全避免使用ARIA。免责声明:我的意图不是贬低ARIA,而是贬低ARIA的不良实现。实际上,在实施ARIA会为可访问性带来重大好处的情况下,HTML5不提供任何其他替代方案并不少见。 aria-hiddenaria-expanded。但是,只有在正确实施和测试的情况下!