Click here to Skip to main content
13,005,192 members (62,566 online)
Click here to Skip to main content
Add your own
alternative version


Posted 13 Dec 2014

VoiceOver and aria-hidden="false"

, 13 Dec 2014
Rate this:
Please Sign up or sign in to vote.
VoiceOver will read hidden elements inside a parent with aria-hidden="false"

Recently, I was using Bootstrap modal in a website which should be accessible and readable via screen readers. The modal dialog contains some hidden elements (with display="none").

When the modal is shown, VoiceOver (Apple screen reader) begins reading all the dialog elements including the hidden elements! which was not expected.

It turned out that Bootstrap modal puts aria-hidden="false" to the modal when it's shown. Which makes VoiceOver read all the modal children elements including hidden ones.

As per W3C Recommendation, aria-hidden="false" is known to work inconsistently when it's used in conjunction with such features (display:none, visibility:hidden or HTML 5 hidden attribute)

The solution is just to remove the attribute aria-hidden="false" after the modal is shown.

One way to do so, using jquery-watch, to watch css display property of the modal and remove the aria-hidden="false" attribute once the display changed to block.

    properties: "display",
    callback: function(){
        if ( == 'block') {


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Adel Refaat
Australia Australia
No Biography provided

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170627.1 | Last Updated 13 Dec 2014
Article Copyright 2014 by Adel Refaat
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid