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 20, 2012 7:06AM

Bryan,

Thanks for testing my page. As I've said, the issue only occurs with labels, so you may be misunderstanding me. You'll certainly hear lots of the content with overflow:hidden (and the other CSS) applied. But once you apply it to a label, you won't hear it in NVDA and Firefox.

On http://zomigi.com/test/hiding-revised.html, if you jump down to the first form field (shortly after the <h2> "The following tests all use overflow:hidden in the CSS"), it has a label saying "Year" hidden with CSS that includes overflow:hidden, so you will not hear "Year" for this field while using NVDA and Firefox. The next two fields are labeled "Month" and "Day" but will also not have their labels spoken in NVDA/FF.

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 5:22 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text

I tried both, and am seeing the hidden content using JAWS13 and NVDA with no
problems in both sections of your test page.

I'm not sure why you aren't seeing the content with overflow:hidden, but
this sounds like a quirk and not a general policy, since overflow is often
used within various element types to control content flow.

For example, can you see the content of a visible element that includes
overflow:hidden?

E.G

<div style="position:absolute; overflow:hidden;">
Test Me
</div>

If you can, then add each property until you find the one that makes the
content stop being recognized within your screen reader.

This should isolate where the conflict is occurring.

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


Hi Bryan,

I totally understand the need to have an across-the-board class that you can
use in any scenario. I personally am completely comfortable not adding the
overflow:hidden even on an as-needed basis, since it's such a minor visual
issue that will hardly ever occur. But I mention it in the interest of full
disclosure and to appease very picky designers. ;)

I've read the article that you link to and have not seen any scrollbars
appear on removing overflow:hidden. I think the width and height
declarations Jonathan added took care of the problem he described, and the
overflow is just one of those "extra insurance" pieces of CSS that sometimes
gets added and isn't really needed.

Out of curiosity, did you try the test page I created, or your own pages?

Thanks,
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 3:21 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text

That is strange, I wonder if this has anything to do with browser or OS
config somehow. Does this happen on multiple computers?

When I was researching the hidden text class for AccDC, I needed something
that could be implemented in a scalable manner without any knowledge of what
type of content would be included within the hidden sections; which could be
static elements or active elements or a combination thereof.

So I ended up basing this on the research article at
http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
as Scott mentioned previously, which helps explain the various reasons
behind the use of overflow.


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


I don't know what to tell you. I don't hear labels in those browsers when
overflow:hidden is present, but removing it fixes it.

The ONLY thing that overflow:hidden prevents, based on my testing, is that
if I have a link with a span inside with the hiding class on it, then the
focus outline around that link in WebKit browsers will display as a jagged
box instead of a four-sided rectangle. This problem is so ridiculously minor
compared to the problem of not hearing a label for a form field that I think
it's foolish to suggest that we include CSS across the board to solve it.
Far more logical to add that CSS only when you have a link with a span
inside that you want to hide.

Have you found any other benefit to including overflow:hidden? I asked
Theirry Koblentz about this last month over Twitter and he couldn't provide
me with any rationale for it either.

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 1:47 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Using the Clip CSS property to visually hide text

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