WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hiding text using CSS

for

From: Paul Bohman
Date: Feb 25, 2004 3:20PM


<EMAIL REMOVED> wrote:

> (2) You commented about the TECHNIQUE 1 being invisible to some screen
> readers, what about TECHNIQUE 5?

I'm very glad you asked, because I did find that I need to make a slight
modification to make technique 5 work with Window Eyes.

I originally recommended setting the height and width to 0 pixels. This
works with JAWS and Home Page Reader. However, this does not work with
Window Eyes. If you set the height and width to 1 pixel, then the
technique works with all browsers and all three of the screen readers I
tested.

So, with that in mind, here is the code to my new revised technique:

The following code should appear in the style sheet:

.hidden
{
position:absolute;
left:0px
top:-100px;
width:1px;
height:1px;
overflow:hidden;
}

The CSS class should then be referenced from the <span> tag (or <div>
tag, or whatever tag is meant to be hidden), as shown:

<span class="hidden">This text will be hidden</span>


Note 1: You might wonder whether the 1 pixel will show up at all for
visual users. In all the browsers I tested, the text was completely
invisible, so it works as intended: the text is hidden from visual users
and exposed to screen readers.

Note 2: I tested on the following browsers:
Windows:
IE 4
IE 5
IE 5.5
IE 6
NS 7.1
Opera 6
Opera 7
Opera 7.11
Opera 7.2
Mac:
IE 5.0
Safari 1.0

Note 3: I tested the following screen readers:
Window Eyes 4.5
Jaws 5.0
Home Page Reader 3.02

--
Paul Ryan Bohman
Web Accessibility Specialist/Project Coordinator
WebAIM (Web Accessibility in Mind)
www.webaim.org
Center for Persons with Disabilities
www.cpd.usu.edu
Utah State University
www.usu.edu



----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/