You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1441 lines
52 KiB
1441 lines
52 KiB
<?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>] </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 & 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>
|
|
©1999 - 2000 <a href="http://www.w3.org/"><abbr
|
|
title="World Wide Web Consortium">W3C</abbr></a><sup>®</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 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 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 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 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 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 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>
|
|
<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>
|
|
</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 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 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>
|
|
<P>This is an
|
|
<IMG src="BigRedExample.gif" alt="example">
|
|
of what we mean.
|
|
</P>
|
|
</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 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>
|
|
<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>
|
|
</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 2 for images,
|
|
Priority 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 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 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 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>
|
|
<STYLE type="text/css">
|
|
UL, OL { counter-reset: item }
|
|
LI { display: block }
|
|
LI:before { content: counters(item, "."); counter-increment: item }
|
|
</STYLE>
|
|
</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>
|
|
<STYLE type="text/css">
|
|
.endoflist { display: none }
|
|
</STYLE>
|
|
<UL>
|
|
<LI>Paper:
|
|
<UL>
|
|
<LI>Envelopes
|
|
<LI>Notepaper
|
|
<LI>Letterhead
|
|
<LI>Poster paper
|
|
<span class="endoflist">(End of Paper)</span>
|
|
</UL>
|
|
<LI>Pens:
|
|
<UL>
|
|
<LI>Blue writing pens
|
|
<LI>whiteboard pens
|
|
<span class="endoflist">(End of Pens)</span>
|
|
</UL>
|
|
<LI>Fasteners:
|
|
<UL>
|
|
<LI>paper clips
|
|
<LI>staples
|
|
<LI>Big lengths of rope.
|
|
<span class="endoflist">(End of Fasteners)</span>
|
|
</UL>
|
|
<span class="endoflist">(End of Office Supplies)</span>
|
|
</UL>
|
|
</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 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 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 (&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&nbsp;" may
|
|
be interpreted as "myval")." Therefore, empty alt-text
|
|
(alt=" ") 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<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">here
|
|
</pre>
|
|
|
|
<p>In this next example, an image is used to force a graphic to appear in a
|
|
certain position:</p>
|
|
|
|
<pre>
|
|
<IMG src="spacer.gif" alt="spacer">
|
|
<IMG src="colorfulwheel.gif" alt="The wheel of fortune">
|
|
</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 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>
|
|
<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>
|
|
</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>
|
|
<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>
|
|
</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 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>
|
|
<head><style type="text/css">
|
|
.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 }
|
|
</style></head>
|
|
<body>
|
|
<div class="box">
|
|
<span class="menu1">Products</span>
|
|
<span class="menu2">Locations</span>
|
|
<span class="item1">Telephones</span>
|
|
<span class="item2">Computers</span>
|
|
<span class="item3">Portable MP3 Players</span>
|
|
<span class="item5">Wisconsin</span>
|
|
<span class="item4">Idaho</span>
|
|
</div>
|
|
</body>
|
|
</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>
|
|
<head><style type="text/css">
|
|
.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 }
|
|
</style></head>
|
|
<body>
|
|
<div class="box">
|
|
<dl>
|
|
<dt class="menu1">Products</dt>
|
|
<dd class="item1">Telephones</dd>
|
|
<dd class="item2">Computers</dd>
|
|
<dd class="item3">Portable MP3 Players</dd>
|
|
<dt class="menu2">Locations</dt>
|
|
<dd class="item4">Idaho</span>
|
|
<dd class="item5">Wisconsin</span>
|
|
</dt>
|
|
</dl>
|
|
</div>
|
|
</body>
|
|
</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 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 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 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 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 & D Center</a> at the University
|
|
of Wisconsin under funding from the National Institute on Disability and
|
|
Rehabilitation Research (NIDRR), 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>] </p>
|
|
</map></div>
|
|
</body>
|
|
</html>
|
|
|