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 19, 2012 11:46AM


I'm using the same versions as well. I have tested the classes we mentioned
earlier with overflow:hidden, and I'm seeing all of the content as before.

I use the same technique within AccDC which includes overflow:hidden, and
have tested this in JAWS 11 through 14 using IE8-9 and Firefox and Chrome,
plus NVDA using IE8-9 and Firefox and Chrome, and using Voiceover in iOS
Safari with equal success.

If removing overflow:hidden causes an issue to occur, doesn't this suggests
that it should not be removed?

----- Original Message -----
From: "GILLENWATER, ZOE M" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, November 19, 2012 10:22 AM
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text


NVDA latest and Firefox (all versions I had), and JAWS 13 with Firefox 16.
Others were fine with overflow there, but like I said, they were also
totally fine if I removed overflow. I could find no problems with removing
the overflow declaration save for the WebKit partially-hidden-link focus
outline issue I described.

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 Bryan Garaventa
Sent: Monday, November 19, 2012 12:38 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text

Can you elaborate on which browser/screen reader combinations don't work
with overflow:hidden?

----- Original Message -----
From: "GILLENWATER, ZOE M" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, November 19, 2012 7:29 AM
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text


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