推特引导程序ARIA

Question

有一个模态代码。来自Twitter引导的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用于改善视障用户的用户体验。视障用户使用屏幕阅读器软件（如JAWS、NVDA、...）在应用程序中导航时，屏幕阅读器软件会向用户宣布内容。Aria可用于在代码中添加内容，帮助屏幕阅读器用户了解控件的角色、状态、标签和目的

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

角色

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

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

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

有关角色的详细信息https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

咏叹调标签

aria-tag和aria-labelledby都用于传达标签。但是aria-labelledby可以用来引用页面中已经存在的任何标签，而aria-tag用于传达不直观显示的标签

例如：

<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的值与

Aria-隐藏：

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

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

例如：

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

在上使用aria-隐藏="true"

Answer 2

ARIA代表可访问的富Internet应用程序http://www.w3.org/TR/wai-aria/

Answer 3

ARIA或可访问的富Internet应用程序是添加到超文本标记语言中的属性，以帮助屏幕阅读器理解页面的上下文。

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

角色对话框表示元素的特定角色。按MDN

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

aria-隐藏="true"向屏幕阅读器指示

该元素及其所有子元素对于作者实现的任何用户都是不可见或不可感知的。

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