E-mail List Archives
Thread: Using the Clip CSS property to visually hide text
Number of posts in this thread: 14 (In chronological order)
From: Birkir R. Gunnarsson
Date: Thu, Nov 15 2012 3:36PM
Subject: Using the Clip CSS property to visually hide text
No previous message | Next message →
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
From: Bryan Garaventa
Date: Thu, Nov 15 2012 3:47PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
> > >
From: Scott González
Date: Thu, Nov 15 2012 4:15PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS 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
> > > >
From: Léonie Watson
Date: Fri, Nov 16 2012 2:36AM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
Birkir R. Gunnarsson wrote:
"Uptil now I have always seen and recommended manually positioning hidden
text off-screen using CSS (examples on WEbaim site and many other places)."
There's a useful article on the different techniques for hiding content
here:
http://www.nomensa.com/blog/2011/hiding-content/
Léonie.
----- Original Message -----
From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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-h
idden/
>
> 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
> > >
From: GILLENWATER, ZOE M
Date: Mon, Nov 19 2012 8:29AM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS 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.
From: Bryan Garaventa
Date: Mon, Nov 19 2012 10:38AM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
Can you elaborate on which browser/screen reader combinations don't work
with overflow:hidden?
----- Original Message -----
From: "GILLENWATER, ZOE M" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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.
From: GILLENWATER, ZOE M
Date: Mon, Nov 19 2012 11:22AM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS 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.
From: Bryan Garaventa
Date: Mon, Nov 19 2012 11:46AM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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.
From: GILLENWATER, ZOE M
Date: Mon, Nov 19 2012 12:38PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS 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.
From: Bryan Garaventa
Date: Mon, Nov 19 2012 1:21PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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.
From: GILLENWATER, ZOE M
Date: Mon, Nov 19 2012 2:33PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS 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.
From: Bryan Garaventa
Date: Mon, Nov 19 2012 3:21PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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.
From: Jared Smith
Date: Mon, Nov 19 2012 3:33PM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | Next message →
I'm getting this same behavior in Firefox with NVDA. Label elements
that are positioned and have overflow of hidden are not being read.
This is certainly a bug. Simply applying styles of
{
position:absolute;
overflow:hidden;
}
causes the labels to be ignored. It does not seem to affect other elements.
This behavior can also sometimes be exhibited with JAWS and Firefox if
you do not follow the cardinal rule of screen reader / browser usage
which is that you must always open the browser AFTER opening the
screen reader.
Jared
From: GILLENWATER, ZOE M
Date: Tue, Nov 20 2012 7:06AM
Subject: Re: Using the Clip CSS property to visually hide text
← Previous message | No next message
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 ADDRESS 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.