WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using the Clip CSS property to visually hide text

for

From: Léonie Watson
Date: Nov 16, 2012 2:36AM

Birkir R. Gunnarsson wrote:
"Uptil now I have always seen and recommended manually positioning hidden
text off-screen using CSS (examples on WEbaim site and many other places)."


There's a useful article on the different techniques for hiding content
here:
http://www.nomensa.com/blog/2011/hiding-content/


Léonie.
----- Original Message -----
From: "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, November 15, 2012 2:36 PM
Subject: [WebAIM] Using the Clip CSS property to visually hide text


> 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-h
idden/
>
> 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
> > >