WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using the Clip CSS property to visually hide text

for

From: Bryan Garaventa
Date: Nov 15, 2012 3:47PM

This is the same technique used in AccDC.

E.G

.sraCSS {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
z-index: -1000;
}

It works perfectly in all browsers that I've tested it on, including iOS
devices using Voiceover.

----- 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-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
> > >