W3C

CSS Techniques for Web Content Accessibility Guidelines 1.0

W3C Working Draft 09 March 2000

This version:
http://www.w3.org/WAI/GL/WD-WCAG10-CSS-TECHS-20000309
(plain text, postscript, pdf, gzip tar file of HTML, zip archive of HTML)
Latest version:
http://www.w3.org/WAI/GL/WCAG10
Editors:
Wendy Chisholm, W3C,
Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison
Ian Jacobs, W3C

Abstract

This document describes techniques for satisfying the checkpoints of "Web Content Accessibility Guidelines 1.0" when using CSS ([CSS1], [CSS2]).

CSS1 allows content developers to duplicate most HTML 4.0 presentation capabilities and offer more power with less cost. However, until most users have browsers that support style sheets, not every presentation idiom may be expressed satisfactorily with style sheets. We also provide examples of how to use HTML 4.0 features (e.g., tables, bitmap text) more accessibly when they must be used.

This document is part of a series of accessibility documents published by the Web Accessibility Initiative.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.

While Web Content Accessibility Guidelines 1.0 strives to be a stable document (as a W3C Recommendation), the current document is expected to evolve as technologies change and content developers discover more effective techniques for designing accessible Web sites and pages.

This is a W3C Working Draft for review by W3C Members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or participants in the Web Content Accessibility Guidelines (WCAG) Working Group.

This document has been produced as part of the W3C Web Accessibility Initiative. The goal of the Web Content Guidelines Working Group is discussed in the Working Group charter.

A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.

Please send detailed comments on this document to wai-wcag-editor@w3.org.

To do

Table of Contents


1 Guidelines for creating style sheets

Checkpoints in this section: 14.3 and 3.4.

Here are guidelines for creating style sheets that promote accessibility:

Some examples follow.

Example.

Use em to set font sizes, as in:

   H1 { font-size: 2em }
rather than:
   H1 { font-size: 12pt }

End example.

Example.

Use relative length units and percentages.

   BODY { margin-left: 15%; margin-right: 10%}

End example.

Example.

Only use absolute length units when the physical characteristics of the output medium are known.

   .businesscard { font-size: 8pt }

End example.

Example.

Always specify a fallback generic font:

   BODY { font-family: "Gill Sans", sans-serif }

End example.

Example.

Use numbers, not names, for colors:

   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}

End example.

2 Fonts

Checkpoints in this section: 11.2.

Instead of using deprecated presentation elements and attributes , use the many CSS properties to control font characteristics: 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', and 'font-weight'.

The following CSS2 properties can be used to control font information: 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', and 'font-weight'.

Use them instead of the following deprecated font elements and attributes in HTML: FONT, BASEFONT, "face", and "size".

If you must use HTML elements to control font information, use BIG and SMALL, which are not deprecated.

Example.

<STYLE type="text/css">
   P.important { font-weight: bold }
   P.less-important { font-weight: lighter; font-size: smaller }
   H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>

End example.

3 Text style

Checkpoints in this section: 7.2.

The following CSS2 properties can be used to style text:

3.1 Text instead of images

Checkpoints in this section: 3.3.

Content developers should use style sheets to style text rather than representing text in images. Using text instead of images means that the information will be available to a greater number of users (with speech synthesizers, braille displays, graphical displays, etc.). Using style sheets will also allow users to override author styles and change colors or fonts sizes more easily.

If it is necessary to use a bitmap to create a text effect (special font, transformation, shadows, etc.) the bitmap must be accessible (see the sections on text equivalents and alternative pages).

Example.

In this example, the inserted image shows the large red characters "Example", and is captured by the value of the "alt" attribute.

<P>This is an 
   <IMG src="BigRedExample.gif" alt="example"> 
   of what we mean.
</P>

End example.

4 Text formatting

Checkpoints in this section: 3.3.

The following CSS2 properties can be used to control the formatting and position of text:

The following example shows how to use style sheets to create a drop-cap effect.

Example.

<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
      .dropcap { font-size : 120%; font-family : Helvetica } 
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>

Note. As of the writing of this document, the CSS pseudo-element ':first-letter', which allows content developers to refer to the first letter of a chunk of text, is not widely supported.

5 Colors

Checkpoints in this section: 2.1 and 2.2.

Use these CSS properties to specify colors:

Ensure that information is not conveyed through color alone. For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links).

For instance, in this document, examples are styled by default (through style sheets) as follows:

Quicktest! To test whether your document still works without colors, examine it with a monochrome monitor or browser colors turned off. Also, try setting up a color scheme in your browser that only uses black, white, and the four browser-safe greys and see how your page holds up.

Quicktest! To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are two small or indistinct to hold up well.

For more information about colors and contrasts, refer to [LIGHTHOUSE].

6 Layout, positioning, layering, and alignment

Checkpoints in this section: 3.3 and 5.3.

Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning):

6.1 If you must use images as spacers

Provide text equivalents for all images, including invisible or transparent images.

If content developers cannot use style sheets and must use invisible or transparent images (e.g., with IMG) to lay out images on the page, they should specify alt="" for them.

Deprecated example.

Authors should not use spaces for the value of "alt" to prevent the words from running together when the image is not loaded:

   my poem requires a big space<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">here

In this next example, an image is used to force a graphic to appear in a certain position:

   <IMG src="spacer.gif" alt="spacer">
   <IMG src="colorfulwheel.gif" alt="The wheel of fortune">

End example.

7 Rules and borders

Rules and borders may convey the notion of "separation" to visually enabled users but that meaning cannot be inferred out of a visual context.

Use these CSS properties to specify border styles:

Authors should use style sheets to create rules and borders.

Example.

In this example, the H1 element will have a top border that is 2px thick, red, and separated from the content by 1em:

   <HEAD>
   <TITLE>Redline with style sheets</TITLE>
   <STYLE type="text/css">
        H1 { padding-top: 1em; border-top: 2px red }
   </STYLE>
   </HEAD>
   <BODY>
   <H1>Chapter 8 - Auditory and Tactile Displays</H1>
   </BODY>

End example.

If a rule (e.g., the HR element) is used to indicate structure, be sure to indicate the structure in a non-visual way as well. (e.g., by using structural markup).

Example.

In this example, the DIV element is used to create a navigation bar, which includes a horizontal separator.

   <DIV class="navigation-bar">
      <HR>
      <A rel="Next" href="next.html">[Next page]</A>
      <A rel="Previous" href="previous.html">[Prevous page]</A>
      <A rel="First" href="first.html">[First page]</A>
   </DIV>

End example.

8 Creating style sheets that transform gracefully

Checkpoints in this section: 6.1, 7.3, and 11.3.

@@To discuss in this section:


Acknowledgments

Web Content Guidelines Working Group Co-Chairs:
Jason White, University of Melbourne
Gregg Vanderheiden, Trace Research and Development
W3C Team contact:
Wendy Chisholm
We wish to thank the following people who have contributed their time and valuable comments to shaping these guidelines:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, and Jaap van Lelieveld

The original draft of this document is based on "The Unified Web Site Accessibility Guidelines" [UWSAG]] compiled by the Trace R & D Center at the University of Wisconsin. That document includes a list of additional contributors.

References

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is http://www.w3.org/TR/1998/REC-CSS2-19980512. The latest version of CSS2 is available at http://www.w3.org/TR/REC-CSS2.
[DOM1]
"Document Object Model (DOM) Level 1 Specification", V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R. Sutor, C. Wilson, and L. Wood, eds., 1 October 1998. This DOM Level 1 Recommendation is http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001. The latest version of DOM Level 1 is available at http://www.w3.org/TR/REC-DOM-Level-1.
[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines were compiled by the Trace R & D Center at the University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

Services

Note. W3C cannot maintain stability for any of the following references outside of its control. These references are included for convenience.

[LIGHTHOUSE]
The Lighthouse provides information about accessible colors and contrasts.

Level
Triple-A conformance icon, W3C-WAI Web Content Accessibility
Guidelines 1.0