html - "aria-describedby"和 "aria-hidden"属性如何在 Bootstrap 中工作?

标签 html css twitter-bootstrap

我在 bootstrap 的很多地方都找到了这些属性。我在 google 中搜索了它们并询问了很多人。但是找不到合适的答案。

虽然我在这个网站上找到了一些关于“aria-hidden”的答案,但我还是不清楚。所以,如果有人向我描述“aria-hidden”和“aria-discribedby”,那将会很有帮助。

最佳答案

先决条件:

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

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

咏叹调描述者

aria-describedby 用于传达除标签之外的控件的附加信息。 aria-describedby 可用于多种用途,如错误消息、工具提示、附加控制说明。

如何使用

<label for  = "email"> Email </label>
<input type = "text" id = "email" aria-describedby = "email-error"> 

<span id = "email-error"> Error: Invalid Email Address </span>

aria-describedby 的值与<span> 的id 值相同包含错误信息。当电子邮件控件接收到焦点、标签、控件类型时,将向用户宣布错误消息。在这种情况下,屏幕阅读器会宣布“电子邮件编辑字段”,并在暂停后显示“错误:电子邮件地址无效”

aria-hidden:

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

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

例如:

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

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

关于html - "aria-describedby"和 "aria-hidden"属性如何在 Bootstrap 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32196881/

相关文章:

javascript - .fillStyle 不起作用,我的代码有问题吗?或者 Canvas 的 .fillStyle 的任何替代品?

html - 2 contentEditable 容器在彼此内部;可能的错误?

css - 如何在 Yii2 中注册小部件 Assets ?

html - 如何制作垂直对齐文本的列表?

javascript - Bootstrap Slider 从同一点开始,同时更改主

javascript - 试图根据当前背景更改背景颜色 : background color has no value

javascript - 覆盖不同页面上的javascript函数

javascript - 删除在 div 外部单击的功能

css - twitter bootstrap 不会改变我的风格

css - 我的 CSS 在 "sails lift --prod"时无法正常工作,就像在 "sails lift"时一样