WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using the Clip CSS property to visually hide text

for

From: GILLENWATER, ZOE M
Date: Nov 19, 2012 8:29AM

I would recommend removing the "overflow:hidden" part of the rule. I've found that when it's included as part of the hiding CSS on a <label>, it can cause the label to not be read out in certain browser/screen reader combinations. And I've found that the only benefit of including it is that it fixes some weirdness of the focus outline in WebKit browsers if you're using the hiding class on a span inside a link. I'd add it only in this case and keep it out in all other cases.

Here's a test page I created with and without overflow on the hiding CSS:
http://zomigi.com/test/hiding-revised.html

Zoe

Zoe Gillenwater
Web Accessibility Technical Architect
AT&T Consumer Digital Experience

o: 919-241-4083
e:   <EMAIL REMOVED>

4625 Creekstone Dr | Durham, NC 27703

This email and any files transmitted with it are AT&T property, are confidential, and are intended solely for the use of the individual or entity to whom this email is addressed.  If you are not one of the named recipient(s) or otherwise have reason to believe that you have received this message in error, please notify the sender and delete this message immediately from your computer.  Any other uses, retention, dissemination, forwarding, printing, or copying of this email is strictly prohibited.


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Scott González
Sent: Thursday, November 15, 2012 6:16 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text

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