Twitter 引导 ARIA

Question

有一段来自 Twitter Bootstrap 的 Modal.js 代码：

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

role="dialog" aria-labelledby="myModalLabel" aria-hidden="true 到底是什么意思？

它到底是做什么的？

Answer 1

ARIA 代表 Accessible Rich Internet Applications http://www.w3.org/TR/wai-aria/

Answer 2

ARIA 或 Accessible Rich Internet Applications 是添加到 HTML 标记以帮助屏幕阅读器理解页面上下文的属性。

在这种情况下，aria-labelledby="myModalLabel" 告诉屏幕阅读器当前元素的标签是 ID 为 myModalLabel 的元素。当关注模态并寻找关于它的用途的描述时，它将查看#myModalLabel 元素。

role="dialog" 表示元素的特定角色。每MDN

对话框通常使用覆盖放置在页面内容的其余部分之上。

aria-hidden="true" 向屏幕阅读器表明

作者实现的任何用户都看不到或感知元素及其所有后代。

如果您根据用户与应用程序的交互方式来显示和隐藏内容，这将很有帮助，这样您就可以通知屏幕阅读器某个部分不再相关。

Answer 3

先决条件：

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

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

角色

role 属性用于向屏幕阅读器用户传达元素的类型。

role = "button" 向屏幕阅读器用户传达它是一个按钮。

role = "dialog" 向屏幕阅读器用户传达它是一个模态对话框。

更多关于角色https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

aria-labelledby

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

例如：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

当模态对话框获得焦点时，会向屏幕阅读器用户宣布“模态标题”。 aria-labelledby 的值与<h4> 的id 值相同，使对话框的标签成为<h4> 中的内容

aria-hidden：

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

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

例如：

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

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