logo标签列表

这些属性是什么：`aria-labelledby`和`aria-hidden`。

twitter-bootstraptwitter-bootstrap-3wai-aria
280
使用Bootstrap模态框时，我经常看到这些aria属性，但我从未知道如何利用它们。
有人知道什么情况下要使用这些属性吗？我搜过谷歌，但没有找到简单明了的答案。
5个回答
255

HTML5 ARIA 属性是您需要寻找的内容，即使没有使用 Bootstrap，也可以在您的代码中使用。

可访问丰富互联网应用程序（ARIA）定义了使Web内容和Web应用程序（特别是使用Ajax和JavaScript开发的应用程序）对残障人士更加易于访问的方法。

为了精确回答您的问题，以下是您需要的属性称为ARIA属性状态和模型：

aria-labelledby: 标识标签当前元素的元素（或元素）。

aria-hidden (state): 表示该元素及其所有后代对任何用户都不可见或可感知，如作者所实现的那样。

81
这些属性的主要消费者是诸如盲人用的屏幕阅读器之类的用户代理。因此，在Bootstrap模态框的情况下，模态框的
具有role="dialog"。当屏幕阅读器注意到一个具有此角色的
变得可见时，它将会朗读该
的标签。
有很多给事物贴标签的方法（以及一些使用ARIA的新方法），但在某些情况下，使用现有元素作为标签（语义标签）而不使用HTML标签
3
在我看来，这是一个更有帮助的答案。 - amflare
21

aria-hidden="true" 属性将会隐藏装饰性物品，例如 glyphicon 图标，以避免屏幕阅读器对其进行无意义的读音，从而引起混淆。这是一种好的实践方式。

11

ARIA不改变功能，它只会更改呈现给屏幕阅读器使用者的角色/属性。 WebAIM的WAVE工具栏可以识别页面上的ARIA角色。

2
将角色和属性更改以使屏幕阅读器用户获得不同的体验，这难道不符合功能变更的定义吗？ - M. Justin
9

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

Aria不会改变任何视觉效果。（Aria也怕设计师）。

aria-hidden：

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 属性用于向屏幕阅读器用户传达标签信息。通常搜索输入框没有可视化标签（感谢设计师）。可以使用 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">

aria-labelledby也可用于为屏幕阅读器用户组合两个标签

方法2：

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接