Twitter Bootstrap ARIA
there is a code of Modal.js from Twitter Bootstrap:
<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">×</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>
What exactly does mean role="dialog" aria-labelledby="myModalLabel" aria-hidden="true?
What exactly does it do?
ARIA, or Accessible Rich Internet Applications, are attributes that are added to HTML markup to help screen readers understand the context of a page.
In this case, aria-labelledby="myModalLabel" is telling the screen reader that the label for the current element is the element with the id myModalLabel . When focusing on the modal and looking for a description as to what it is for, it will look to the #myModalLabel element.
The role="dialog" indicates a certain role for an element. Per MDN
dialogs are generally placed on top of the rest of the page content using an overlay.
The aria-hidden="true" indicates to the screen reader that
the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
This is helpful if you are showing and hiding content depending on how the user interacts with an application so you can inform the screen reader that a certain section is no longer relevant.
ARIA代表无障碍富互联网应用程序http://www.w3.org/TR/wai-aria/
链接地址: http://www.djcxy.com/p/36622.html上一篇: 为什么在<nav>标签中有一些未知的属性