bootstrap modal close button aria-hidden=true

Question

As per the bootstrap document, adding aria-hidden="true" tells assistive technologies to skip the modal's DOM elements, which explains the presence of aria-hidden=true in the main modal div.

What's the purpose of adding aria-hidden=true for the modal close button in the modal-header div ?

<!-- Modal -->
<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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Mezzorelievo

Answer 1

ARIA Attributes are used to make the web more accessible to those with disabilities, particularly those using screen readers. With the benefit of sight, we can see that the × (x) symbol is being used as an 'X', indicating that if you click on it the modal will close. For someone using a screen reader, if the modal is set up appropriately:

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

When a screen reader goes over this code, it will read simply read "Close Button".

---

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>

Both of these will lead to the same result when read by the screen reader, it saying "Close Multiplication Symbol Button" or something to that effect.

---

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

In this last case, adding aria-hidden="true" to the button itself will make the screen reader ignore the entire close button, forcing the user to continue reading to the footer before finding the close button (If there is a close button in the footer, if there isn't, they are going to have a hard time closing it)

The functionality for the typical web user is the same in all these examples, but for a segment of the population, taking care and consideration in the design, layout, and tag placement could be the difference between a website frequently visited and a website never visited again.

I know I kind of went off topic here, but when using aria-attributes, just pretend you are running a screen reader and visually see the content, content that can only be understood visually should have aria-hidden tags on it, and the ARIA tag system provides many more types of tags for providing additional information to those who need it, including having elements visible only to screen readers.

For more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Horeb

Answer 2

The purpose of the aria-hidden on the close button is that in that markup the "X" or "times"-symbol won't tell screen readers much.

To make it accessible the close button should look something like this:

<button type="button" title="Close">
  <span aria-hidden="true">&times;</span>
  <span class="hide">Close</span>
</button>

And visually hide the .hide content with CSS.

Tusche

hallo @Daniel ,i just want to ask you why use aria-hidden ?if i remove it than also its work as it is. – Gemology

We use aria-hidden to hide the X / × so screen readers won't announce "x" or "times", and add the visually hidden text "Close" so screen readers have an appropriate label for the button. – Brader

Answer 3

Not sure if this was answered however i recently had this issue and this was my answer, hope it helps.

a close button could look like this

 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;    </button>

or

<button type="button" class="close" data-dismiss="modal">&times;</button>

Moise

Answer 4

@Daniel Grandson's answer should be the accepted answer.

just to add a little something: Bootstrap also provides the sr-only class to hide "accessibility" elements.

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>

@Gode Agarunov - Thanks for your very informative answer and aria-label. I Think it makes more sense to add an element for accessibility rather than nesting a new element to the existing one.

Carpometacarpus