The state of hidden content support in 2016
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
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
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
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.
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
Tests and results on github – issues and PR’s welcome!