I have reported previously on support in browsers and screen readers (SR) for aria-hidden and the HTML5 hidden attribute. The last time was 2 years ago, the orginal article
published 2 years prior in 2012 still gets lots of page views. As its a
subject that developers are interested in, so here is an update.
Support for HTML5 hidden and aria-hidden in 2016
Summary
All major browsers and screen readers:
- support the use of the hidden attribute to hide content
- support the use of the CSS display:none to hide content
- support the use of the aria-hidden attribute to hide visible content from screen reader users
The Details
Screen reader support for hidden content – tests and results for
- Windows 10
- Firefox 43
- Internet Explorer 11
- Chrome 47
- JAWS 17
- Window Eyes 9
- NVDA 2015.4
- Narrator 10
- VoiceOver on iOS 9.2.1 (iPhone 6)
- VoiceOver on OSX El Capitan
- ChromeVox on Chrome OS 47
- Orca 3.16 on Linux
Notes:
In some browser and screen reader combinations aria-hidden=false on an element that is hidden using the hidden attribute or CSS display:none results in the content being unhidden. This behaviour does not have consensus support among browser implementers and I strongly recommend, it not be used.
Why no Edge testing? The Edge browser does not yet have sufficient accessibility support for testing to be useful.
The hidden attribute hides content due to browser’s
implementation of CSS display:none on content hidden using the
attribute. If the default UA CSS is overidden, then aria-hidden=true will have to be used alongside the hidden attribute:
Tests and results on github – issues and PR’s welcome!
