accessibility Developing for Screen Reader Users Hiding non-interactive content from visible display, still read by screen readers
Example
If you were to hide a link by setting display: none in the CSS then screen readers wouldn’t find it.
Instead, we position it absolutely, with clipping.
CSS
.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
HTML
<div class="offscreen">This text is hidden.</div>
Credit:
Steve Faulkner (Paciello Group): HTML5 Accessibility Chops: hidden and aria-hidden, 1 May 2012.
Notes by Ted Drake, on use of the off screen technique described:
Using negative position can create long scroll bars when localizing a site for a rtl language. Also, it uses CSS properties that are commonly used and easy to accidentally over-ride.
The Yahoo Accessibility Lab recommends using clip for content that should be hidden from the visual user, yet available to screen reader users. Thierry Koblentz has a great article on this technique, as well as the underlying philosophy behind using the correct CSS techniques for hiding content. Clip your hidden content for better accessibility
