VoiceOver and 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) http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden.

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.

$(".modal").watch({ 
    properties: "display",
    callback: function(){
        if (this.style.display == 'block') {
            $(this).removeAttr("aria-hidden");
        }
    }
});