275

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

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

4

5 回答 5

249

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

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

为了准确地回答您的问题，以下是您的属性被称为ARIA 属性状态和模型的内容

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

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

于 2013-09-21T13:40:26.897 回答
79

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

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

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

于 2014-04-08T21:12:20.433 回答
21

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

于 2016-06-17T10:30:14.357 回答
11

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

于 2014-12-04T00:05:21.533 回答
8

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

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

咏叹调隐藏：

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

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

如何使用： 

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

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

咏叹调标签

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

如何使用：

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

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

咏叹调-labelledby

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

方法一：

<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">
于 2019-04-26T15:39:51.673 回答