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.
This text is hidden using visibility:hidden
This text is hidden using display:none
This text is positioned off-screen
This text is clipped
This text is hidden with the HTML5 hidden attribute
This text is hidden with width and height of 0
This text is hidden with line-height:0
This text is hidden with font-size:0
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.
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|