This post originally appeared on the Yahoo! Accessibility blog.
There's a balance between creating a clean, simple visual design and providing accessible content and functionality. One common solution is to provide text to screen readers that is hidden via CSS.
This article demonstrates how screen readers announce the various methods of hiding elements, such as labels, with CSS.
Comments on Jonathan's blog, on Adaptive Themes, and other venues, show that many developers are still confused by what does what and for whom. So let's first recap what basic declarations mean when it comes to hiding content:
Techniques that make content accessible to AT.
clip:rect(1px 1px 1px 1px);
Techniques that make content inaccessible (invisible to all users).
visibility:hidden; /* in most screen readers*/
/*in most screen readers andRead More »from Clip your hidden content for better accessibility