Screen Reader Hidden Content Test

The purpose of this page is to test whether screen readers support various approaches at hiding text. This page includes several sections, each consisting of an h2 heading and a "hidden" paragraph. The paragraph is hidden using the technique described by the heading.

Test #1: Visibility:Hidden

This text is hidden using visibility:hidden

Test #2: Display:None

This text is hidden using display:none

Test #3: Positioned off screen

This text is positioned off-screen

Test #4: Clipped

This text is clipped

Test #5: HTML5 Hidden

Test #6: aria-hidden

Test #7: role="presentation"

This is the first item in a list marked with role="presentation"
This is the second item in the same list

Test #8: height and width of 0 with overflow:hidden

This text is hidden with width and height of 0

Test #9: line-height:0

This text is hidden with line-height:0

Test #10: font-size:0

This text is hidden with font-size:0

Aria-LabelledBy Test

Each of the following three buttons includes an aria-labelledby attribute, pointing to each of the hidden paragraphs. If a screen reader reads each additional label text for each button, we know that the screen reader can access aria-labelledby content regardless of how that content is originally hidden.

Observations (updated April 2015)

Note regarding role="presentation": This ARIA role is expected to hide structure, not content. Therefore, the test for this method is a little different: The two items in the list marked with role="presentation" are expected to be read, but not identified as a list.

Screen reader	visibility:hidden	display:none	Off screen	Clipped	HTML5 hidden	aria-hidden	role="presentation"	Zero height & width	line-height:0	font-size:0
JAWS 16 in IE11	Hidden	Hidden	Not hidden	Not hidden	Hidden	Hidden	Structure hidden	Not hidden	Hot hidden	Not hidden
NVDA 2015.1 in FF 36	Hidden	Hidden	Not hidden	Not hidden	Hidden	Hidden	Structure not hidden	Not hidden	Hot hidden	Not hidden
Window-Eyes 9.0 in IE11	Hidden	Hidden	Not hidden	Not hidden	Hidden	Hidden	Structure hidden	Not hidden	Hot hidden	Not hidden
VoiceOver in Mac OS X Safari (Yosemite)	Hidden	Hidden	Not hidden	Not hidden	Hidden	Hidden	Structure hidden	Hidden	Hidden	Hidden
VoiceOver in iOS 8	Hidden	Hidden	Not hidden	Not hidden	Hidden	Hidden	Structure hidden	Not hidden	Hot hidden	Not hidden

Results of aria-labelledby test

Neither JAWS 15 nor 16 seems to support aria-labelledby on buttons in IE11. In Firefox 36.x, both of these versions of JAWS announce all aria-labelledby labels
NVDA 2015.1 in FF 36 announces all aria-laballedby labels
Window-Eyes 9.0 in IE11 announces all aria-labelledby labels except the one marked role="presentation"
VoiceOver in Mac OS X Safari (Yosemite) announces all aria-labelledby labels
VoiceOver in iOS 8 announces all aria-labelledby labels