NOTE-WCAG10-CSS-TECHS-20001106 52.3 KB

Raw Blame History Permalink

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Techniques for Web Content Accessibility Guidelines 1.0</title>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-NOTE" />
<link rel="STYLESHEET" href="style/default.css" type="text/css" />
</head>
<body>
<div class="navbar"><map id="navbar-top" name="navbar-top"
title="Navigation Bar">
<p>[<a href="#toc">contents</a>] &nbsp;</p>

<hr class="navbar" title="Navigation area separator" />
</map></div>

<div class="head">
<p><a href="http://www.w3.org/" title="Go to W3C Home Page"><img height="48"
width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home" /></a></p>

<h1 class="notoc">CSS Techniques for Web Content Accessibility Guidelines
1.0</h1>

<h2 class="notoc">W3C Note 6 November 2000</h2>

<dl>
<dt>This version:</dt>

<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/">
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/</a></dd>

<dd>(<a href="css-techniques.txt">plain text</a>, <a href="css-techniques.ps">
PostScript</a>, <a href="css-techniques.pdf">PDF</a>, <a
href="css-techniques.tgz">gzip tar file of HTML</a>, <a
href="css-techniques.zip">zip archive of HTML</a>)</dd>

<dt>Latest version:</dt>

<dd><a href="http://www.w3.org/TR/WCAG10-CSS-TECHS/">
http://www.w3.org/TR/WCAG10-CSS-TECHS/</a> <!--
      <DT>Latest public version:
      <DD><A HREF="http://www.w3.org/TR/WCAG10-CSS-TECHS/">http://www.w3.org/TR/WCAG10-CSS-TECHS/</A>
      --></dd>

<dt>Previous version:</dt>

<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/">
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/</a></dd>

<dt>Editors:</dt>

<dd>Wendy Chisholm, <a href="http://www.w3.org/">W3C</a>;<br />
 Gregg Vanderheiden, <a href="http://www.tracecenter.org/">Trace R &amp; D
Center</a>, University of Wisconsin -- Madison;<br />
 Ian Jacobs, <a href="http://www.w3.org/">W3C</a></dd>
</dl>

<p class="copyright"><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
&copy;1999 - 2000 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
href="http://www.lcs.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.inria.fr/"><abbr lang="fr"
title="Institut National de Recherche en Informatique et Automatique">
INRIA</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights
Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">
liability</a>, <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">
trademark</a>, <a
href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">document
use</a> and <a
href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">software
licensing</a> rules apply.</p>
</div>

<hr />
<h2 class="nonb"><a id="Abstract" name="Abstract">Abstract</a></h2>

<p>This document describes techniques for authoring accessible Cascading Style
Sheets (<acronym title="Cascading Style Sheets">CSS</acronym>). Cascading Style
Sheets are defined by the W3C Recommendations "CSS Level 1" <cite><a
href="#ref-CSS1" title="Link to reference CSS1">[CSS1]</a></cite> and "CSS
Level 2" <cite><a href="#ref-CSS2" title="Link to reference CSS2">
[CSS2]</a></cite>. This document is intended to help authors of Web content who
wish to claim conformance to "Web Content Accessibility Guidelines 1.0"
(<cite><a href="#ref-WCAG10"
title="Link to reference WCAG10">[WCAG10]</a></cite>). While the techniques in
this document should help people author <acronym
title="Cascading Style Sheets">CSS</acronym> that conforms to "Web Content
Accessibility Guidelines 1.0", these techniques are neither guarantees of
conformance nor the only way an author might produce conforming content.</p>

<p>This document is part of a series of documents about techniques for
authoring accessible Web content. For information about the other documents in
the series, please refer to "Techniques for Web Content Accessibility
Guidelines 1.0" <cite><a href="#ref-WCAG10-TECHS"
title="Link to reference WCAG10-TECHS">[WCAG10-TECHS]</a></cite>.</p>

<p><strong>Note:</strong> This document contains a number of examples that
illustrate accessible solutions in CSS but also deprecated examples that
illustrate what content developers should not do. The deprecated examples are
highlighted and readers should approach them with caution -- they are meant for
illustrative purposes only.</p>

<h2 class="nonb"><a id="Status" name="Status">Status of this document</a></h2>

<p>This version has been published to correct some broken links in the previous
version.</p>

<p>The 6 November 2000 version of this document is a Note in a series of Notes
produced and endorsed by the <a href="http://www.w3.org/WAI/GL/">Web Content
Accessibility Guidelines Working Group</a> (WCAG WG). This Note has not been
reviewed or endorsed by W3C Members. The series of documents supersedes the
single document <a
href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505/">5 May 1999 W3C
Note Techniques for Web Content Accessibility Guidelines 1.0</a>. The topics
from the earlier document have been separated into technology-specific
documents that may evolve independently. Smaller technology-specific documents
allow authors to focus on a particular technology.</p>

<p>While the "Web Content Accessibility Guidelines 1.0" Recommendation <cite><a
href="#ref-WCAG10" title="Link to reference WCAG10">[WCAG10]</a></cite> is a
stable document, this series of companion documents is expected to evolve as
technologies change and content developers discover more effective techniques
for designing accessible Web content.</p>

<p>The <a href="http://www.w3.org/WAI/GL/wai-gl-techniques-changes.html">
history of changes to the series of documents</a> as well as the <a
href="http://www.w3.org/WAI/GL/wai-gl-tech-issues.html">list of open and closed
issues</a> are available. Readers are encouraged to comment on the document and
propose resolutions to current issues. Please send detailed comments on this
document to the Working Group at <a href="mailto:w3c-wai-gl@w3.org">
w3c-wai-gl@w3.org</a>; <a
href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">public archives</a> are
available.</p>

<p>The English version of this specification is the only normative version. <a
href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS">Translations of
this document</a> may be available.</p>

<p>The list of known errors in this document is available at <a
href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA">"Errata in Web Content
Accessibility Guidelines</a>." Please report errors in this document to <a
href="mailto:wai-wcag-editor@w3.org">wai-wcag-editor@w3.org</a>.</p>

<p>The <a href="http://www.w3.org/WAI/">Web Accessibility Initiative (<acronym
title="Web Accessibility Initiative">WAI</acronym>)</a> of the World Wide Web
Consortium (<acronym>W3C</acronym>) makes available a variety of resources on
Web accessibility. WAI Accessibility Guidelines are produced as part of the <a
href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</a>. The
goals of the Web Content Accessibility Guidelines Working Group are described
in <a href="http://www.w3.org/WAI/GL/new-charter-2000.html">the
charter</a>.</p>

<p>A list of <a href="http://www.w3.org/TR/">current W3C Recommendations and
other technical documents</a> is available.</p>

<!--NewPage--><!-- this is for html2ps -->
<div class="toc">
<h2 class="notoc"><a id="toc" name="toc">Table of Contents</a></h2>

<ul class="toc">
<li class="tocline2"><a id="toc-Abstract" href="#Abstract" name="toc-Abstract"
class="tocxref">Abstract</a></li>

<li class="tocline2"><a id="toc-Status" href="#Status" name="toc-Status"
class="tocxref">Status of this document</a></li>

<li class="tocline2"><a id="toc-consistency" href="#consistency"
name="toc-consistency" class="tocxref">1 Decrease maintenance and increase
consistency</a></li>

<li class="tocline2"><a id="toc-user-override" href="#user-override"
name="toc-user-override" class="tocxref">2 User override of styles</a></li>

<li class="tocline2"><a id="toc-units" href="#units" name="toc-units"
class="tocxref">3 Units of measure</a></li>

<li class="tocline2"><a id="toc-Generated" href="#Generated"
name="toc-Generated" class="tocxref">4 Generated content</a></li>

<li class="tocline2"><a id="toc-style-fonts" href="#style-fonts"
name="toc-style-fonts" class="tocxref">5 Fonts</a></li>

<li class="tocline2"><a id="toc-style-text" href="#style-text"
name="toc-style-text" class="tocxref">6 Text style effects</a></li>

<li class="tocline2"><a id="toc-text-not-images" href="#text-not-images"
name="toc-text-not-images" class="tocxref">7 Text instead of images</a></li>

<li class="tocline2"><a id="toc-style-text-formatting"
href="#style-text-formatting" name="toc-style-text-formatting" class="tocxref">
8 Text formatting and position</a></li>

<li class="tocline2"><a id="toc-style-colors" href="#style-colors"
name="toc-style-colors" class="tocxref">9 Colors</a>

<ul class="toc">
<li class="tocline3"><a id="toc-style-color-contrast"
href="#style-color-contrast" name="toc-style-color-contrast" class="tocxref">
9.1 Color Contrast</a></li>

<li class="tocline3"><a id="toc-style-info-not-in-color-alone"
href="#style-info-not-in-color-alone" name="toc-style-info-not-in-color-alone"
class="tocxref">9.2 Ensuring information is not in color alone</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-lists" href="#lists" name="toc-lists"
class="tocxref">10 Providing contextual clues in HTML lists</a></li>

<li class="tocline2"><a id="toc-style-alignment" href="#style-alignment"
name="toc-style-alignment" class="tocxref">11 Layout, positioning, layering,
and alignment</a>

<ul class="toc">
<li class="tocline3"><a id="toc-spacer" href="#spacer" name="toc-spacer"
class="tocxref">11.1 If you must use images as spacers</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-style-rules" href="#style-rules"
name="toc-style-rules" class="tocxref">12 Rules and borders</a></li>

<li class="tocline2"><a id="toc-style-transform-gracefully"
href="#style-transform-gracefully" name="toc-style-transform-gracefully"
class="tocxref">13 Using style sheet positioning and markup to transform
gracefully</a></li>

<li class="tocline2"><a id="toc-style-movement" href="#style-movement"
name="toc-style-movement" class="tocxref">14 Creating movement with style
sheets and scripts</a></li>

<li class="tocline2"><a id="toc-acss" href="#acss" name="toc-acss"
class="tocxref">15 Aural Cascading Style Sheets</a></li>

<li class="tocline2"><a id="toc-Alt" href="#Alt" name="toc-Alt"
class="tocxref">16 Access to alternative representations of content</a></li>

<li class="tocline2"><a id="toc-Media" href="#Media" name="toc-Media"
class="tocxref">17 Media types</a></li>

<li class="tocline2"><a id="toc-References" href="#References"
name="toc-References" class="tocxref">18 References</a></li>

<li class="tocline2"><a id="toc-Resources" href="#Resources"
name="toc-Resources" class="tocxref">19 Resources</a>

<ul class="toc">
<li class="tocline3"><a id="toc-OtherGuidelines" href="#OtherGuidelines"
name="toc-OtherGuidelines" class="tocxref">19.1 Other guidelines</a></li>

<li class="tocline3"><a id="toc-AccessResources" href="#AccessResources"
name="toc-AccessResources" class="tocxref">19.2 Accessibility
resources</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-Acknowledgments" href="#Acknowledgments"
name="toc-Acknowledgments" class="tocxref">20 Acknowledgments</a></li>
</ul>
</div>

<div class="noprint">
<hr title="Separator from Introduction" />
</div>

<!--NewPage--><!-- this is for html2ps -->
<h2>1 <a id="consistency" name="consistency">Decrease maintenance and increase
consistency</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-consistent-style" class="noxref">
14.3</a> Create a style of presentation that is consistent across pages.
[Priority&nbsp;3] .</p>

<ul>
<li>Use a minimal number of style sheets for your site</li>

<li>Use linked style sheets rather than embedded styles, and avoid inline style
sheets.</li>

<li>If you have more than one, use the same "class" name for the same concept
in all of the style sheets.</li>
</ul>

<h2>2 <a id="user-override" name="user-override">User override of
styles</a></h2>

<p>Checkpoint in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-deprecated" class="noxref">
11.2</a> Avoid deprecated features of W3C technologies. [Priority&nbsp;2] .</p>

<p>In order to ensure that users can control styles, CSS2 changes the semantics
of the "!important" operator defined in CSS1. In CSS1, authors always had final
say over styles. In CSS2, if a user's style sheet contains "!important", it
takes precedence over any applicable rule in an author's style sheet. This is
an important feature to users who require or must avoid certain color
combinations or contrasts, users who require large fonts, etc. For instance,
the following rule specifies a large font size for paragraph text and would
override an author rule of equal weight:</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>

P { font-size: 24pt ! important }
</pre>
</div>

<p>The CSS2 'inherit' value - available for every property - leads to compact
"!important" style rules that govern most or all of a document. For instance,
the following style rules force all backgrounds to white and all foreground
colors to black:</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>

/*   Sets the text color to black
and the background color to
white for the document body.  */

BODY {
  color: black ! important ;
  background: white ! important
}

 /*   Causes the values of 'color' and 'background'
to be inherited by all other elements,
strengthened by !important. Note that this
may be overridden by other, more specific,
user styles.  */

* {
  color: inherit ! important ;
  background: inherit ! important
}
</pre>
</div>

<p>CSS2 also includes these user control features:</p>

<ul>
<li>System colors (for 'color', 'background-color', 'border-color', and
'outline-color') and system fonts (for 'font') mean that users may apply their
system color and font preferences to Web documents.</li>

<li>Dynamic outlines (the 'outline' property) allow users (e.g., with low
vision) to create outlines around content that don't affect layout but do
provide highlight information.</li>
</ul>

<p>For example, to draw a thick black line around an element when it has the
focus, and a thick red line when it is active, the following rules can be
used:</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>

:focus  { outline: thick solid black }
:active { outline: thick solid red }
</pre>
</div>

<h2>3 <a id="units" name="units">Units of measure</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-relative-units" class="noxref">
3.4</a> Use relative rather than absolute units in markup language attribute
values and style sheet property values. [Priority&nbsp;2] .</p>

<p>Techniques:</p>

<ul>
<li>Use the "em" unit to set font sizes.</li>

<li>Use relative length units and percentages. CSS allows you to use relative
units even in absolute positioning. Thus, you may position an image to be
offset by "3em" from the top of its containing element. This is a fixed
distance, but is relative to the current font size, so it scales nicely.</li>

<li>Only use absolute length units when the physical characteristics of the
output medium are known, such as bitmap images.</li>
</ul>

<div class="css-example">
<p><strong>Example.</strong></p>

<p>Use em to set font sizes, as in:</p>

<pre>
   H1 { font-size: 2em }
</pre>

<p>rather than:</p>

<pre>
   H1 { font-size: 12pt }
</pre>

<p class="off">End example.</p>
</div>

<div class="css-example">
<p><strong>Example.</strong></p>

<p>Use relative length units and percentages.</p>

<pre>
   BODY { margin-left: 15%; margin-right: 10%}
</pre>

<p class="off">End example.</p>
</div>

<div class="css-example">
<p><strong>Example.</strong></p>

<p>Only use absolute length units when the physical characteristics of the
output medium are known.</p>

<pre>
   .businesscard { font-size: 8pt }
</pre>

<p class="off">End example.</p>
</div>

<h2>4 <a id="Generated" name="Generated">Generated content</a></h2>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-use-markup"
class="noxref">3.1</a> When an appropriate markup language exists, use markup
rather than images to convey information. [Priority&nbsp;2] ,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-order-style-sheets"
class="noxref">6.1</a> Organize documents so they may be read without style
sheets. For example, when an HTML document is rendered without associated style
sheets, it must still be possible to read the document. [Priority&nbsp;1]</li>
</ul>

<p>Techniques:</p>

<ul>
<li>Provide a text equivalent for any important image or text generated by
style sheets (e.g., via the 'background-image', 'list-style', or 'content'
properties).</li>

<li>Ensure that important content appears in the document object. Text
generated by style sheets is not part of the document source and will not be
available to assistive technologies that access content through the Document
Object Model Level 1 ([[DOM1]).</li>
</ul>

<p>CSS2 includes several mechanisms that allow content to be generated from
style sheets:</p>

<ul>
<li>the :before and :after pseudo-elements and the 'content' property. When
used together, these allow authors to insert markers (e.g., counters and
constant strings such as "End Example" in the examples below) before or after
and element's content.</li>

<li>the 'cue', 'cue-before', and 'cue-after' properties. This properties allow
users to play a sound before or after an element's content.</li>

<li>List styles, which may be numbers, glyphs, or images (usually associated
with the LI element in HTML). CSS2 adds international list styles to the styles
defined in CSS1. See the 'list-style-type' and 'content' properties.</li>
</ul>

<p>Generated content can serve as markers to help users navigate a document and
stay oriented when they can't access visual clues such as proportional
scrollbars, frames with tables of contents, etc.</p>

<p>For instance, the following user style sheet would cause the words "End
Example" to be generated after each example marked up with a special class
value in the document:</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>

DIV.example:after {
  content: End Example
}
</pre>
</div>

<p>Users could also, for example, number paragraphs so that they could locate
their current reading position in a document:</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>

P:before {
  content: counter(paragraph) ". " ;
    counter-increment: paragraph
}
</pre>
</div>

<h2>5 <a id="style-fonts" name="style-fonts">Fonts</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-deprecated" class="noxref">
11.2</a> Avoid deprecated features of W3C technologies. [Priority&nbsp;2] .</p>

<p>Techniques:</p>

<ul>
<li>Always specify a fallback generic font.</li>

<li>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'.</li>

<li>Use the following CSS2 properties to control font information

<ul>
<li>'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch',
'font-style', 'font-variant', and 'font-weight'</li>
</ul>

<p>instead of the following deprecated font elements and attributes in
HTML:</p>

<ul>
<li>FONT, BASEFONT, "face", and "size".</li>
</ul>
</li>

<li>If you must use HTML elements to control font information, use BIG and
SMALL, which are not deprecated.</li>
</ul>

<div class="css-example">
<p><strong>Example.</strong></p>

<p>Always specify a fallback generic font:</p>

<pre>
   BODY { font-family: "Gill Sans", sans-serif }
</pre>

<p class="off">End example.</p>
</div>

<div class="css-example">
<p><strong>Example.</strong></p>

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

<p class="off">End example.</p>
</div>

<h2>6 <a id="style-text" name="style-text">Text style effects</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-blinking" class="noxref">
7.2</a> Until user agents allow users to control blinking, avoid causing
content to blink (i.e., change presentation at a regular rate, such as turning
on and off). [Priority&nbsp;2] .</p>

<p>The following CSS2 properties can be used to style text:</p>

<ul>
<li>Case: 'text-transform' (for uppercase, lowercase, and capitalization).</li>

<li>Shadow effects: 'text-shadow'</li>

<li>Underlines, overlinks, blinking: 'text-decoration'. <strong>Note.</strong>
If blinking content (e.g., a headline that appears and disappears at regular
intervals) is used, provide a mechanism for stopping the blinking. In CSS,
'text-decoration: blink' will cause content to blink and will allow users to
stop the effect by turning off style sheets or overriding the rule in a user
style sheet. Do not use the BLINK and MARQUEE elements. These elements are not
part of any W3C specification for HTML (i.e., they are non-standard
elements).</li>
</ul>

<h2>7 <a id="text-not-images" name="text-not-images">Text instead of
images</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets" class="noxref">
3.3</a> Use style sheets to control layout and presentation. [Priority&nbsp;2]
.</p>

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

<p>If it is necessary to use a <a id="bitmap-text" name="bitmap-text">bitmap to
create a text effect</a> (special font, transformation, shadows, etc.) the
bitmap must be accessible (see the sections on <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalents</a> and <a href="http://www.w3.org/TR/WCAG10-TECHS/#alt-page-note">
alternative pages</a>).</p>

<div class="example">
<p><strong>Example.</strong></p>

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

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

<p class="off">End example.</p>
</div>

<h2>8 <a id="style-text-formatting" name="style-text-formatting">Text
formatting and position</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets" class="noxref">
3.3</a> Use style sheets to control layout and presentation. [Priority&nbsp;2]
.</p>

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

<ul>
<li>Indentation: 'text-indent'. Do not use the BLOCKQUOTE or any other
structural element to indent text.</li>

<li>Letter/word spacing: 'letter-spacing', 'word-spacing'. For example instead
of writing "<abbr title="hello">H E L L O</abbr>" (which users generally
recognize as the word "hello" but would hear as individual letters), authors
may create the same visual effect with the 'word-spacing' property applied to
"HELLO". Text without spaces will be transformed more effectively to
speech.</li>

<li>White space: 'white-space'. This property controls the white space
processing of an element's content.</li>

<li>Text direction: 'direction', 'unicode-bidi'.</li>

<li>The :first-letter and :first-line pseudo-elements allow authors to refer to
the first letter or line of a paragraph of text.</li>
</ul>

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

<div class="example">
<p><strong>Example.</strong></p>

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

<p><strong>Note.</strong> 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.</p>
</div>

<h2>9 <a id="style-colors" name="style-colors">Colors</a></h2>

<h3>9.1 <a id="style-color-contrast" name="style-color-contrast">Color
Contrast</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-color-contrast"
class="noxref">2.2</a> Ensure that foreground and background color combinations
provide sufficient contrast when viewed by someone having color deficits or
when viewed on a black and white screen. [Priority&nbsp;2 for images,
Priority&nbsp;3 for text].</li>
</ul>

<p>Techniques:</p>

<ul>
<li>Use numbers, not names, for colors.</li>
</ul>

<div class="css-example">
<p><strong>Example.</strong></p>

<p>Use numbers, not names, for colors:</p>

<pre>
   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}
</pre>

<p class="off">End example.</p>
</div>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
 H1 {color: red}
</pre>

<p class="off">End example.</p>
</div>

<p>Use these CSS properties to specify colors:</p>

<ul>
<li>'color', for foreground text color.</li>

<li>'background-color', for background colors.</li>

<li>'border-color', 'outline-color' for border colors.</li>

<li>For link colors, refer to the :link, :visited, and :active
pseudo-classes.</li>
</ul>

<p>Ensure that foreground and background colors contrast well. If specifying a
foreground color, always specify a background color as well (and vice
versa).</p>

<h3>9.2 <a id="style-info-not-in-color-alone"
name="style-info-not-in-color-alone">Ensuring information is not in color
alone</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-color-convey"
class="noxref">2.1</a> Ensure that all information conveyed with color is also
available without color, for example from context or markup.
[Priority&nbsp;1]</li>
</ul>

<p>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).</p>

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

<ul>
<li>They are surrounded by a border.</li>

<li>They use a different background color.</li>

<li>They begin with the word "Example" or "Deprecated Example".</li>

<li>They also end with the phrase "End example", but that phrase is hidden by
default with 'display: none'. For user agents that don't support style sheets
or when style sheets are turned off, this text helps delineate the end of an
example for readers who may not be able to see the border around the
example.</li>
</ul>

<p><span class="quicktest">Quicktest!</span> 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.</p>

<p><span class="quicktest">Quicktest!</span> 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 too small or indistinct to hold up
well.</p>

<p>For more information about colors and contrasts, refer to <cite><a
href="#ref-LIGHTHOUSE" title="Link to reference LIGHTHOUSE">
[LIGHTHOUSE]</a></cite>.</p>

<h2>10 <a id="lists" name="lists">Providing contextual clues in HTML
lists</a></h2>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-list-structure"
class="noxref">3.6</a> Mark up lists and list items properly.
[Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-use-metadata"
class="noxref">13.2</a> Provide metadata to add semantic information to pages
and sites. [Priority&nbsp;2]</li>
</ul>

<p>Content developers are encouraged to use UL for unordered lists and OL for
ordered lists (i.e., use markup appropriately) combined with CSS to provide
contextual clues.</p>

<p>The following CSS2 style sheet shows how to provide compound numbers for
nested lists created with either UL or OL elements. Items are numbered as "1",
"1.1", "1.1.1", etc.</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>
&lt;STYLE type="text/css"&gt;
    UL, OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, "."); counter-increment: item }
&lt;/STYLE&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Until either CSS2 is widely supported by user agents or user agents allow
users to control rendering of lists through other means, authors should
consider providing contextual clues in nested lists. The following CSS1
mechanism shows how to hide the end of a list when style sheets are turned on,
and to reveal it when style sheets are turned off, when user style sheets
override the hiding mechanism, or when style sheets aren't supported.</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>
  &lt;STYLE type="text/css"&gt;
      .endoflist { display: none }
  &lt;/STYLE&gt;
  &lt;UL&gt;
     &lt;LI&gt;Paper:
        &lt;UL&gt;
           &lt;LI&gt;Envelopes
           &lt;LI&gt;Notepaper
           &lt;LI&gt;Letterhead
           &lt;LI&gt;Poster paper
           &lt;span class="endoflist"&gt;(End of Paper)&lt;/span&gt;
        &lt;/UL&gt;
     &lt;LI&gt;Pens:
        &lt;UL&gt;
           &lt;LI&gt;Blue writing pens
           &lt;LI&gt;whiteboard pens
           &lt;span class="endoflist"&gt;(End of Pens)&lt;/span&gt;
        &lt;/UL&gt;
     &lt;LI&gt;Fasteners:
        &lt;UL&gt;
           &lt;LI&gt;paper clips
           &lt;LI&gt;staples
           &lt;LI&gt;Big lengths of rope.
           &lt;span class="endoflist"&gt;(End of Fasteners)&lt;/span&gt;
        &lt;/UL&gt;
     &lt;span class="endoflist"&gt;(End of Office Supplies)&lt;/span&gt;
  &lt;/UL&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Note: This example does not help the case of wrapping list items. With some
more effort, the author could put similar markup at the end of each list
item.</p>

<!-- p>@@Question: Perhaps it's also helpful to use this mechanism at the
beginning of each list to say how many items are in the list. Any
thoughts?</p -->
<!-- p>@@Need to create test file determine what users think of this proposal.</p -->
<h2>11 <a id="style-alignment" name="style-alignment">Layout, positioning,
layering, and alignment</a></h2>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets"
class="noxref">3.3</a> Use style sheets to control layout and presentation.
[Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-table-for-layout"
class="noxref">5.3</a> Do not use tables for layout unless the table makes
sense when linearized. Otherwise, if the table does not make sense, provide an
alternative equivalent (which may be a linearized version). [Priority&nbsp;2]
.</li>
</ul>

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

<ul>
<li>'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these
properties allows users to control spacing without adding additional spaces.
Use 'text-align: center' instead of the deprecated CENTER element.</li>

<li>'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'.
With these properties, authors can create space on four sides of an element's
content instead of adding non-breaking spaces (&amp;nbsp;).</li>

<li>'float', 'position', 'top', 'right', 'bottom', 'left'. With these
properties, the user can control the visual position of almost any element in a
manner independent of where the element appears in the document. Authors should
always design documents that make sense without style sheets (i.e., the
document should be written in a "logical" order) and then apply style sheets to
achieve visual effects. The positioning properties may be used to create margin
notes (which may be automatically numbered), side bars, frame-like effects,
simple headers and footers, and more.</li>

<li>The 'empty-cells' property allows users to leave table cells empty and
still give them proper borders on the screen or on paper. A data cell that is
meant to be empty should not be filled with white space or a non-breaking space
just to achieve a visual effect.</li>
</ul>

<h3>11.1 <a id="spacer" name="spacer">If you must use images as
spacers</a></h3>

<p><a id="spacer-images" name="spacer-images">Provide text equivalents for all
images, including invisible or transparent images.</a></p>

<p>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 <tt>alt=""</tt> for them. <!-- Note that the HTML 4.0 specification
recommends that attribute values not contain leading or trailing
spaces. It states, "User agents may ignore leading and trailing
white space in CDATA attributes values (e.g., "myval&amp;nbsp;" may
be interpreted as "myval")." Therefore, empty alt-text
(alt="&nbsp;") might be ignored.--></p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

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

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

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

<pre>
   &lt;IMG src="spacer.gif" alt="spacer"&gt;
   &lt;IMG src="colorfulwheel.gif" alt="The wheel of fortune"&gt;
</pre>

<p class="off">End example.</p>
</div>

<h2>12 <a id="style-rules" name="style-rules">Rules and borders</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-order-style-sheets"
class="noxref">6.1</a> Organize documents so they may be read without style
sheets. For example, when an HTML document is rendered without associated style
sheets, it must still be possible to read the document. [Priority&nbsp;1] .</p>

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

<p>Use these CSS properties to specify border styles:</p>

<ul>
<li>'border', 'border-width', 'border-style', 'border-color'.</li>

<li>'border-spacing' and 'border-collapse' for tables.</li>

<li>'outline, 'outline-color', 'outline-style', and 'outline-width' for dynamic
outlines.</li>
</ul>

<p>Authors should use style sheets to create rules and borders.</p>

<div class="example">
<p><strong>Example.</strong></p>

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

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

<p class="off">End example.</p>
</div>

<p>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).</p>

<div class="example">
<p><strong>Example.</strong></p>

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

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

<p class="off">End example.</p>
</div>

<h2>13 <a id="style-transform-gracefully" name="style-transform-gracefully">
Using style sheet positioning and markup to transform gracefully</a></h2>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-order-style-sheets"
class="noxref">6.1</a> Organize documents so they may be read without style
sheets. For example, when an HTML document is rendered without associated style
sheets, it must still be possible to read the document. [Priority&nbsp;1]
,</li>
</ul>

<p>Using the positioning properties of CSS2, content may be displayed at any
position on the user's viewport. The order in which items appear on a screen
may be different than the order they are found in the source document. The
following example demonstrates a few principles:</p>

<ol>
<li>the text appears visually in the browser in a different order than in the
markup.</li>

<li>CSS positioning may be used to create tabular effects. A TABLE element
could have been used to create the same effect.</li>
</ol>

<p>Note that a class is defined for each object that is being positioned. The
use of "id" could be substituted for "class" in these examples. "Class" was
used because in the live example, the objects are replicated and thus not
unique.</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
&lt;head&gt;&lt;style type="text/css"&gt;
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em }
&lt;/style&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div class="box"&gt;
  &lt;span class="menu1"&gt;Products&lt;/span&gt;
  &lt;span class="menu2"&gt;Locations&lt;/span&gt;
  &lt;span class="item1"&gt;Telephones&lt;/span&gt;
  &lt;span class="item2"&gt;Computers&lt;/span&gt;
  &lt;span class="item3"&gt;Portable MP3 Players&lt;/span&gt;
  &lt;span class="item5"&gt;Wisconsin&lt;/span&gt;
  &lt;span class="item4"&gt;Idaho&lt;/span&gt;
&lt;/div&gt;
&lt;/body&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>When style sheets are applied, the text appears in two columns. Elements of
class "menu1" (Products) and "menu2" (Locations) appear as column headings.
"Telephones, Computers, and Portable MP3 Players" are listed under Products and
"Wisconsin" and "Idaho" are listed under Locations as shown in this screen
shot:</p>

<p><img src="cssimages/style-sheet-tg1.gif"
alt="Screen shot of the example code as it appears when style sheets applied" />
</p>

<p>When style sheets are not applied, all of the text appears in one line of
words, "Products Locations Telephones Computers Portable MP3 Players Wisconsin
Idaho". They appear in the order in which they are written in the source.
Therefore, what appear as column headings when style sheets are applied are the
first phrases since they were defined first in the source. The following screen
shot illustrates this:</p>

<p><img src="cssimages/style-sheet-tg2.gif"
alt="Screen shot of the example code as it appears without style sheets" /></p>

<p>The following example shows that the same visual appearance may be created
in a browser that support style sheets as well as creating a more meaningful
presentation when style sheets are not applied. Structural markup (definition
lists) have been applied to the content. Note that the margins have been set to
0 since in HTML browsers, definition lists are displayed with a margin set on
the DD element.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;head&gt;&lt;style type="text/css"&gt;
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em }
&lt;/style&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div class="box"&gt;
&lt;dl&gt;
  &lt;dt class="menu1"&gt;Products&lt;/dt&gt;
    &lt;dd class="item1"&gt;Telephones&lt;/dd&gt;
    &lt;dd class="item2"&gt;Computers&lt;/dd&gt;
    &lt;dd class="item3"&gt;Portable MP3 Players&lt;/dd&gt;
  &lt;dt class="menu2"&gt;Locations&lt;/dt&gt;
   &lt;dd class="item4"&gt;Idaho&lt;/span&gt;
   &lt;dd class="item5"&gt;Wisconsin&lt;/span&gt;
  &lt;/dt&gt;
&lt;/dl&gt;
&lt;/div&gt;
&lt;/body&gt;
</pre>

<p class="off">End example.</p>
</div>

<p><a id="ss-tg3-desc" name="ss-tg3-desc">When style sheets</a> are applied, it
looks as it did before. However, now when the style sheets are not applied, the
text appears in a definition list rather than a string of words. What appear as
column headings when style sheets are applied, appear as defined terms when
style sheets are not applied as demonstrated in the following screen shot.</p>

<p><img src="cssimages/style-sheet-tg3.gif"
alt="Example code as it appears when style sheets not applied but transform gracefully" />
</p>

<p>Note. Experience the difference between these examples for yourself: <a
href="cssimages/style-tg.html">test file for style sheets that transform
gracefully</a>.
<!-- p>@@Quicktest: turn off style sheets to determine the reading order.</p --></p>

<h2>14 <a id="style-movement" name="style-movement">Creating movement with
style sheets and scripts</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-movement" class="noxref">
7.3</a> Until user agents allow users to freeze moving content, avoid movement
in pages. [Priority&nbsp;2]</p>

<!-- p>@@discuss Javascript, and style sheets, point to the MWC example or "the
company" example.  points to make/demonstrate:</p -->
<ul>
<li>hide/show content,</li>

<li>change presentation (movement and colors)</li>
</ul>

<h2>15 <a id="acss" name="acss">Aural Cascading Style Sheets</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-content-preferences"
class="noxref">11.3</a> Provide information so that users may receive documents
according to their preferences (e.g., language, content type, etc.)
[Priority&nbsp;3] .</p>

<p>CSS2's aural properties provide information to non-sighted users and
voice-browser users much in the same way fonts provide visual information. The
following example show how various sound qualities (including 'voice-family',
which is something like an audio font) can let a user know that spoken content
is a heading:</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>

H1 {
  voice-family: paul;
  stress: 20;
  richness: 90;
  cue-before: url("ping.au")
}
</pre>
</div>

<p>The following properties are part of CSS2's aural cascading style
sheets.</p>

<ul>
<li>'volume' controls the volume of spoken text.</li>

<li>'speak' controls whether content will be spoken and, if so, whether it will
be spelled or spoken as words.</li>

<li>'pause', 'pause-before', and 'pause-after' control pauses before and after
content is spoken. This allows users to separate content for better
comprehension.</li>

<li>'cue', 'cue-before', and 'cue-after' specify a sound to be played before
and after content, which can be valuable for orientation (much like a visual
icon).</li>

<li>'play-during' controls background sounds while an element is rendered (much
like a background image).</li>

<li>'azimuth' and 'elevation' provide dimension to sound, which allows users to
distinguish voices, for example.</li>

<li>'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and
'richness' control the quality of spoken content. By varying these properties
for different elements, users can fine-tune how content is presented
aurally.</li>

<li>'speak-punctuation' and 'speak-numeral' control how numbers and punctuation
are spoken, which has an effect on the quality of the experience of aural
browsing.</li>
</ul>

<p>Furthermore, the 'speak-header' property describes how table header
information is to be spoken before a table cell.</p>

<h2>16 <a id="Alt" name="Alt">Access to alternative representations of
content</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-content-preferences"
class="noxref">11.3</a> Provide information so that users may receive documents
according to their preferences (e.g., language, content type, etc.)
[Priority&nbsp;3] .</p>

<p>CSS2 lets users access alternative representations of content that is
specified in attribute values when the following are used together:</p>

<ul>
<li>attribute selectors.</li>

<li>the attr() function and the 'content' property'</li>

<li>the :before and :after pseudo-elements</li>
</ul>

<p>In the following example, the value of the "alt" attribute for the IMG
element is rendered after the image (visually, aurally, etc.):</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<pre>
 IMG:after {
    content: attr(alt)
 }
</pre>
</div>

<p>Note that the value of the attribute is displayed even though the image may
not be (e.g., the user has turned off images through the user interface).</p>

<h2>17 <a id="Media" name="Media">Media types</a></h2>

<p>Checkpoints in this section: <a
href="http://www.w3.org/TR/WCAG10-TECHS/#tech-content-preferences"
class="noxref">11.3</a> Provide information so that users may receive documents
according to their preferences (e.g., language, content type, etc.)
[Priority&nbsp;3] .</p>

<p>The CSS2 "media types" (used with @media rules) allow authors and users to
design style sheets that will cause documents to render more appropriately on
certain target devices. These style sheets can tailor content for presentation
on braille devices, speech synthesizers, or <acronym title="teletypewriter">
TTY</acronym> devices. Using "@media" rules can also reduce download times by
allowing user agents to ignore inapplicable rules.</p>

<hr />
<!--NewPage--><!-- this is for html2ps -->
<h2>18 <a id="References" name="References">References</a></h2>

<p>For the latest version of any <abbr title="the World Wide Web Consortium">
W3C</abbr> specification please consult the list of <a
href="http://www.w3.org/TR/"><abbr title="the World Wide Web Consortium">
W3C</abbr> Technical Reports</a> at http://www.w3.org/TR.</p>

<dl>
<dt><a id="ref-CSS1" name="ref-CSS1"><b>[CSS1]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1999/REC-CSS1-19990111">"CSS, level 1
Recommendation"</a>, 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 <a
href="http://www.w3.org/TR/REC-CSS1">latest version of CSS1</a> is available at
http://www.w3.org/TR/REC-CSS1.</dd>

<dt><a id="ref-CSS2" name="ref-CSS2"><b>[CSS2]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/">"CSS, level 2
Recommendation"</a>, 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 <a
href="http://www.w3.org/TR/REC-CSS2/">latest version of CSS2</a> is available
at http://www.w3.org/TR/REC-CSS2.</dd>

<dt><a id="ref-WCAG10" name="ref-WCAG10"><b>[WCAG10]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/">"Web Content
Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, and I. Jacobs,
eds., 5 May 1999. This <acronym>WCAG</acronym> 1.0 Recommendation is
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.</dd>

<dt><a id="ref-WCAG10-TECHS" name="ref-WCAG10-TECHS"><b>
[WCAG10-TECHS]</b></a></dt>

<dd><a href="http://www.w3.org/TR/WCAG10-TECHS/">"Techniques for Web Content
Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, I. Jacobs,
eds. This document explains how to implement the checkpoints defined in "Web
Content Accessibility Guidelines 1.0". The latest draft of the techniques is
available at http://www.w3.org/TR/WCAG10-TECHS/.</dd>
</dl>

<h2>19 <a id="Resources" name="Resources">Resources</a></h2>

<p><strong>Note:</strong> <em>W3C does not guarantee the stability of any of
the following references outside of its control. These references are included
for convenience. References to products are not endorsements of those
products.</em></p>

<h3>19.1 <a id="OtherGuidelines" name="OtherGuidelines">Other
guidelines</a></h3>

<dl>
<dt><a id="ref-UWSAG" name="ref-UWSAG"><b>[UWSAG]</b></a></dt>

<dd><a href="http://trace.wisc.edu/redirects/htmlgide/version8.htm">"The
Unified Web Site Accessibility Guidelines"</a>, G. Vanderheiden, W. Chisholm,
eds. The Unified Web Site Guidelines were compiled by the <a
href="http://www.tracecenter.org/">Trace R &amp; D Center</a> at the University
of Wisconsin under funding from the National Institute on Disability and
Rehabilitation Research (NIDRR),&nbsp; U.S. Dept. of Education.</dd>
</dl>

<h3>19.2 <a id="AccessResources" name="AccessResources">Accessibility
resources</a></h3>

<dl>
<dt><a id="ref-LIGHTHOUSE" name="ref-LIGHTHOUSE"><b>[LIGHTHOUSE]</b></a></dt>

<dd><a href="http://www.lighthouse.org/">The Lighthouse</a> provides
information about accessible colors and contrasts.</dd>
</dl>

<!--NewPage--><!-- this is for html2ps -->
<h2>20 <a id="Acknowledgments" name="Acknowledgments">Acknowledgments</a></h2>

<dl>
<dt>Web Content Guidelines Working Group Co-Chairs:</dt>

<dd><a href="mailto:jasonw@ariel.ucs.unimelb.edu.au">Jason White</a>,
University of Melbourne</dd>

<dd><a href="mailto:gv@tracecenter.org">Gregg Vanderheiden</a>, Trace Research
and Development</dd>

<dt>W3C Team contact:</dt>

<dd><a href="mailto:wendy@w3.org">Wendy Chisholm</a></dd>

<dt>We wish to thank the following people who have contributed their time and
valuable comments to shaping these guidelines:</dt>

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

<p><a href="http://www.w3.org/WAI/WCAG1AAA-Conformance"
title="Explanation of Level Triple-A Conformance"><img class="conform"
height="32" width="88" src="http://www.w3.org/WAI/wcag1AAA"
alt="Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" />
</a></p>

<div class="navbar"><map id="navbar-bottom" name="navbar-bottom"
title="Navigation Bar">
<hr class="navbar" title="Navigation area separator" />
<p>[<a href="#toc">contents</a>] &nbsp;</p>
</map></div>
</body>
</html>