Bootstrap 中的“aria-desiredby”和“aria-hidden”属性如何工作？

Question

我在 Bootstrap 的很多地方都找到了这些属性，但我不清楚它们是如何工作的。

Answer 1

先决条件：

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

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

咏叹调描述者

aria-describeby 用于传达除标签之外的控件的附加信息。 aria-scribedby 可用于各种目的，例如错误消息、工具提示、附加控制指令。

如何使用

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

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

aria-scribedby 与包含错误消息的

<span>

的 id 值具有相同的值。当电子邮件控件收到焦点、标签、控件类型时，会向用户宣布错误消息。在这种情况下，屏幕阅读器会读出“电子邮件编辑字段”，并在暂停后显示“错误：无效的电子邮件地址”

咏叹调隐藏：

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

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

例如：

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

在

<i>

上使用 aria-hidden = "true" 可以向屏幕阅读器用户隐藏内容，而应用程序中没有视觉变化。

Answer 2

要隐藏 aria-labelledby，您可以使用

document.querySelector('[aria-labelledby="anyidvalue"]').classList.add("hide");

CSS ::

.hide{
  display:none;
}