back to HTML5 Accessibility Chops: hidden and aria-hidden support on the UP!

Screen reader support for hidden content

last modified 03/12/2013

Software used for testing

Results:

screen reader support for various methods of hiding content
test expected behavior JAWS 15 + Firefox 25 JAWS 15 +IE 11 JAWS 15 + Chrome 31 NVDA 2013 + Chrome 31 NVDA 2013 + Firefox 25 NVDA 2013 + IE 11 Voice Over Mac OSX Mavericks + Safari 7 Voice Over iOS + Safari 7 Chrome Vox Chrome OS 31 Orca 3.4.2 Epiphany 3.4.1/ Webkit 1.8.3 + Orca 3.4.2, Firefox 24, Ubuntu 12.04 Talkback, Android 4.4, Chrome 31 Talkback, Android 4.4 + Firefox 25
1. aria-hidden content visible on screen ignored by screen reader Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Fail Pass Pass
2. html5 hidden content hidden (in supporting browsers) and ignored by screen reader Pass Pass Pass Pass Pass Pass Pass Pass Pass 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 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 Pass Pass Pass
5. HTML5 hidden aria-hidden=false content hidden (in supporting browsers) and announced by screen reader Fail Pass Fail Fail Fail Fail Fail Fail Pass Fail Fail Pass Fail
6. CSS display:none aria-hidden=false content hidden (in supporting browsers) and announced by screen reader Fail Pass Fail Fail Fail Fail Fail Fail Pass Fail Fail Pass Fail
7. CSS off screen aria-hidden=true content hidden (in supporting browsers) and ignored by screen reader Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Fail Pass Pass
8. HTML5 hidden aria-hidden=false on child element content hidden (in supporting browsers) and ignored by AT. Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass

Tests

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>

test 8 HTML5 hidden aria-hidden=false on child element

code

<p id="h" hidden><span aria-hidden="false">patrick is a knob</span> test 8 html5 hidden aria-hidden="false" on child element;</p>