back to HTML5 Accessibility Chops: hidden and aria-hidden

Screen reader support for hidden content

Software used for testing

test 1 aria-hidden

code

<p id="a" aria-hidden="true">test aria hidden</p>

test 2 HTML5 hidden

code

<p id="b" hidden>test html5 hidden</p>

test 3 CSS display:none

code

<p id="c" style="display:none">test display:none</p>

test 4 CSS off screen

test 4 position:absolute;left:-9999px

code

<p id="d" style="position:absolute;left:-9999px">test position:absolute;left:-9999px</p>


test 5 HTML5 hidden aria-hidden=false

code

<p id="e" hidden aria-hidden="false">test html5 hidden</p>

test 6 CSS display:none aria-hidden=false

code

<p id="f" style="display:none" aria-hidden="false">test display:none</p>

test 7 CSS off left aria-hidden=true

code

<p id="g" style="position:absolute;left:-9999px" aria-hidden="true">test 7 position:absolute;left:-9999px aria-hidden="true"</p>


screen reader support for various methods of hiding content
test expected behavior JAWS 13 + Firefox 11 JAWS 13 +IE 9 Window Eyes 7.5 + Firefox 11 Window Eyes 7.5 +IE 9 NVDA 2012 + Firefox 11 NVDA 2012 + IE 9 VoiceOver Mac OSX Lion + Safari VoiceOver iOS + Safari ChromeVox Chrome OS Orca + Firefox 12
1. aria-hidden content visible on screen ignored by screen reader Pass fail Fail fail fail fail Pass Pass Pass Fail
2. html5 hidden content hidden (in supporting browsers) and ignored by screen reader Pass N/A Pass N/A Pass N/A Pass Pass Pass Pass
3. CSS display:none content hidden (in supporting browsers) and ignored by screen reader Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
4. CSS off screen content hidden (in supporting browsers) and announced by screen reader Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
5. HTML5 hidden aria-hidden=false content hidden (in supporting browsers) and announced by screen reader Fail N/A Fail N/A Fail N/A Fail Fail Fail Fail
6. CSS display:none aria-hidden=false content hidden (in supporting browsers) and announced by screen reader Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail
7. CSS off screen aria-hidden=true content hidden (in supporting browsers) and ignored by screen reader Pass Fail Pass Fail Fail Fail Pass Pass Pass Fail