WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using the Clip CSS property to visually hide text

for

From: Scott González
Date: Nov 15, 2012 4:15PM

This is also used by HTML5 Boilerplate and jQuery UI:

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

Using just clip can cause scrollbars in some browsers if the content is
large. There's a great article explaining the various other techniques and
their drawbacks at
http://snook.ca/archives/html_and_css/hiding-content-for-accessibility


On Thu, Nov 15, 2012 at 5:36 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

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