Twitter Bootstrap ARIA

Question

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">&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>

What exactly does mean role="dialog" aria-labelledby="myModalLabel" aria-hidden="true?

What exactly does it do?

No need for me to copy paste here so there you go: http://stackoverflow.com/a/18664038/1109883 — Catalin MUNTEANU, May 22 '14 at 19:04

score 4 · Accepted Answer · answered May 22 '14 at 19:37

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.

score 0 · Answer 2 · answered May 22 '14 at 19:26

0

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

answered May 22 '14 at 19:26

Joshua

3,615
1
26
32

Don't say. I would know what does it do in this case. – Michal Sipek May 22 '14 at 19:27

score 0 · Answer 3 · answered Apr 26 '19 at 18:31

Prerequisite:

Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control

Aria does not change anything visually. (Aria is scared of designers too).

role

role attribute is used to communicate the type of element to screen reader users.

role = "button" communicates to screen reader users that it is a button.

role = "dialog" communicates to screen reader users that it is a modal dialog.

More on roles https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

aria-labelledby

Both aria-label and aria-labelledby is used to communicate the label. But aria-labelledby can be used to reference any label already present in the page whereas aria-label is used to communicate the label which is not displayed visually

Eg:

<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>

When modal dialog box receives focus, "Modal title" is announced to screen reader users. aria-labelledby has value same as the id value of <h4> making the label of dialog box to content in <h4>

aria-hidden:

aria-hidden attribute is used to hide content for visually impaired users who navigate through application using screen readers (JAWS, NVDA,...).

aria-hidden attribute is used with values true, false.

Eg:

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

using aria-hidden = "true" on the <i> hides content to screen reader users with no visual change in the application.

Twitter Bootstrap ARIA

3 Answers3