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

What are these attributes: `aria-labelledby` and `aria-hidden`

提问by Hao

Using Bootstrap modal, I've seen these ariaattributes a lot, but I never knew how to make use of them.

使用 Bootstrap modal，我已经看到aria了很多这些属性，但我从来不知道如何使用它们。

Does anyone know what cases to use these attributes? I googled—just didn't find any straightforward answers.

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

采纳答案by Praveen

HTML5 ARIAattribute is what you're looking for. It can be used in your code even without bootstrap.

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

Accessible Rich Internet Applications (ARIA)defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities.

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

To be precise for your question, here is what your attributes are called as ARIA attribute states and model

为了准确回答您的问题，这里是您的属性称为ARIA 属性状态和模型

aria-labelledby: Identifies the element (or elements) that labels the current element.

aria-hidden (state): Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

aria-labelledby：标识标记当前元素的元素（或多个元素）。

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

回答by wittjeff

The primary consumers of these properties are user agents such as screen readers for blind people. So in the case with a Bootstrap modal, the modal's divhas role="dialog". When the screen reader notices that a divbecomes visible which has this role, it'll speak the label for that div.

这些属性的主要消费者是用户代理，例如盲人的屏幕阅读器。因此，在与引导模式的情况下，模态的div有role="dialog"。当屏幕阅读器注意到div具有此角色的a变为可见时，它会说出该 的标签div。

There are lots of ways to label things (and a few new ones with ARIA), but in some cases it is appropriate to use an existing element as a label (semantic) without using the <label>HTML tag. With HTML modals the label is usually a <h>header. So in the Bootstrap modal case, you add aria-labelledby=[IDofModalHeader], and the screen reader will speak that header when the modal appears.

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

Generally speaking a screen reader is going to notice whenever DOM elements become visible or invisible, so the aria-hiddenproperty is frequently redundant and can probably be skipped in most cases.

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

回答by deepak samantaray

aria-hidden="true"will hide decorative items like glyphicon icons from screen readers, which doesn't have meaningful pronunciation so as not to cause confusions. It's a nice thing do as matter of good practice.

aria-hidden="true"将对屏幕阅读器隐藏诸如字形图标之类的装饰性项目，这些项目没有有意义的发音，以免引起混淆。作为良好实践的问题，这是一件好事。

回答by Harry Bosh

ARIA does not change functionality, it only changes the presented roles/properties to screen reader users. WebAIM's WAVE toolbaridentifies ARIA roles on the page.

ARIA 不会更改功能，它只会更改为屏幕阅读器用户呈现的角色/属性。 WebAIM 的 WAVE 工具栏标识页面上的 ARIA 角色。

回答by ndioewbnc

Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control

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

Aria does not change anything visually. (Aria is scared of designers too).

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

aria-hidden:

咏叹调隐藏：

aria-hidden attribute is used to hide content for visually impaired users who navigate through application using screen readers (JAWS, NVDA,...).

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

aria-hidden attribute is used with values true, false.

aria-hidden 属性与值 true、false 一起使用。

How To Use:

如何使用：

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

using aria-hidden = "true" on the <i>hides content to screen reader users with no visual change in the application.

在<i>隐藏内容上使用 aria-hidden = "true"屏幕阅读器用户，应用程序中没有视觉变化。

aria-label

咏叹调标签

aria-label attribute is used to communicate the label to screen reader users. Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users

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

How To Use:

如何使用：

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

There is no visual change in application. But screen readers can understand the purpose of control

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

aria-labelledby

咏叹调

Both aria-label and aria-labelledby is used to communicate the label. But aria-labelledby can be used to reference any label already present in the page whereas aria-label is used to communicate the label which i not displayed visually

aria-label 和 aria-labelledby 都用于传递标签。但是 aria-labelledby 可用于引用页面中已存在的任何标签，而 aria-label 用于传达我未在视觉上显示的标签

Approach 1:

方法一：

<span id = "sd"> Search </span>

<input type = "text" aria-labelledby = "sd">

aria-labelledby can also be used to combine two labels for screen reader users

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

Approach 2:

方法二：

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

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

<input type = "text" aria-labelledby = "de sd">