Results:
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
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
patrick is a dickhead 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
patrick is a knob test 8 html5 hidden aria-hidden="false" on child
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>