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 10:38AM

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.