Question

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

有谁知道使用这些属性的情况？我用谷歌搜索 - 只是没有找到任何直截了当的答案。

Answer 1

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

可访问的富Internet应用程序（ARIA）定义了制作Web的方法内容和Web应用程序（尤其是那些使用Ajax和 JavaScript）更容易被残障人士使用。

准确地说，对于您的问题，您的属性称为ARIA attribute states and model

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

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

Answer 2

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

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

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

Answer 3

aria-hidden="true"会隐藏装饰物品，例如屏幕阅读器中的glyphicon图标，它们没有有意义的发音，以免引起混淆。作为良好实践的问题，这是一件好事。

Answer 4

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

Answer 5

咏叹调用于改善视障用户的用户体验。视力障碍的用户使用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标签

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

使用方法：

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

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

aria标签为

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

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

5 个答案: