In our themes on WordPress.com we often hide text from screen display but still want it to remain for screen readers. Typical techniques like text-indent and absolute positioning work fine until you try to add RTL support to the theme. After adding RTL styles those techniques cause layout issues; most commonly a huge horizontal scrollbar in certain flavors of IE.
Here’s a technique I came across on Adaptive Themes (Professional Drupal themes and design services) that works really well for this situation.
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
In our testing it seems to work great across all our target browsers.
See the full post on the Adaptive Themes site: Using CSS clip as an Accessible Method of Hiding Content.
ThemeShaper 
6 responses
Good trick. Thanks for sharing! And the linked write-up is very informative.
It is interesting how having to account for both LTR and RTL helps you learn new things and understand better how user agents work.
Agreed. Accounting for RTL and proper internationalization not only make your work better for everyone, but as you say, teaches you a lot about how CSS and browsers work.
[…] Willett shared a CSS tip for theme developers on the ThemeShaper […]
Nice little tips. It WORKS. Thanks.
[…] CSS Tip: Hiding Content with Clip | ThemeShaper. Posted on: June 4th, 2011 by shawn sandyNo Comments […]
Awesome, thanks. I’m looking for exactly this for a client’s site!