WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Hiding text using CSS

for

Number of posts in this thread: 3 (In chronological order)

From: Paul Bohman
Date: Wed, Feb 25 2004 12:42PM
Subject: Hiding text using CSS
No previous message | Next message →

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/


From: julian.rickards@ndm.gov.on.ca
Date: Wed, Feb 25 2004 1:02PM
Subject: RE: Hiding text using CSS
← Previous message | Next message →

I have two comments about your techniques.

(1) Your comment about TECHNIQUE 2 was "This ... can ruin the layout." My
personal feelings are that if one truly felt obliged (personally, not
because of one's job) to apply accessibility techniques to their web site,
one should incorporate accessible features within the design.

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

Jules

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690


> -----Original Message-----
> From: Paul Bohman [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Wednesday, February 25, 2004 2:34 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Hiding text using CSS
>
>
> 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/
>


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

From: Paul Bohman
Date: Wed, Feb 25 2004 3:20PM
Subject: Re: Hiding text using CSS
← Previous message | No next message


= EMAIL ADDRESS 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/