这些属性是什么:“ aria-labelledby”和“ aria-hidden”


259

使用Bootstrap模态,我已经看过aria很多这些属性,但是我不知道如何使用它们。

有谁知道在什么情况下使用这些属性?我用谷歌搜索-只是找不到任何直接的答案。

Answers:


240

您正在寻找 HTML5 ARIA属性。即使没有引导程序,也可以在代码中使用它。

可访问的富Internet应用程序(ARIA)定义了使残障人士更容易访问Web内容和Web应用程序(尤其是使用Ajax和JavaScript开发的Web应用程序)的方法。

确切地说,这就是您的属性称为ARIA属性状态和模型的含义

aria-labelledby:标识标记当前元素的一个或多个元素。

aria-hidden (state):表明作者所实现的任何用户都不知道该元素及其所有后代。


71

这些属性的主要使用者是用户代理,例如盲人的屏幕阅读器。因此,对于Bootstrap模态,该模态div具有role="dialog"。当屏幕阅读器注意到div具有此作用的a 变得可见时,它将说出那个的标签div

有很多方法来标记事物(还有一些使用ARIA的新方法),但是在某些情况下,使用现有元素作为标签(语义)而不使用<label>HTML标签是适当的。对于HTML模式,标签通常是<h>标头。因此,在Bootstrap模态情况下,您添加aria-labelledby=[IDofModalHeader],当模态出现时,屏幕阅读器会说出该标题。

一般来说,只要DOM元素变得可见或不可见,屏幕阅读器都会注意到它,因此该aria-hidden属性通常是多余的,在大多数情况下可能会被跳过。


1
这是IMO的更有用的答案。
amflare,2016年

20

aria-hidden="true"会从屏幕阅读器中隐藏诸如glyphicon图标之类的装饰物品,这些装饰物没有有意义的发音,以免引起混淆。做一个好习惯是一件好事。


9

ARIA不会更改功能,它只会将显示的角色/属性更改为屏幕阅读器用户。 WebAIM的WAVE工具栏可识别页面上的ARIA角色。


2
难道不更改角色和属性,使屏幕阅读器用户获得不同的体验是否属于功能更改的定义?
M. Justin

8

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

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

隐藏的咏叹调:

aria-hidden属性用于为使用屏幕阅读器(JAWS,NVDA等)浏览应用程序的视障用户隐藏内容。

aria-hidden属性用于值true,false。

如何使用:

<i class = "fa fa-books" aria-hidden = "true"></i>

<i>隐藏内容上使用aria-hidden =“ true”,以便屏幕阅读器用户在应用程序中不进行任何视觉更改。

咏叹调标签

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">
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.