Twitter Bootstrap ARIA

2018-06-12 19:38:56

有一个来自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>

什么意思是角色=“对话”aria-labelledby =“myModalLabel”aria-hidden =“true？

它究竟做了什么？

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

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

role="dialog"表示元素的某个角色。每MDN

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

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

该元素及其所有后代对作者实施的任何用户而言都不可见或不可察觉。

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

ARIA代表无障碍富互联网应用程序http://www.w3.org/TR/wai-aria/

链接地址: http://www.djcxy.com/p/36621.html

上一篇: Twitter Bootstrap ARIA

下一篇: role="button" for <a href