WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Hiding text using CSS

for

From: julian.rickards@ndm.gov.on.ca
Date: Feb 25, 2004 1:02PM

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 REMOVED> ]
> Sent: Wednesday, February 25, 2004 2:34 PM
> To: <EMAIL 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/