WebAIM - Web Accessibility In Mind

E-mail List Archives

Using the Clip CSS property to visually hide text

for

From: Birkir R. Gunnarsson
Date: Nov 15, 2012 3:36PM

Hi guys

Uptil now I have always seen and recommended manually positioning
hidden text off-screen using CSS (examples on WEbaim site and many
other places).
I was reading a Yahoo! developer blog on forms and labels at
http://developer.yahoo.com/blogs/ydn/posts/2012/11/form-labels-visible-and-hidden/

and they recommend a different way, the clip property of CSS
The code goes:
Class boscure:
.obscure {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

This seems to be neat and quick, but I wonder if it has any
disadvantages or does not work for some reason, as I have never seen
this method before.
Cheers
-B