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

Question

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

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

Answer 1

先决条件:

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"在应用程序中没有视觉变化的情况下向屏幕阅读器用户隐藏内容。