WebAIM - Web Accessibility In Mind

E-mail List Archives

Hiding text using CSS

for

From: Paul Bohman
Date: Feb 25, 2004 12:42PM

A few days ago I explained a technique for hiding text from visual users
using CSS. I need to clarify this point, because my explanation was not
quite complete.

The only purpose for using these techniques at all is to provide text to
screen reader users that visual users don't need. The circumstances in
which this should be used are very limited, but there are legitimate
circumstances, which I won't enumerate in this email.

There is more than one potential technique to hide content using CSS.
Some ways are more useful than others. A list of possible methods is
explained below:

TECHNIQUE 1:
Use display:none or visibility:hidden.
RESULT:
Neither of these will solve the problem at hand because they also
succeed in hiding the content from some screen readers.

TECHNIQUE 2:
Make the text the same color as the background color and make the text
extremely small.
RESULT:
This will work for some situations, but even small text takes up space
and can ruin the layout.

TECHNIQUE 3:
Make the height and width of the text 0px, and set the overflow property
to hidden.
RESULT:
This technique works as intended in all major CSS-enabled browsers, with
the exception of older versions of Opera (6 and below.)

TECHNIQUE 4:
Use absolute positioning to place the text above the visible area of the
page.
RESULT:
This technique works as intended in all major CSS-enabled browsers
except Internet Explorer on the Mac and Internet Explorer 4.0 in Windows.

TECHNIQUE 5:
Use both Technique 3 and Technique 4.
RESULT:
This technique works as intended.

Techniques 5 is the most successful of those mentioned above because it
accounts for CSS implementation quirks in different browsers. It should
also be noted that Netscape 4.x is not defined as a "CSS-enabled
browser" because the CSS support is so flawed.* In all non-CSS browsers
(including old versions of Netscape), the text will simply appear in its
proper place. The text will not be hidden, but neither will the page
appear to be broken. Technique 5 will "degrade gracefully" in older
browsers.

*Note: CSS support in current versions of Netscape is very good.

CODE FOR TECHNIQUE 5:

The following code should appear in the style sheet:

.hidden
{
position:absolute;
left:0px
top:-100px;
width:0px;
height:0px;
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>

End result: The tag that is assigned the "hidden" class will take up no
space (it will measure 0 pixels by 0 pixels), and will be placed 100
pixels above the viewable area of the page. Developers may use 100
pixels, 200 pixels, or 10000 pixels. This is actually an arbitrary
number. The important point is that it be a negative number so that it
places the content above the top of the page.


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