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.
4736 lines
175 KiB
4736 lines
175 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">
|
|
<!-- @@?? we aren't claiming transitional? -->
|
|
<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>HTML 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>] [<a href="#html-index">html index</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">HTML 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-HTML-TECHS-20001106/">
|
|
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/</a></dd>
|
|
|
|
<dd>(<a href="html-techniques.txt">plain text</a>, <a
|
|
href="html-techniques.ps">PostScript</a>, <a href="html-techniques.pdf">
|
|
PDF</a>, <a href="html-techniques.tgz">gzip tar file of HTML</a>, <a
|
|
href="html-techniques.zip">zip archive of HTML</a>)</dd>
|
|
|
|
<dt>Latest version:</dt>
|
|
|
|
<dd><a href="http://www.w3.org/TR/WCAG10-HTML-TECHS/">
|
|
http://www.w3.org/TR/WCAG10-HTML-TECHS/</a> <!--
|
|
<DT>Latest public version:
|
|
<DD><A HREF="http://www.w3.org/TR/WCAG10-HTML-TECHS/">http://www.w3.org/TR/WCAG10-HTML-TECHS/</A>
|
|
--></dd>
|
|
|
|
<dt>Previous version:</dt>
|
|
|
|
<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/">
|
|
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-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 Hypertext Markup
|
|
Language (<acronym title="Hypertext Markup Language">HTML</acronym>) content
|
|
(refer to HTML 4.01 <cite><a href="#ref-HTML4" title="Link to reference HTML4">
|
|
[HTML4]</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 HTML 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-document" href="#document" name="toc-document"
|
|
class="tocxref">1 Document structure and metadata</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-document-meta" href="#document-meta"
|
|
name="toc-document-meta" class="tocxref">1.1 Metadata</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-grouping" href="#grouping" name="toc-grouping"
|
|
class="tocxref">1.2 Structural grouping</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-language" href="#language" name="toc-language"
|
|
class="tocxref">2 Language information</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-changes-in-lang" href="#changes-in-lang"
|
|
name="toc-changes-in-lang" class="tocxref">2.1 Identifying changes in
|
|
language</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-identify-primary-lang"
|
|
href="#identify-primary-lang" name="toc-identify-primary-lang" class="tocxref">
|
|
2.2 Identifying the primary language</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-text" href="#text" name="toc-text"
|
|
class="tocxref">3 Text markup</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-text-emphasis" href="#text-emphasis"
|
|
name="toc-text-emphasis" class="tocxref">3.1 Emphasis</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-text-abbr" href="#text-abbr"
|
|
name="toc-text-abbr" class="tocxref">3.2 Acronyms and abbreviations</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-text-quotes" href="#text-quotes"
|
|
name="toc-text-quotes" class="tocxref">3.3 Quotations</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-text-markup" href="#text-markup"
|
|
name="toc-text-markup" class="tocxref">3.4 Markup and style sheets rather than
|
|
images: The example of math</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-misc-markup" href="#misc-markup"
|
|
name="toc-misc-markup" class="tocxref">3.5 Eight other structural elements (to
|
|
identify citations, code fragments, deleted text, and others)</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-lists" href="#lists" name="toc-lists"
|
|
class="tocxref">4 Lists</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-list-bullets" href="#list-bullets"
|
|
name="toc-list-bullets" class="tocxref">4.1 Use style sheets to change list
|
|
bullets</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-tables" href="#tables" name="toc-tables"
|
|
class="tocxref">5 Tables</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-data-tables" href="#data-tables"
|
|
name="toc-data-tables" class="tocxref">5.1 Tables of data</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-tables-layout" href="#tables-layout"
|
|
name="toc-tables-layout" class="tocxref">5.2 Tables for layout</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-wrapped-text" href="#wrapped-text"
|
|
name="toc-wrapped-text" class="tocxref">5.3 Linearizing tables</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-bc-tables" href="#bc-tables"
|
|
name="toc-bc-tables" class="tocxref">5.4 Backward compatibility issues for
|
|
tables</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-links" href="#links" name="toc-links"
|
|
class="tocxref">6 Links</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-link-text" href="#link-text"
|
|
name="toc-link-text" class="tocxref">6.1 Link text</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-group-bypass" href="#group-bypass"
|
|
name="toc-group-bypass" class="tocxref">6.2 Grouping and bypassing
|
|
links</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-link-accesskey" href="#link-accesskey"
|
|
name="toc-link-accesskey" class="tocxref">6.3 Keyboard access</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-anchors-targets" href="#anchors-targets"
|
|
name="toc-anchors-targets" class="tocxref">6.4 Anchors and targets</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-images" href="#images" name="toc-images"
|
|
class="tocxref">7 Images and image maps</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-image-text-equivalent"
|
|
href="#image-text-equivalent" name="toc-image-text-equivalent" class="tocxref">
|
|
7.1 Short text equivalents for images ("alt-text")</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-long-descriptions" href="#long-descriptions"
|
|
name="toc-long-descriptions" class="tocxref">7.2 Long descriptions of
|
|
images</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-ascii-art" href="#ascii-art"
|
|
name="toc-ascii-art" class="tocxref">7.3 Ascii art</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-image-maps" href="#image-maps"
|
|
name="toc-image-maps" class="tocxref">7.4 Image maps</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-color-images" href="#color-images"
|
|
name="toc-color-images" class="tocxref">7.5 Color in images</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-animated-images" href="#animated-images"
|
|
name="toc-animated-images" class="tocxref">7.6 Animated images</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-objects" href="#objects" name="toc-objects"
|
|
class="tocxref">8 Applets and other programmatic objects</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-applet-text-equivalent"
|
|
href="#applet-text-equivalent" name="toc-applet-text-equivalent"
|
|
class="tocxref">8.1 Text and non-text equivalents for applets and programmatic
|
|
objects</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-accessible-applets" href="#accessible-applets"
|
|
name="toc-accessible-applets" class="tocxref">8.2 Directly accessible
|
|
applets</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-audio-and-video" href="#audio-and-video"
|
|
name="toc-audio-and-video" class="tocxref">9 Audio and video</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-audio-information" href="#audio-information"
|
|
name="toc-audio-information" class="tocxref">9.1 Audio information</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-text-equivs-multimedia"
|
|
href="#text-equivs-multimedia" name="toc-text-equivs-multimedia"
|
|
class="tocxref">9.2 Text equivalents for multimedia</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-embed-multimedia" href="#embed-multimedia"
|
|
name="toc-embed-multimedia" class="tocxref">9.3 Embedding multimedia
|
|
objects</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-frames" href="#frames" name="toc-frames"
|
|
class="tocxref">10 Frames</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-frame-names" href="#frame-names"
|
|
name="toc-frame-names" class="tocxref">10.1 Providing a frame title</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-frame-text-equivalent"
|
|
href="#frame-text-equivalent" name="toc-frame-text-equivalent" class="tocxref">
|
|
10.2 Describing frame relationships</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-noframes" href="#noframes" name="toc-noframes"
|
|
class="tocxref">10.3 Writing for browsers that do not support FRAME</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-frame-has-html-src" href="#frame-has-html-src"
|
|
name="toc-frame-has-html-src" class="tocxref">10.4 Frame sources</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-no-new-windows" href="#no-new-windows"
|
|
name="toc-no-new-windows" class="tocxref">10.5 Using FRAME targets</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-alt-frames" href="#alt-frames"
|
|
name="toc-alt-frames" class="tocxref">10.6 Alternatives to frames</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-forms" href="#forms" name="toc-forms"
|
|
class="tocxref">11 Forms</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-forms-keyboard-access"
|
|
href="#forms-keyboard-access" name="toc-forms-keyboard-access" class="tocxref">
|
|
11.1 Keyboard access to forms</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-forms-grouping" href="#forms-grouping"
|
|
name="toc-forms-grouping" class="tocxref">11.2 Grouping form controls</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-forms-labels" href="#forms-labels"
|
|
name="toc-forms-labels" class="tocxref">11.3 Labeling form controls</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-forms-graphical-buttons"
|
|
href="#forms-graphical-buttons" name="toc-forms-graphical-buttons"
|
|
class="tocxref">11.4 Graphical buttons</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-forms-specific" href="#forms-specific"
|
|
name="toc-forms-specific" class="tocxref">11.5 Techniques for specific
|
|
controls</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-bc-forms" href="#bc-forms" name="toc-bc-forms"
|
|
class="tocxref">11.6 Backward compatibility issues for forms</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-scripts" href="#scripts" name="toc-scripts"
|
|
class="tocxref">12 Scripts</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-scripts-gt" href="#scripts-gt"
|
|
name="toc-scripts-gt" class="tocxref">12.1 Graceful transformation of
|
|
scripts</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-scripts-flicker" href="#scripts-flicker"
|
|
name="toc-scripts-flicker" class="tocxref">12.2 Scripts that cause
|
|
flickering</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-scripts-movement-blinking"
|
|
href="#scripts-movement-blinking" name="toc-scripts-movement-blinking"
|
|
class="tocxref">12.3 Scripts that cause movement and blinking</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-directly-accessible-scripts"
|
|
href="#directly-accessible-scripts" name="toc-directly-accessible-scripts"
|
|
class="tocxref">12.4 Directly accessible scripts</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-scripts-alt" href="#scripts-alt"
|
|
name="toc-scripts-alt" class="tocxref">12.5 Alternative presentation of
|
|
scripts</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-script-refresh" href="#script-refresh"
|
|
name="toc-script-refresh" class="tocxref">12.6 Page updates and new
|
|
windows</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-html-index" href="#html-index"
|
|
name="toc-html-index" class="tocxref">13 Index of HTML elements and
|
|
attributes</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-index-elements" href="#index-elements"
|
|
name="toc-index-elements" class="tocxref">Elements</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-index-attributes" href="#index-attributes"
|
|
name="toc-index-attributes" class="tocxref">Attributes</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-References" href="#References"
|
|
name="toc-References" class="tocxref">14 References</a></li>
|
|
|
|
<li class="tocline2"><a id="toc-Resources" href="#Resources"
|
|
name="toc-Resources" class="tocxref">15 Resources</a>
|
|
|
|
<ul class="toc">
|
|
<li class="tocline3"><a id="toc-OtherGuidelines" href="#OtherGuidelines"
|
|
name="toc-OtherGuidelines" class="tocxref">15.1 Other guidelines</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-ToolResources" href="#ToolResources"
|
|
name="toc-ToolResources" class="tocxref">15.2 User agents and other
|
|
tools</a></li>
|
|
|
|
<li class="tocline3"><a id="toc-AccessResources" href="#AccessResources"
|
|
name="toc-AccessResources" class="tocxref">15.3 Accessibility
|
|
resources</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="tocline2"><a id="toc-Acknowledgments" href="#Acknowledgments"
|
|
name="toc-Acknowledgments" class="tocxref">16 Acknowledgments</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="noprint">
|
|
<hr title="Separator from Introduction" />
|
|
</div>
|
|
|
|
<!--NewPage--><!-- this is for html2ps -->
|
|
<h2>1 <a id="document" name="document">Document structure and metadata</a></h2>
|
|
|
|
<p>Content developers should use structural markup and use it according to
|
|
specification. Structural elements and attribute (refer to the <a
|
|
href="#html-index">index of HTML elements and attributes</a> to identify them)
|
|
promote consistency in documents and supply information to other tools (e.g.,
|
|
indexing tools, search engines, programs that extract tables to databases,
|
|
navigation tools that use heading elements, and automatic translation software
|
|
that translates text from one language into another.</p>
|
|
|
|
<h3>1.1 <a id="document-meta" name="document-meta">Metadata</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<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>Some structural elements provide information about the document itself. This
|
|
is called "metadata" about the document -- metadata is information about data.
|
|
Well-crafted metadata can provide important orientation information to users.
|
|
HTML elements that provide useful information about a document include:</p>
|
|
|
|
<h4>1.1.1 <a id="doc-title" name="doc-title">TITLE: The document
|
|
title.</a></h4>
|
|
|
|
<p>Note that the (mandatory) TITLE element, which only appears once in a
|
|
document, is different from the "<a href="#adef-title">title</a>" attribute,
|
|
which applies to almost every HTML 4.01 element. Content developers should use
|
|
the "title" attribute in accordance with the HTML 4.01 specification. For
|
|
example, "title" should be used with links to provide information about the
|
|
target of the link.</p>
|
|
|
|
<h4>1.1.2 <a id="title-element" name="title-element">The</a> <a
|
|
href="#edef-ADDRESS">ADDRESS</a> element</h4>
|
|
|
|
<p>This element can be used to provide information about the creator of the
|
|
page.</p>
|
|
|
|
<h4>1.1.3 <a id="meta-element" name="meta-element">The</a> <a
|
|
href="#edef-META">META</a> element</h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
|
|
class="noxref">7.4</a> Until user agents provide the ability to stop the
|
|
refresh, do not create periodically auto-refreshing pages. [Priority 2]
|
|
,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-auto-forward"
|
|
class="noxref">7.5</a> Until user agents provide the ability to stop
|
|
auto-redirect, do not use markup to redirect pages automatically. Instead,
|
|
configure the server to perform redirects. [Priority 2] .</li>
|
|
</ul>
|
|
|
|
<p>This element can specify metadata for a document including keywords, and
|
|
information about the author. Please refer to the section on <a
|
|
href="http://www.w3.org/TR/WCAG10-CORE-TECHS/#auto-page-refresh">automatic page
|
|
refresh</a> for information on why META should <strong>not</strong> be used to
|
|
redirect or auto-refresh pages.</p>
|
|
|
|
<p>The following are <strong>deprecated</strong> HTML examples. The first
|
|
changes the user's page at page at regular intervals. Content developers should
|
|
<strong>not</strong> use this technique to simulate "push" technology.
|
|
Developers cannot predict how much time a user will require to read a page;
|
|
premature refresh can disorient users. Content developers should avoid periodic
|
|
refresh and allow users to choose when they want the latest information.</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<META http-equiv="refresh" content="60">
|
|
<BODY>
|
|
<P><em>...Information...</em>
|
|
</BODY>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>The following HTML example (using the META element) forwards the user from
|
|
one page to another after a timeout. However, users should <strong>not</strong>
|
|
redirect users with this markup since is non-standard, it disorients users, and
|
|
it can disrupt a browser's history of visited pages.</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<HEAD>
|
|
<TITLE>Don't use this!</TITLE>
|
|
<META http-equiv="refresh" content="5;
|
|
http://www.example.com/newpage">
|
|
</HEAD>
|
|
<BODY>
|
|
<P>If your browser supports Refresh,
|
|
you'll be transported to our
|
|
<A href="http://www.example.com/newpage">new site</A>
|
|
in 5 seconds, otherwise, select the link manually.
|
|
</BODY>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>1.1.4 <a id="doctype" name="doctype">The !DOCTYPE statement</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-identify-grammar"
|
|
class="noxref">3.2</a> Create documents that validate to published formal
|
|
grammars. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Validating to a published formal grammar and declaring that validation at
|
|
the beginning of a document lets the user know that the structure of the
|
|
document is sound. It also lets the user agent know where to look for semantics
|
|
if it needs to. <a href="http://validator.w3.org/">The W3C Validation
|
|
Service</a> validates documents against a <a
|
|
href="http://validator.w3.org/sgml-lib/catalog">whole list of published
|
|
grammars</a>.</p>
|
|
|
|
<p>It is preferable to validate to W3C grammars. Refer to the <a
|
|
href="http://www.w3.org/TR/WCAG10-CORE-TECHS/#access-reviewed">Technologies
|
|
Reviewed for Accessibility</a>.</p>
|
|
|
|
<!-- <p>We will link to XML techniques document when ready.</p> -->
|
|
<h4>1.1.5 The <a id="link-metadata" name="link-metadata" href="#edef-LINK">
|
|
LINK</a> element and navigation tools</h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-bundled-version"
|
|
class="noxref">13.9</a> Provide information about document collections (i.e.,
|
|
documents comprising multiple pages.). [Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>Content developers should use the <a href="#edef-LINK">LINK</a> element and
|
|
link types (refer to <cite><a href="#ref-HTML4"
|
|
title="Link to reference HTML4">[HTML4]</a></cite>, section 6.12) to describe
|
|
document navigation mechanisms and organization. Some user agents may
|
|
synthesize navigation tools or allow ordered printing of a set of documents
|
|
based on such markup.</p>
|
|
|
|
<div class="example">
|
|
<p><strong><a id="example-link" name="example-link">Example.</a></strong></p>
|
|
|
|
<p>The following <a href="#edef-LINK">LINK</a> elements might be included in
|
|
the head of chapter 2 of a book:</p>
|
|
|
|
<pre>
|
|
<LINK rel="Next" href="chapter3">
|
|
<LINK rel="Prev" href="chapter1">
|
|
<LINK rel="Start" href="cover">
|
|
<LINK rel="Glossary" href="glossary">
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>1.1.6 The <a id="link-alternative-docs" name="link-alternative-docs"
|
|
href="#edef-LINK">LINK</a> element and alternative documents</h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
|
|
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
|
|
alternative presentation or page. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>The LINK element may also be used to designate alternative documents.
|
|
Browsers should load the alternative page automatically based on the user's
|
|
browser type and preferences. For example, use the LINK element as follows:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>User agents that support LINK will load the alternative page for those users
|
|
whose browsers may be identified as supporting "aural","braille", or "tty"
|
|
rendering.</p>
|
|
|
|
<pre>
|
|
<HEAD>
|
|
<TITLE>Welcome to the Virtual Mall!</TITLE>
|
|
<LINK title="Text-only version"
|
|
rel="alternate"
|
|
href="text_only"
|
|
media="aural, braille, tty">
|
|
</HEAD>
|
|
<BODY><P>...</BODY>
|
|
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>1.2 <a id="grouping" name="grouping">Structural grouping</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-group-information"
|
|
class="noxref">12.3</a> Divide large blocks of information into more manageable
|
|
groups where natural and appropriate. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>The following HTML 4.01 mechanisms group content and make it easier to
|
|
understand.:</p>
|
|
|
|
<ul>
|
|
<li>Use <a href="#edef-FIELDSET">FIELDSET</a> to <a href="#forms">group form
|
|
controls into semantic units</a> and describe the group with the <a
|
|
href="#edef-LEGEND">LEGEND</a> element.</li>
|
|
|
|
<li>Use <a href="#edef-OPTGROUP">OPTGROUP</a> to <a
|
|
href="#forms-group-options">organize long lists of menu options into smaller
|
|
groups.</a>.</li>
|
|
|
|
<li><a href="#tables">Use tables for tabular data</a> and describe the table
|
|
with <a href="#edef-CAPTION">CAPTION</a>.</li>
|
|
|
|
<li><a href="#tables">Group table rows and columns</a> with <a
|
|
href="#edef-THEAD">THEAD</a>, <a href="#edef-TBODY">TBODY</a>, <a
|
|
href="#edef-TFOOT">TFOOT</a>, and <a href="#edef-COLGROUP">COLGROUP</a>.</li>
|
|
|
|
<li><a href="#lists">Nest lists</a> with <a href="#edef-UL">UL</a>, <a
|
|
href="#edef-OL">OL</a>, and <a href="#edef-DL">DL</a>.</li>
|
|
|
|
<li>Use section headings (<a href="#edef-H1">H1</a> - H6) to create structured
|
|
documents and break up long stretches of text. Refer to the following section
|
|
for more information.</li>
|
|
|
|
<li>Break up lines of text into paragraphs (with the <a href="#edef-P">P</a>
|
|
element).</li>
|
|
|
|
<li>Group related links. Refer to the section <a href="#group-bypass">Grouping
|
|
and bypassing links</a></li>
|
|
</ul>
|
|
|
|
<p>All of these grouping mechanisms should be used when appropriate and
|
|
natural, i.e., when the information lends itself to logical groups. Content
|
|
developers should not create groups randomly, as this will confuse all users.
|
|
<!--Link to style section for no spaces in titles ??? --></p>
|
|
|
|
<h4>1.2.1 <a id="document-headers" name="document-headers">Section
|
|
headings</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-logical-headings"
|
|
class="noxref">3.5</a> Use header elements to convey document structure and use
|
|
them according to specification. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Long documents are often divided into a variety of chapters, chapters have
|
|
subtopics and subtopics are divided into various sections, sections into
|
|
paragraphs, etc. These semantic chunks of information make up the structure of
|
|
the document.</p>
|
|
|
|
<p>Sections should be introduced with the HTML heading elements (<a
|
|
href="#edef-H1">H1</a>-H6). Other markup may complement these elements to
|
|
improve presentation (e.g., the <a href="#edef-HR">HR</a> element to create a
|
|
horizontal dividing line), but visual presentation is not sufficient to
|
|
identify document sections.</p>
|
|
|
|
<p>Since some users skim through a document by navigating its headings, it is
|
|
important to use them appropriately to convey document structure. Users should
|
|
order heading elements properly. For example, in HTML, H2 elements should
|
|
follow H1 elements, H3 elements should follow H2 elements, etc. Content
|
|
developers should not "skip" levels (e.g., H1 directly to H3). Do not use
|
|
headings to create font effects; use <a
|
|
href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-fonts">style sheets to
|
|
change font styles</a> for example.</p>
|
|
|
|
<p>Note that in HTML, heading elements (H1 - H6) only start sections, they
|
|
don't contain them as element content. The following HTML markup shows how
|
|
style sheets may be used to control the appearance of a heading and the content
|
|
that follows:</p>
|
|
|
|
<div class="example">
|
|
<p><strong><a id="example-header" name="example-header">
|
|
Example.</a></strong></p>
|
|
|
|
<pre>
|
|
<HEAD>
|
|
<TITLE>Cooking techniques</TITLE>
|
|
<STYLE type="text/css">
|
|
/* Indent heading and following content */
|
|
DIV.section2 { margin-left: 5% }
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<H1>Cooking techniques</H1>
|
|
<em>... some text here ...</em>
|
|
<DIV class="section2">
|
|
<H2>Cooking with oil</H2>
|
|
<em>... text of the section ...</em>
|
|
</DIV>
|
|
|
|
<DIV class="section2">
|
|
<H2>Cooking with butter</H2>
|
|
<em>... text of the section ...</em>
|
|
</DIV>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p><a href="#links">See also the section on links</a>.</p>
|
|
|
|
<h2>2 <a id="language" name="language">Language information</a></h2>
|
|
|
|
<h3>2.1 <a id="changes-in-lang" name="changes-in-lang">Identifying changes in
|
|
language</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-identify-changes"
|
|
class="noxref">4.1</a> Clearly identify changes in the natural language of a
|
|
document's text and any text equivalents (e.g., captions).
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>If you use a number of different languages on a page, make sure that any
|
|
changes in language are clearly identified by using the "<a
|
|
href="#adef-lang">lang</a>" attribute:</p>
|
|
|
|
<div class="example">
|
|
<p><strong><a id="example-lang" name="example-lang">Example.</a></strong></p>
|
|
|
|
<pre>
|
|
<P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>,
|
|
she entered both the room, and his life, forever. <Q>My name
|
|
is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
|
|
he replied in impeccable Italian, locking the door.
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Identifying changes in language are important for a number of reasons:</p>
|
|
|
|
<ol>
|
|
<li>Users who are reading the document in braille will be able to substitute
|
|
the appropriate control codes (markup) where language changes occur to ensure
|
|
that the braille translation software will generate the correct characters
|
|
(accented characters, for instance). These control codes also prevent braille
|
|
contractions from being generated, which could further confuse the user.
|
|
Braille contractions combine commonly used groups of characters that usually
|
|
appear in multiple cells into a single cell. For example, "ing" which usually
|
|
takes up three cells (one for each character) can be contracted into a single
|
|
cell.</li>
|
|
|
|
<li>Similarly, speech synthesizers that "speak" multiple languages will be able
|
|
to generate the text in the appropriate accent with proper pronunciation. If
|
|
changes are not marked, the synthesizer will try its best to speak the words in
|
|
the primary language it works in. Thus, the French word for car, <span
|
|
lang="fr">"voiture"</span> would be pronounced "voter" by a speech synthesizer
|
|
that uses English as its primary language.</li>
|
|
|
|
<li>Users who are unable to translate between languages themselves, will be
|
|
able to have unfamiliar languages translated by machine translators.</li>
|
|
</ol>
|
|
|
|
<h3>2.2 <a id="identify-primary-lang" name="identify-primary-lang">Identifying
|
|
the primary language</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-identify-lang"
|
|
class="noxref">4.3</a> Identify the primary natural language of a document.
|
|
[Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>It is also good practice to identify the primary language of a document,
|
|
either with markup (as shown below) or through HTTP headers.</p>
|
|
|
|
<div class="example">
|
|
<p><strong><a id="example-lang-2" name="example-lang-2">
|
|
Example.</a></strong></p>
|
|
|
|
<pre>
|
|
<HTML lang="fr">
|
|
....rest of an HTML document written in French...
|
|
</HTML>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h2>3 <a id="text" name="text">Text markup</a></h2>
|
|
|
|
<p>The following sections discuss ways to add structure to pieces of text.</p>
|
|
|
|
<h3>3.1 <a id="text-emphasis" name="text-emphasis">Emphasis</a></h3>
|
|
|
|
<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>
|
|
</ul>
|
|
|
|
<p>The proper HTML elements should be used to mark up emphasis: <a
|
|
href="#edef-EM">EM</a> and <a href="#edef-STRONG">STRONG</a>. The <a
|
|
href="#edef-B">B</a> and <a href="#edef-I">I</a> elements should not be used;
|
|
they are used to create a visual presentation effect. The EM and STRONG
|
|
elements were designed to indicate structural emphasis that may be rendered in
|
|
a variety of ways (font style changes, speech inflection changes, etc.)
|
|
<!--Could add a
|
|
section for SUB/SUP saying don't use for small text --></p>
|
|
|
|
<h3>3.2 <a id="text-abbr" name="text-abbr">Acronyms and abbreviations</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-expand-abbr"
|
|
class="noxref">4.2</a> Specify the expansion of each abbreviation or acronym in
|
|
a document where it first occurs. [Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>Mark up abbreviations and acronyms with <a href="#edef-ABBR">ABBR</a> and <a
|
|
href="#edef-ACRONYM">ACRONYM</a> and use "<a href="#adef-title">title</a>" to
|
|
indicate the expansion:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>This also applies to shortened phrases used as headings for table row or
|
|
columns. If a heading is already abbreviated provide the expansion in ABBR. If
|
|
a heading is long, you may wish to provide an abbreviation, as described in <a
|
|
href="#data-tables">Data Tables</a>.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
...
|
|
<TH>First name</TH>
|
|
<TH><ABBR title="Social Security Number">SS#</ABBR>
|
|
...
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>3.3 <a id="text-quotes" name="text-quotes">Quotations</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-quotes" class="noxref">
|
|
3.7</a> Mark up quotations. Do not use quotation markup for formatting effects
|
|
such as indentation. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>The <a href="#edef-Q">Q</a> and <a href="#edef-BLOCKQUOTE">BLOCKQUOTE</a>
|
|
elements mark up inline and block quotations, respectively.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>This example marks up a longer quotation with <a href="#edef-BLOCKQUOTE">
|
|
BLOCKQUOTE</a>:</p>
|
|
|
|
<pre>
|
|
<BLOCKQUOTE cite="http://www.example.com/loveslabourlost">
|
|
<P>Remuneration! O! that's the Latin word for three farthings.
|
|
--- William Shakespeare (Love's Labor Lost).
|
|
</P>
|
|
</BLOCKQUOTE>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>3.4 <a id="text-markup" name="text-markup">Markup and style sheets rather
|
|
than images: The example of math</a></h3>
|
|
|
|
<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>
|
|
</ul>
|
|
|
|
<p>Using markup (and style sheets) where possible rather than images (e.g., a
|
|
mathematical equation) promotes accessibility for the following reasons:</p>
|
|
|
|
<ul>
|
|
<li>Text may be magnified or interpreted as speech or braille.</li>
|
|
|
|
<li>Search engines can use text information.</li>
|
|
</ul>
|
|
|
|
<p>As an example, consider these techniques for putting mathematics on the
|
|
Web:</p>
|
|
|
|
<ul>
|
|
<li>Ensure that users know what variables represent, for example, in the
|
|
equation "F = m * a", indicate that F= Force, m = mass, a = acceleration.</li>
|
|
|
|
<li>For straightforward equations, use characters, as in "x + y = z"</li>
|
|
|
|
<li>For more complex equations, mark them up with MathML (<cite><a
|
|
href="#ref-MATHML" title="Link to reference MATHML">[MATHML]</a></cite>) or
|
|
TeX. <strong>Note.</strong> MathML can be used to create very accessible
|
|
documents but currently is not as widely supported or used as TeX.</li>
|
|
|
|
<li>Provide a text description of the equation and, where possible, use
|
|
character entity references to create the mathematical symbols. A text
|
|
equivalent must be provided if the equation is represented by one or more
|
|
images.</li>
|
|
</ul>
|
|
|
|
<p>TeX is commonly used to create technical papers which are then converted to
|
|
HTML for publication on the Web. However, converters tend to generate images,
|
|
use deprecated markup, and use tables for layout. Consequently, content
|
|
providers should:</p>
|
|
|
|
<ol>
|
|
<li>Make the original TeX (or LaTeX) document available on the Web. There is a
|
|
system called "AsTeR" (<cite><a href="#ref-ASTER"
|
|
title="Link to reference ASTER">[ASTER]</a></cite>) that can create an auditory
|
|
rendition of TeX and LaTeX documents. Also, IBM has a plug-in for Netscape and
|
|
Internet Explorer that reads TeX/LaTeX documents and some of MathML (refer to
|
|
<cite><a href="#ref-HYPERMEDIA" title="Link to reference HYPERMEDIA">
|
|
[HYPERMEDIA]</a></cite>). <strong>Note.</strong> These tools work primarily in
|
|
the English environment and may not work so well with speech synthesizers whose
|
|
primary language is not English.</li>
|
|
|
|
<li>Ensure that the HTML created by the conversion process is accessible.
|
|
Provide a single description of the equation (rather than "alt" text on every
|
|
generated image as there may be small images for bits and pieces of the
|
|
equation).</li>
|
|
</ol>
|
|
|
|
<h3>3.5 <a id="misc-markup" name="misc-markup">Eight other structural elements
|
|
(to identify citations, code fragments, deleted text, and others)</a></h3>
|
|
|
|
<p>The HTML 4.01 specification defines the following structural elements for
|
|
miscellaneous markup needs:</p>
|
|
|
|
<dl>
|
|
<dt><a href="#edef-CITE">CITE</a></dt>
|
|
|
|
<dd>Contains a citation or a reference to other sources.</dd>
|
|
|
|
<dt><a href="#edef-DFN">DFN</a></dt>
|
|
|
|
<dd>Indicates that this is the defining instance of the enclosed term.</dd>
|
|
|
|
<dt><a href="#edef-CODE">CODE</a></dt>
|
|
|
|
<dd>Designates a fragment of computer code.</dd>
|
|
|
|
<dt><a href="#edef-SAMP">SAMP</a></dt>
|
|
|
|
<dd>Designates sample output from programs, scripts, etc.</dd>
|
|
|
|
<dt><a href="#edef-KBD">KBD</a></dt>
|
|
|
|
<dd>Indicates text to be entered by the user.</dd>
|
|
|
|
<dt><a href="#edef-VAR">VAR</a></dt>
|
|
|
|
<dd>Indicates an instance of a variable or program argument.</dd>
|
|
|
|
<dt><a href="#edef-INS">INS</a></dt>
|
|
|
|
<dd>Indicates text inserted into a document.</dd>
|
|
|
|
<dt><a href="#edef-DEL">DEL</a></dt>
|
|
|
|
<dd>Indicates text deleted from a document.</dd>
|
|
</dl>
|
|
|
|
<h2>4 <a id="lists" name="lists">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>
|
|
</ul>
|
|
|
|
<p>The HTML list elements <a href="#edef-DL">DL</a>, <a href="#edef-UL">UL</a>,
|
|
and <a href="#edef-OL">OL</a> should only be used to create lists, not for
|
|
formatting effects such as indentation. Refer to information on <a
|
|
href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment">CSS and tables
|
|
for layout</a> in the CSS Techniques <cite><a href="#ref-WCAG10-CSS-TECHNIQUES"
|
|
title="Link to reference WCAG10-CSS-TECHNIQUES">
|
|
[WCAG10-CSS-TECHNIQUES]</a></cite>.</p>
|
|
|
|
<!-- There used to be a technique here. Is it gone? -IJ -->
|
|
<p><a id="order-lists" name="order-lists">Ordered lists help non-visual users
|
|
navigate.</a> Non-visual users may "get lost" in lists, especially in nested
|
|
lists and those that do not indicate the specific nest level for each list
|
|
item. Until user agents provide a means to identify list context clearly (e.g.,
|
|
by supporting the ':before' pseudo-element in CSS2), content developers should
|
|
include contextual clues in their lists.</p>
|
|
|
|
<p>For numbered lists, compound numbers are more informative than simple
|
|
numbers. Thus, a list numbered "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1," provides more
|
|
context than the same list without compound numbers, which might be formatted
|
|
as follows:</p>
|
|
|
|
<pre>
|
|
1.
|
|
1.
|
|
2.
|
|
1.
|
|
3.
|
|
2.
|
|
1.
|
|
</pre>
|
|
|
|
<p>and would be spoken as "1, 1, 2, 1, 2, 3, 2, 1", conveying no information
|
|
about list depth.</p>
|
|
|
|
<p><cite><a href="#ref-CSS1" title="Link to reference CSS1">[CSS1]</a></cite>
|
|
and <cite><a href="#ref-CSS2" title="Link to reference CSS2">[CSS2]</a></cite>
|
|
allow users to control number styles (for all lists, not just ordered) through
|
|
user style sheets.</p>
|
|
|
|
<div class="css-example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>The following CSS2 style sheet shows how to specify compound numbers for
|
|
nested lists created with either UL or OL elements. Items are numbered as "1",
|
|
"1.1", "1.1.1", etc.</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 or user agents allow users to control
|
|
rendering of lists through other means, authors should consider providing
|
|
contextual clues in unnumbered nested lists. Non-visual users may have
|
|
difficulties knowing where a list begins and ends and where each list item
|
|
starts. For example, if a list entry wraps to the next line on the screen, it
|
|
may appear to be two separate items in the list. This may pose a problem for
|
|
legacy screen readers.</p>
|
|
|
|
<h3>4.1 <a id="list-bullets" name="list-bullets">Use style sheets to change
|
|
list bullets</a></h3>
|
|
|
|
<p>To change the "bullet" style of unordered list items created with the <a
|
|
href="#edef-LI">LI</a> element, use style sheets. In CSS, it is possible to
|
|
specify a fallback bullet style (e.g., 'disc') if a bullet image cannot be
|
|
loaded.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<HEAD>
|
|
<TITLE>Using style sheets to change bullets</TITLE>
|
|
<STYLE type="text/css">
|
|
UL { list-style: url(star.gif) disc }
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<UL>
|
|
<LI>Audrey
|
|
<LI>Laurie
|
|
<LI>Alice
|
|
</UL>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>To further ensure that users understand differences between list items
|
|
indicated visually, content developers should provide a text label before or
|
|
after the list item phrase:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>In this example, new information is communicated through text ("New"), font
|
|
style (bold), and color (yellow bullet, red text on yellow background).</p>
|
|
|
|
<pre>
|
|
<HEAD>
|
|
<TITLE>Bullet styles example</TITLE>
|
|
<STYLE type="text/css">
|
|
.newtxt { font-weight: bold;
|
|
color: red;
|
|
background-color: yellow }
|
|
.newbullet { list-style : url(yellow.gif) disc }
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<UL>
|
|
<LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
|
|
<LI> 401(k)</LI>
|
|
</UL>
|
|
</BODY>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>4.1.1 <a id="list-images" name="list-images">Images used as
|
|
bullets</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>Avoid using images as bullets in definition lists created with <a
|
|
href="#edef-DL">DL</a>, <a href="#edef-DT">DT</a>, and <a href="#edef-DD">
|
|
DD</a>. However, if this method is used, be sure to provide a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> for the images.</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<HEAD>
|
|
<TITLE>Deprecated example using image in DL lists</TITLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<DL>
|
|
<DD><IMG src="star.gif" alt="* ">Audrey
|
|
<DD><IMG src="star.gif" alt="* ">Laurie
|
|
<DD><IMG src="star.gif" alt="* ">Alice
|
|
</DL>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Content developers should avoid list styles where bullets provide additional
|
|
(visual) information. However, if this is done, be sure to provide a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> describing meaning of the bullet:</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<DL>
|
|
<DD><IMG src="red.gif" alt="New:">Roth IRA</DD>
|
|
<DD><IMG src="yellow.gif" alt="Old:">401(k)</DD>
|
|
</DL>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h2>5 <a id="tables" name="tables">Tables</a></h2>
|
|
|
|
<p>This section discusses the accessibility of tables and elements that one can
|
|
put in a <a href="#edef-TABLE">TABLE</a> element. Two types of tables are
|
|
discussed: tables used to organize data, and tables used to create a visual
|
|
layout of the page.</p>
|
|
|
|
<h3>5.1 <a id="data-tables" name="data-tables">Tables of data</a></h3>
|
|
|
|
<p>Content developers may make HTML 4.01 data tables more accessible in a
|
|
number of ways:</p>
|
|
|
|
<ul>
|
|
<li>Providing summary information</li>
|
|
|
|
<li>Identifying row and column information</li>
|
|
</ul>
|
|
|
|
<h4>5.1.1 <a id="table-summary-info" name="table-summary-info">Providing
|
|
summary information</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-summaries"
|
|
class="noxref">5.5</a> Provide summaries for tables. [Priority 3]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-abbreviate-labels"
|
|
class="noxref">5.6</a> Provide abbreviations for header labels.
|
|
[Priority 3]</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li>Provide a caption via the <a href="#edef-CAPTION">CAPTION</a> element. A
|
|
table caption describes the nature of the table in one to three sentences. Two
|
|
examples:
|
|
|
|
<ol>
|
|
<li>"Cups of coffee consumed by each senator."</li>
|
|
|
|
<li>"Who spends the most on pollution cleanup?"</li>
|
|
</ol>
|
|
|
|
A caption may not always be necessary.</li>
|
|
|
|
<li>If a CAPTION is not provided, use the "title" attribute on the TABLE
|
|
element to describe the nature of the table in a few words.</li>
|
|
|
|
<li>Provide a summary via the "<a href="#adef-summary">summary</a>" attribute.
|
|
Summaries are especially useful for non-visual readers. A summary of the
|
|
relationships among cells is especially important for tables with nested
|
|
headings, cells that span multiple columns or rows, or other relationships that
|
|
may not be obvious from analyzing the structure of the table but that may be
|
|
apparent in a visual rendering of the table. A summary may also describe how
|
|
the table fits into the context of the current document. If no caption is
|
|
provided, it is even more critical to provide a summary. Two examples:
|
|
|
|
<ol>
|
|
<li>"This table charts the number of cups of coffee consumed by each senator,
|
|
the type of coffee (decaf or regular), and whether taken with sugar."</li>
|
|
|
|
<li>"Total required by pollution control standards as of January 1, 1971.
|
|
Commercial category includes stores, insurance companies and banks. The table
|
|
is divided into two columns. The left-hand column is 'Total investment required
|
|
in billions of dollars'. The right--hand column is 'Spending' and is divided
|
|
into three sub-columns. The first sub-column is titled '1970 actual in millions
|
|
of dollars', the second is '1971 planned in millions of dollars', and the third
|
|
is 'Percent change, 1970 versus 1971.' The rows are industries." [NBA,
|
|
1996].</li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li>Provide terse substitutes for header labels with the "<a
|
|
href="#adef-abbr">abbr</a>" attribute on TH. These will be particularly useful
|
|
for future speaking technologies that can read row and column labels for each
|
|
cell. Abbreviations cut down on repetition and reading time.</li>
|
|
</ul>
|
|
|
|
<!-- p>@@separate out the examples?</p -->
|
|
<h4>5.1.2 <a id="identifying-table-rows-columns"
|
|
name="identifying-table-rows-columns">Identifying rows and column
|
|
information</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-headers"
|
|
class="noxref">5.1</a> For data tables, identify row and column headers.
|
|
[Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-structure"
|
|
class="noxref">5.2</a> For data tables that have two or more logical levels of
|
|
row or column headers, use markup to associate data cells and header cells.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li>Identify structural groups of rows (<a href="#edef-THEAD">THEAD</a> for
|
|
repeated table headers, <a href="#edef-TFOOT">TFOOT</a> for repeated table
|
|
footers, and <a href="#edef-TBODY">TBODY</a> for other groups of rows) and
|
|
groups of columns (<a href="#edef-COLGROUP">COLGROUP</a> and <a
|
|
href="#edef-COL">COL</a>).</li>
|
|
|
|
<li>Label table elements with the "<a href="#adef-scope">scope</a>", "<a
|
|
href="#adef-headers">headers</a>", and "<a href="#adef-axis">axis</a>"
|
|
attributes so that future browsers and assistive technologies will be able to
|
|
select data from a table by filtering on categories.</li>
|
|
|
|
<li>Do not use <a href="#edef-PRE">PRE</a> to create a tabular layout of text
|
|
-- use the TABLE element so that assistive technologies may recognize that it
|
|
is a table.</li>
|
|
|
|
<li>For information about table headers, refer to the table header algorithm
|
|
and discussion in the HTML 4.01 Recommendation (<cite><a href="#ref-HTML4"
|
|
title="Link to reference HTML4">[HTML4]</a></cite>, section 11.4.3).</li>
|
|
</ul>
|
|
|
|
<div class="example"><strong>Example.</strong>
|
|
|
|
<p>This example shows how to associate data cells (created with <a
|
|
href="#edef-TD">TD</a>) with their corresponding headers by means of the "<a
|
|
href="#adef-headers">headers</a>" attribute. The "headers" attribute specifies
|
|
a list of header cells (row and column labels) associated with the current data
|
|
cell. This requires each header cell to have an "id" attribute.</p>
|
|
|
|
<pre>
|
|
<TABLE border="1"
|
|
summary="This table charts the number of
|
|
cups of coffee consumed by each senator,
|
|
the type of coffee (decaf or regular),
|
|
and whether taken with sugar.">
|
|
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
|
|
<TR>
|
|
<TH id="header1">Name</TH>
|
|
<TH id="header2">Cups</TH>
|
|
<TH id="header3" abbr="Type">Type of Coffee</TH>
|
|
<TH id="header4">Sugar?</TH>
|
|
<TR>
|
|
<TD headers="header1">T. Sexton</TD>
|
|
<TD headers="header2">10</TD>
|
|
<TD headers="header3">Espresso</TD>
|
|
<TD headers="header4">No</TD>
|
|
<TR>
|
|
<TD headers="header1">J. Dinnen</TD>
|
|
<TD headers="header2">5</TD>
|
|
<TD headers="header3">Decaf</TD>
|
|
<TD headers="header4">Yes</TD>
|
|
</TABLE>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>A speech synthesizer might render this tables as follows:</p>
|
|
|
|
<pre>
|
|
Caption: Cups of coffee consumed by each senator
|
|
Summary: This table charts the number of cups of coffee
|
|
consumed by each senator, the type of coffee
|
|
(decaf or regular), and whether taken with sugar.
|
|
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
|
|
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
|
|
</pre>
|
|
|
|
<p>A visual user agent might render this table as follows:</p>
|
|
|
|
<p><img src="techimages/coffee-table.gif"
|
|
alt="Illustration of coffee table rendering"
|
|
longdesc="techimages/coffee-table-longdesc.html" /> <a
|
|
id="coffee-table-longdesc" name="coffee-table-longdesc" rel="Alternate"
|
|
href="techimages/coffee-table-longdesc.html">[Description of coffee
|
|
table]</a></p>
|
|
|
|
<p>The next example associates the same header (<a href="#edef-TH">TH</a>) and
|
|
data (<a href="#edef-TD">TD</a>) cells as before, but this time uses the "<a
|
|
href="#adef-scope">scope</a>" attribute rather than "<a
|
|
href="#adef-headers">headers</a>". "Scope" must have one of the following
|
|
values: "row", "col", "rowgroup", or "colgroup." Scope specifies the set of
|
|
data cells to be associated with the current header cell. This method is
|
|
particularly useful for simple tables. It should be noted that the spoken
|
|
rendering of this table would be identical to that of the previous example. A
|
|
choice between the "headers" and "scope" attributes is dependent on the
|
|
complexity of the table. It does not affect the output so long as the
|
|
relationships between header and data cells are made clear in the markup.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<TABLE border="1"
|
|
summary="This table charts ...">
|
|
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
|
|
<TR>
|
|
<TH scope="col">Name</TH>
|
|
<TH scope="col">Cups</TH>
|
|
<TH scope="col" abbr="Type">Type of Coffee</TH>
|
|
<TH scope="col">Sugar?</TH>
|
|
<TR>
|
|
<TD>T. Sexton</TD> <TD>10</TD>
|
|
<TD>Espresso</TD> <TD>No</TD>
|
|
<TR>
|
|
<TD>J. Dinnen</TD> <TD>5</TD>
|
|
<TD>Decaf</TD> <TD>Yes</TD>
|
|
</TABLE>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>The following example shows how to create categories within a table using
|
|
the "<a href="#adef-axis">axis</a>" attribute.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<TABLE border="1">
|
|
<CAPTION>Travel Expense Report</CAPTION>
|
|
<TR>
|
|
<TH></TH>
|
|
<TH id="header2" axis="expenses">Meals
|
|
<TH id="header3" axis="expenses">Hotels
|
|
<TH id="header4" axis="expenses">Transport
|
|
<TD>subtotals</TD>
|
|
<TR>
|
|
<TH id="header6" axis="location">San Jose
|
|
<TH> <TH> <TH> <TD>
|
|
<TR>
|
|
<TD id="header7" axis="date">25-Aug-97
|
|
<TD headers="header6 header7 header2">37.74
|
|
<TD headers="header6 header7 header3">112.00
|
|
<TD headers="header6 header7 header4">45.00
|
|
<TD>
|
|
<TR>
|
|
<TD id="header8" axis="date">26-Aug-97
|
|
<TD headers="header6 header8 header2">27.28
|
|
<TD headers="header6 header8 header3">112.00
|
|
<TD headers="header6 header8 header4">45.00
|
|
<TD>
|
|
<TR>
|
|
<TD>subtotals
|
|
<TD>65.02
|
|
<TD>224.00
|
|
<TD>90.00
|
|
<TD>379.02
|
|
<TR>
|
|
<TH id="header10" axis="location">Seattle
|
|
<TH> <TH> <TH> <TD>
|
|
<TR>
|
|
<TD id="header11" axis="date">27-Aug-97
|
|
<TD headers="header10 header11 header2">96.25
|
|
<TD headers="header10 header11 header3">109.00
|
|
<TD headers="header10 header11 header4">36.00
|
|
<TD>
|
|
<TR>
|
|
<TD id="header12" axis="date">28-Aug-97
|
|
<TD headers="header10 header12 header2">35.00
|
|
<TD headers="header10 header12 header3">109.00
|
|
<TD headers="header10 header12 header4">36.00
|
|
<TD>
|
|
<TR>
|
|
<TD>subtotals
|
|
<TD>131.25
|
|
<TD>218.00
|
|
<TD>72.00
|
|
<TD>421.25
|
|
<TR>
|
|
<TH>Totals
|
|
<TD>196.27
|
|
<TD>442.00
|
|
<TD>162.00
|
|
<TD>800.27
|
|
</TABLE>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>This table lists travel expenses at two locations: San Jose and Seattle, by
|
|
date, and category (meals, hotels, and transport). The following image shows
|
|
how a visual user agent might render it. <a id="travel-report-longdesc"
|
|
name="travel-report-longdesc" rel="Alternate"
|
|
href="techimages/travel-report-longdesc.html">[Description of travel
|
|
table]</a></p>
|
|
|
|
<p><img src="techimages/table1.gif"
|
|
alt="Travel Expense Report table as rendered by a visual user agent."
|
|
longdesc="techimages/travel-report-longdesc.html" /></p>
|
|
|
|
<h3>5.2 <a id="tables-layout" name="tables-layout">Tables for layout</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<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>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-layout"
|
|
class="noxref">5.4</a> If a table is used for layout, do not use any structural
|
|
markup for the purpose of visual formatting. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Authors should use style sheets for <a
|
|
href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment">layout and
|
|
positioning</a>. However, when it is necessary to use a table for layout, the
|
|
table must linearize in a readable order. When a table is linearized, the
|
|
contents of the cells become a series of paragraphs (e.g., down the page) one
|
|
after another. Cells should make sense when read in row order and should
|
|
include structural elements (that create paragraphs, headings, lists, etc.) so
|
|
the page makes sense after linearization.</p>
|
|
|
|
<p>Also, when using tables to create a layout, do not use structural markup to
|
|
create visual formatting. For example, the TH (table header) element, is
|
|
usually displayed visually as centered, and bold. If a cell is not actually a
|
|
header for a row or column of data, use style sheets or formatting attributes
|
|
of the element.</p>
|
|
|
|
<h3>5.3 <a id="wrapped-text" name="wrapped-text">Linearizing tables</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-linear-tables"
|
|
class="noxref">10.3</a> Until user agents (including assistive technologies)
|
|
render side-by-side text correctly, provide a linear text alternative (on the
|
|
current page or some other) for <em>all</em> tables that lay out text in
|
|
parallel, word-wrapped columns. [Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>Tables used to lay out pages where cell text wraps pose problems for older
|
|
screen readers that do not interpret the source HTML or browsers that do not
|
|
allow navigation of individual table cells. These screen readers will read
|
|
across the page, reading sentences on the same row from different columns as
|
|
one sentence.</p>
|
|
|
|
<p>For example, if a table is rendered like this on the screen:</p>
|
|
|
|
<pre>
|
|
There is a 30% chance of Classes at the University of Wisconsin
|
|
rain showers this morning, but they will resume on September 3rd.
|
|
should stop before the weekend.
|
|
</pre>
|
|
|
|
<p>This might be read by a screen reader as:</p>
|
|
|
|
<pre>
|
|
There is a 30% chance of Classes at the University of Wisconsin
|
|
rain showers this morning, but they will resume on September 3rd.
|
|
should stop before the weekend.
|
|
</pre>
|
|
|
|
<!-- p>Screen readers that read the source HTML will recognize the
|
|
structure of each cell, but for older screen readers, content
|
|
developers may minimize the risk of word wrapping by limiting the
|
|
amount of text in each cell. Also, the longest chunks of text should
|
|
all be in the last column (rightmost for left-to-right tables). This
|
|
way, if they wrap, they will still be read coherently. Content
|
|
developers should test tables for wrapping with a browser window
|
|
dimension of "640x480".</p -->
|
|
<!-- P>Since table markup is structural, and we suggest separating structure
|
|
from presentation, we recommend using style sheets to create layout,
|
|
alignment, and presentation effects. Thus, the two columns in the
|
|
above example could have been created using style sheets. Please refer
|
|
to the section on style sheets for more information.</p -->
|
|
<p>It is usually very simple to linearize a table used to layout a page -
|
|
simply strip the table markup from the table. There are several tools that do
|
|
this, and it is becoming more common for screen readers and some browsers to
|
|
linearize tables.</p>
|
|
|
|
<p>However, linearizing <a href="#data-tables">data tables</a> requires a
|
|
different strategy. Since data cells rely on the information provided by
|
|
surrounding and header cells, the relationship information that is available
|
|
visually needs to be translated into the linear table.</p>
|
|
|
|
<p>For example, specify the column layout order. The natural language writing
|
|
direction may affect column layout and thus the order of a linearized table.
|
|
The "<a href="#adef-dir">dir</a>" attribute specifies column layout order
|
|
(e.g., dir="rtl" specifies right-to-left layout).</p>
|
|
|
|
<!-- p>@@also the case for layout tables?</p --><!-- p>@@example</p -->
|
|
<!-- p> @@again, there are tools to help produce linearized versions of data tables.
|
|
We will provide a link </p -->
|
|
<p>This markup will also help browsers linearize tables (also called table
|
|
"serialization"). A row-based linear version may be created by reading the row
|
|
header, then preceding each cell with the cell's column header. Or, the
|
|
linearization might be column-based. Future browsers and assistive technologies
|
|
will be able to automatically translate tables into linear sequences or
|
|
navigate a table cell by cell if data is labeled appropriately. The WAI
|
|
Evaluation and Repair working group is tracking the progress of tools as well
|
|
as developing their own that will allow users to linearize or navigate tables
|
|
cell by cell. Refer to <cite><a href="#ref-WAI-ER"
|
|
title="Link to reference WAI-ER">[WAI-ER]</a></cite>.</p>
|
|
|
|
<p><span class="quicktest">Quicktest!</span> To get a better understanding of
|
|
how a screen reader would read a table, run a piece of paper down the page and
|
|
read your table line by line.</p>
|
|
|
|
<h3>5.4 <a id="bc-tables" name="bc-tables">Backward compatibility issues for
|
|
tables</a></h3>
|
|
|
|
<!-- p>@@checkpoint that this can fit under?</p -->
|
|
<p>In HTML 3.2 browsers, the rows of a <a href="#edef-TFOOT">TFOOT</a> element
|
|
will appear before the table body.
|
|
<!-- Used to say "before the BODY of the document" which
|
|
I don't think is true. -IJ --></p>
|
|
|
|
<h2>6 <a id="links" name="links">Links</a></h2>
|
|
|
|
<h3>6.1 <a id="link-text" name="link-text">Link text</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-meaningful-links"
|
|
class="noxref">13.1</a> Clearly identify the target of each link.
|
|
[Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Good link text should not be overly general; don't use "click here." Not
|
|
only is this phrase device-dependent (it implies a pointing device) it says
|
|
nothing about what is to be found if the link if followed. Instead of "click
|
|
here", link text should indicate the nature of the link target, as in "more
|
|
information about sea lions" or "text-only version of this page". Note that for
|
|
the latter case (and other format- or language-specific documents), content
|
|
developers are encouraged to use <a
|
|
href="http://www.w3.org/TR/WCAG10-CORE-TECHS/#content-negotiation">content
|
|
negotiation</a> instead, so that users who prefer text versions will have them
|
|
served automatically.</p>
|
|
|
|
<p>In addition to clear link text, content developers may specify a value of
|
|
the "title" attribute that clearly and accurately describes the target of the
|
|
link.</p>
|
|
|
|
<p><a id="link-consistent" name="link-consistent">If more than one link on a
|
|
page shares the same link text, all those links should point to the same
|
|
resource.</a> Such consistency will help page design as well as
|
|
accessibility.</p>
|
|
|
|
<p>If two or more links refer to different targets but share the same link
|
|
text, distinguish the links by specifying a different value for the "<a
|
|
href="#adef-title">title</a>" attribute of each <a href="#edef-A">A</a>
|
|
element.</p>
|
|
|
|
<p>"Auditory users" -- people who are blind, have difficulty seeing, or who are
|
|
using devices with small or no displays -- are unable to scan the page quickly
|
|
with their eyes. To get an overview of a page or to quickly find a link, these
|
|
users will often tab from one link to the next or review a list of available
|
|
links on a page.</p>
|
|
|
|
<p>Thus, for a series of related links, include introductory information in the
|
|
first link, then distinguishing information in the links that follow. This will
|
|
provide context information for users reading them in sequence.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<A href="my-doc.html">My document is available in HTML</A>,
|
|
<A href="my-doc.pdf" title="My document in PDF">PDF</A>,
|
|
<A href="my-doc.txt" title="My document in text">plain text</A>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>6.1.1 <a id="link-text-images" name="link-text-images">Text for images used
|
|
as links</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>When an image is used as the content of a link, specify a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> for the image.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<A href="routes.html">
|
|
<IMG src="topo.html"
|
|
alt="Current routes at Boulders Climbing Gym">
|
|
</A>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Or, if you provide link text, use a space as the "alt" attribute value of
|
|
the IMG element. Note that this text will appear on the page next to the
|
|
image.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<A href="routes.html">
|
|
<IMG src="topo.html" alt=" ">
|
|
Current routes at Boulders Climbing Gym
|
|
</A>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>6.2 <a id="group-bypass" name="group-bypass">Grouping and bypassing
|
|
links</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links"
|
|
class="noxref">13.6</a> Group related links, identify the group (for user
|
|
agents), and, until user agents do so, provide a way to bypass the group.
|
|
[Priority 3]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-divide-links"
|
|
class="noxref">10.5</a> Until user agents (including assistive technologies)
|
|
render adjacent links distinctly, include non-link, printable characters
|
|
(surrounded by spaces) between adjacent links. [Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>When links are grouped into logical sets (for example, in a navigation bar
|
|
that appears on every page in a site) they should be marked up as a unit.
|
|
Navigation bars are usually the first thing someone encounters on a page. For
|
|
users with speech synthesizers, this means having to hear a number of links on
|
|
every page before reaching the interesting content of a page. There are several
|
|
ways to allow users to bypass groups of links (as users with vision do when
|
|
they see the same set on each page):</p>
|
|
|
|
<ul>
|
|
<li>Include a link that allows users to skip over the set of navigation links.
|
|
<!-- LI>Use the HTML 4.01 "<a href="#adef-tabindex">tabindex</a>"
|
|
attribute to allow users to jump to an anchor after the set of
|
|
navigation links. This attribute is not yet widely supported. </li --></li>
|
|
|
|
<li>Provide a style sheet that allows users to hide the set of navigation
|
|
links.</li>
|
|
|
|
<li>Use the HTML 4.01 MAP element to group links, then identify the group with
|
|
the "<a href="#adef-title">title</a>" attribute.</li>
|
|
</ul>
|
|
|
|
<p>In the future, user agents may allow users to skip over elements such as
|
|
navigation bars.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>In this example, the <a href="#edef-MAP">MAP</a> element groups a set of
|
|
links, the "title" attribute identifies it as a navigation bar ,
|
|
<!-- "<a href="#adef-tabindex">tabindex</a>" is set
|
|
on an anchor following the group, --> and a link at the beginning of the group
|
|
links to the anchor after the group. Also, note that the links are separated by
|
|
non-link, printable characters (surrounded by spaces).</p>
|
|
|
|
<pre>
|
|
<BODY>
|
|
<MAP title="Navigation Bar">
|
|
<P>
|
|
[<A href="#how">Bypass navigation bar</A>]
|
|
[<A href="home.html">Home</A>]
|
|
[<A href="search.html">Search</A>]
|
|
[<A href="new.html">New and highlighted</A>]
|
|
[<A href="sitemap.html">Site map</A>]
|
|
</P>
|
|
</MAP>
|
|
<H1><A name="how">How to use our site</A></H1>
|
|
<!-- content of page -->
|
|
</BODY>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>6.3 <a id="link-accesskey" name="link-accesskey">Keyboard access</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-tab-order" class="noxref">
|
|
9.4</a> Create a logical tab order through links, form controls, and objects.
|
|
[Priority 3]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-shortcuts"
|
|
class="noxref">9.5</a> Provide keyboard shortcuts to important links (including
|
|
those in client-side image maps), form controls, and groups of form controls.
|
|
[Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>Keyboard access to active elements of a page is important for many users who
|
|
cannot use a pointing device. User agents may include features that allow users
|
|
to bind keyboard strokes to certain actions. HTML 4.01 allows content
|
|
developers to specify keyboard shortcuts in documents via the "<a
|
|
href="#adef-accesskey">accesskey</a>" attribute.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>In this example, if the user activates the "C" key, the link will be
|
|
followed.</p>
|
|
|
|
<pre>
|
|
<A accesskey="C" href="doc.html" hreflang="en"
|
|
title="XYZ company home page">
|
|
XYZ company home page</A>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Note: Until user agents provide an overview of which key bindings are
|
|
available, provide information on the key bindings.</p>
|
|
|
|
<h3>6.4 <a id="anchors-targets" name="anchors-targets">Anchors and
|
|
targets</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
|
|
class="noxref">10.1</a> Until user agents allow users to turn off spawned
|
|
windows, do not cause pop-ups or other windows to appear and do not change the
|
|
current window without informing the user. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<!-- p>@@include info about using target attribute on A to generate new
|
|
windows. test that an unknown target causes a new window to open.</p -->
|
|
<h2>7 <a id="images" name="images">Images and image maps</a></h2>
|
|
|
|
<p>The following sections discuss accessibility of images (including simple
|
|
animations such as GIF animations) and image maps.</p>
|
|
|
|
<p>For information about math represented as images, refer to the section on <a
|
|
href="#text-markup">using text markup and style sheets rather than
|
|
images</a>.</p>
|
|
|
|
<h3>7.1 <a id="image-text-equivalent" name="image-text-equivalent">Short text
|
|
equivalents for images ("alt-text")</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video. [Priority 1]
|
|
.</li>
|
|
</ul>
|
|
|
|
<p>When using <a href="#edef-IMG">IMG</a>, specify a short <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> with the "<a href="#adef-alt">alt</a>" attribute. <strong>
|
|
Note.</strong> The value of this attribute is referred to as "alt-text".</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<IMG src="magnifyingglass.gif" alt="Search">
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p><a id="object-alt" name="object-alt">When using</a> <a href="#edef-OBJECT">
|
|
OBJECT</a>, specify a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> in the body of the OBJECT element:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT data="magnifyingglass.gif" type="image/gif">
|
|
Search
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>7.2 <a id="long-descriptions" name="long-descriptions">Long descriptions of
|
|
images</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>When a short text equivalent does not suffice to adequately convey the
|
|
function or role of an image, provide additional information in a file
|
|
designated by the "<a href="#adef-longdesc">longdesc</a>" attribute:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<IMG src="97sales.gif" alt="Sales for 1997"
|
|
longdesc="sales97.html">
|
|
</pre>
|
|
|
|
<p>In sales97.html:</p>
|
|
|
|
<blockquote>
|
|
<p>A chart showing how sales in 1997 progressed. The chart<br />
|
|
is a bar-chart showing percentage increases in sales<br />
|
|
by month. Sales in January were up 10% from December 1996,<br />
|
|
sales in February dropped 3%, ..</p>
|
|
</blockquote>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p><a id="img-dlink" name="img-dlink">For user agents that don't support
|
|
"longdesc",</a> provide a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-d-link">description link</a> as
|
|
well next to the graphic:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html">
|
|
<A href="sales.html" title="Description of 1997 sales figures">[D]</A>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>When using OBJECT, specify longer text equivalent within the element's
|
|
content:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT data="97sales.gif" type="image/gif">
|
|
Sales in 1997 were down subsequent to our
|
|
<A href="anticipated.html">anticipated
|
|
purchase</A> ...
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Note that OBJECT content, unlike "alt" text, can include markup. Thus,
|
|
content developers can provide a link to additional information from within the
|
|
OBJECT element:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT data="97sales.gif" type="image/gif">
|
|
Chart of our Sales in 1997.
|
|
A <A href="desc.html">textual description</A> is available.
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>7.2.1 <a id="img-dlink-invis" name="img-dlink-invis">Invisible
|
|
d-links</a></h4>
|
|
|
|
<p><strong>Note. Invisible d-links are deprecated in favor of the "longdesc"
|
|
attribute</strong>.</p>
|
|
|
|
<p>An invisible <a href="http://www.w3.org/TR/WCAG10-TECHS/#def-d-link">
|
|
d-link</a> is a small (1-pixel) or transparent image whose "<a
|
|
href="#adef-alt">alt</a>" attribute value is "D-link" or "D" and is part of the
|
|
content of an <a href="#edef-A">A</a> element. Like other d-links, it refers to
|
|
a text equivalent of the associated image. Like other links, users can tab to
|
|
it. Invisible d-links thus provide a (temporary) solution for designers who
|
|
wish to avoid visible d-links for stylistic reasons.</p>
|
|
|
|
<h3>7.3 <a id="ascii-art" name="ascii-art">Ascii art</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-skip-over-ascii"
|
|
class="noxref">13.10</a> Provide a means to skip over multi-line ASCII art.
|
|
[Priority 3]</li>
|
|
</ul>
|
|
|
|
<p><a id="avoid-ascii-art" name="avoid-ascii-art">Avoid ASCII art</a>
|
|
(character illustrations) and use real images instead since it is easier to
|
|
supply a <a href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> for images. However, if <acronym
|
|
title="American Standard Code for Information Interchange">ASCII</acronym> art
|
|
must be used provide a link to jump over the ASCII art, as follows.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<P>
|
|
<a href="#post-art">skip over ASCII art</a>
|
|
<!-- ASCII art goes here -->
|
|
<a name="post-art">caption for ASCII art</a>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>ASCII art may also be marked up as follows [<a id="ascii-chart"
|
|
name="ascii-chart" href="#after-ascii-chart">skip over ASCII figure</a> or
|
|
consult a <a rel="Alternate" href="techimages/ascii-chart-longdesc.html">
|
|
description of chart</a>]:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre
|
|
title="Figure showing the percentage of photosensitive patients in whom a photoconvulsive response was elicited by a 2 second train of flashes with eyes open and closed.">
|
|
|
|
|
|
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
|
|
100 | * |
|
|
90 | * * |
|
|
80 | * * |
|
|
70 | @ * |
|
|
60 | @ * |
|
|
50 | * @ * |
|
|
40 | @ * |
|
|
30 | * @ @ @ * |
|
|
20 | |
|
|
10 | @ @ @ @ @ |
|
|
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
|
|
Flash frequency (Hz)
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p><a id="after-ascii-chart" name="after-ascii-chart">Another option</a> for
|
|
smaller ascii art is to use an <a href="#edef-ABBR">ABBR</a> element with "<a
|
|
href="#adef-title">title</a>".</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<P><ABBR title="smiley in ASCII art">:-)</ABBR>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>If the ASCII art is complex, ensure that the text equivalent adequately
|
|
describes it.</p>
|
|
|
|
<p>Another way to replace <acronym
|
|
title="American Standard Code for Information Interchange">ASCII</acronym> art
|
|
is to use human language substitutes. For example, <wink> might
|
|
substitute for a winking smiley: <abbr title="winking smiley">;-)</abbr>. Or,
|
|
the word "therefore" can replace arrows consisting of dashes and greater than
|
|
signs (e.g., -->), and the word "great" for the uncommon abbreviation
|
|
"gr8".</p>
|
|
|
|
<h3>7.4 <a id="image-maps" name="image-maps">Image maps</a></h3>
|
|
|
|
<p>An image map is an image that has "active regions". When the user selects
|
|
one of the regions, some action takes place -- a link may be followed,
|
|
information may be sent to a server, etc. To make an image map accessible,
|
|
content developers must ensure that each action associated with a visual region
|
|
may be activated without a pointing device.</p>
|
|
|
|
<!-- Fix the following and the related example
|
|
as per:
|
|
http://lists.w3.org/Archives/Public/w3c-wai-gl/1999JanMar/0439.html
|
|
-->
|
|
<p>Image maps are created with the <a href="#edef-MAP">MAP</a> element. HTML
|
|
allows two types of image maps: client-side (the user's browser processes a
|
|
URI) and server-side (the server processes click coordinates). For all image
|
|
maps, content developers must supply a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a>.</p>
|
|
|
|
<p>Content developers should create client-side image maps (with "<a
|
|
href="#adef-usemap">usemap</a>") rather than server-side image maps (with "<a
|
|
href="#adef-ismap">ismap</a>") because server-side image maps require a
|
|
specific input device. If server-side image maps must be used (e.g., because
|
|
the geometry of a region cannot be represented with values of the <a
|
|
href="#adef-shape">shape</a> attribute), authors must provide the same
|
|
functionality or information in an alternative accessible format. One way to
|
|
achieve this is to provide a textual link for each active region so that each
|
|
link is navigable with the <a href="#link-accesskey">keyboard</a>. If you must
|
|
use a server-side image map, please consult the section on <a
|
|
href="#server-side">server-side image maps</a></p>
|
|
|
|
<!-- Include example for server-side since more important. done - but comes
|
|
later, in the server-side section. -->
|
|
<h4>7.4.1 <a id="client-side-text-equivs" name="client-side-text-equivs">Text
|
|
equivalents for client-side image maps</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>Provide <a href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">
|
|
text equivalents</a> for image maps since they convey visual information. As
|
|
with other links, the link text should make sense when read out of context.
|
|
Refer to <a href="#link-text">the section on Link Text</a> for information on
|
|
writing good link text. Users may also want keyboard shortcuts to access
|
|
frequently followed links. Refer to <a href="#link-accesskey">the section on
|
|
Keyboard access to links</a>.</p>
|
|
|
|
<p>If <a href="#edef-AREA">AREA</a> is used to create the map, use the "<a
|
|
href="#adef-alt">alt</a>" attribute:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<IMG src="welcome.gif" alt="Image map of areas in the library"
|
|
usemap="#map1">
|
|
<MAP name="map1">
|
|
<AREA shape="rect" coords="0,0,30,30"
|
|
href="reference.html" alt="Reference">
|
|
<AREA shape="rect" coords="34,34,100,100"
|
|
href="media.html" alt="Audio visual lab">
|
|
</MAP>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>The following example illustrates the same idea, but uses <a
|
|
href="#edef-OBJECT">OBJECT</a> instead of IMG to insert the image to provide
|
|
more information about the image:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT data="welcome.gif" type="image/gif" usemap="#map1">
|
|
There are several areas in the library including
|
|
the <A href="reference.html">Reference</A> section and the
|
|
<A href="media.html">Audio Visual Lab</A>.
|
|
</OBJECT>
|
|
<MAP name="map1">
|
|
<AREA shape="rect" coords="0,0,30,30"
|
|
href="reference.html" alt="Reference">
|
|
<AREA shape="rect" coords="34,34,100,100"
|
|
href="media.html" alt="Audio visual lab">
|
|
</MAP>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>7.4.2 <a id="client-side-redundant-text" name="client-side-redundant-text">
|
|
Redundant text links for client-side image maps</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-redundant-client-links"
|
|
class="noxref">1.5</a> Until user agents render text equivalents for
|
|
client-side image map links, provide redundant text links for each active
|
|
region of a client-side image map. [Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>In addition to providing a text equivalent, provide redundant textual links.
|
|
If the <a href="#edef-A">A</a> element is used instead of AREA, the content
|
|
developer may describe the active regions and provide redundant links at the
|
|
same time:</p>
|
|
|
|
<div class="example">
|
|
<p><strong><a id="object-example" name="object-example">
|
|
Example.</a></strong></p>
|
|
|
|
<pre>
|
|
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
|
|
<MAP name="map1">
|
|
<P>Navigate the site.
|
|
[<A href="guide.html" shape="rect"
|
|
coords="0,0,118,28">Access Guide</A>]
|
|
[<A href="shortcut.html" shape="rect"
|
|
coords="118,0,184,28">Go</A>]
|
|
[<A href="search.html" shape="circle"
|
|
coords="184.200,60">Search</A>]
|
|
[<A href="top10.html" shape="poly"
|
|
coords="276,0,276,28,100,200,50,50,276,0">
|
|
Top Ten</A>]
|
|
</MAP>
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Note that in the previous example, the MAP element is the content of the
|
|
OBJECT element so that the alternative links will only be displayed if the
|
|
image map (navbar1.gif) is not.</p>
|
|
|
|
<p>Note also that links have been separated by brackets ([]). This is to
|
|
prevent older screen readers from reading several adjacent links as a single
|
|
link as well as to help sighted users distinguish between links visually.</p>
|
|
|
|
<p>Content developers should make sure they include printable characters (such
|
|
as brackets or a vertical bar (|)) surrounded by spaces between adjacent text
|
|
links. The problem does not occur if images have been used as links; The
|
|
alt-text will not be read as a single link because of the place-holding images
|
|
that graphical browsers use when images are not loaded. Refer to the section <a
|
|
href="#group-bypass">Grouping and bypassing links</a> for more information.</p>
|
|
|
|
<h4>7.4.3 <a id="client-vs-server-side" name="client-vs-server-side">
|
|
Client-side versus server-side image maps</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-client-side-maps"
|
|
class="noxref">9.1</a> Provide client-side image maps instead of server-side
|
|
image maps except where the regions cannot be defined with an available
|
|
geometric shape. [Priority 1]</li>
|
|
</ul>
|
|
|
|
<!-- p>@@discuss reasoning why we suggest client- vs. server-side image maps. Discuss tools
|
|
to use to convert server-side to client-side. Find a good example of a server-side image
|
|
map.</p -->
|
|
<h4>7.4.4 <a id="server-side" name="server-side">Server-side image
|
|
maps</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-redundant-server-links"
|
|
class="noxref">1.2</a> Provide redundant text links for each active region of a
|
|
server-side image map. [Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>When a server-side image map must be used, content developers should provide
|
|
an alternative list of image map choices. There are three techniques:</p>
|
|
|
|
<ul>
|
|
<li>Include the alternative links within the body of an <a href="#edef-OBJECT">
|
|
OBJECT</a> element (refer to the previous <a href="#object-example">example
|
|
illustrating links in the OBJECT element</a>).</li>
|
|
|
|
<li>If <a href="#edef-IMG">IMG</a> is used to insert the image, provide an
|
|
alternative list of links after it and indicate the existence and location of
|
|
the alternative list (e.g., via that "<a href="#adef-alt">alt</a>" attribute).
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<A href="http://www.example.com/cgi-bin/imagemap/my-map">
|
|
<IMG src="welcome.gif" alt="Welcome! (Text links follow)" ismap>
|
|
</A>
|
|
|
|
<P>[<A href="reference.html">Reference</A>]
|
|
[<A href="media.html">Audio Visual Lab</A>]
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li>If other approaches don't make the image map accessible, create an <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#alt-page-note">alternative page</a>
|
|
that is accessible.</li>
|
|
</ul>
|
|
|
|
<p>Server-side and client-side image maps may be used as submit buttons in
|
|
Forms. For more information, refer to the section <a
|
|
href="#forms-graphical-buttons">Graphical buttons</a>.</p>
|
|
|
|
<h3>7.5 <a id="color-images" name="color-images">Color in images</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>@@discuss contrast issues with regard to images</p -->
|
|
<h3>7.6 <a id="animated-images" name="animated-images">Animated images</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><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]</li>
|
|
</ul>
|
|
|
|
<!-- p>@@discuss avoiding movement caused by animated gifs.</p -->
|
|
<h2>8 <a id="objects" name="objects">Applets and other programmatic
|
|
objects</a></h2>
|
|
|
|
<p>While applets may be included in a document with either the <a
|
|
href="#edef-APPLET">APPLET</a> or <a href="#edef-OBJECT">OBJECT</a> element, <a
|
|
href="#edef-OBJECT">OBJECT</a> is the preferred method.</p>
|
|
|
|
<h3>8.1 <a id="applet-text-equivalent" name="applet-text-equivalent">Text and
|
|
non-text equivalents for applets and programmatic objects</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-dynamic-source"
|
|
class="noxref">6.2</a> Ensure that equivalents for dynamic content are updated
|
|
when the dynamic content changes. [Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-scripts" class="noxref">
|
|
6.3</a> Ensure that pages are usable when scripts, applets, or other
|
|
programmatic objects are turned off or not supported. If this is not possible,
|
|
provide equivalent information on an alternative accessible page.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>If <a href="#edef-OBJECT">OBJECT</a> is used, provide a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> in the content of the element:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT classid="java:Press.class" width="500" height="500">
|
|
As temperature increases, the molecules in the balloon...
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>A more complex example takes advantage of the fact the OBJECT elements may
|
|
be embedded to provide for alternative representations of information:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT classid="java:Press.class" width="500" height="500">
|
|
<OBJECT data="Pressure.mpeg" type="video/mpeg">
|
|
<OBJECT data="Pressure.gif" type="image/gif">
|
|
As temperature increases, the molecules in the balloon...
|
|
</OBJECT>
|
|
</OBJECT>
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>If <a href="#edef-APPLET">APPLET</a> is used, provide a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> with the "<a href="#adef-alt">alt</a>" attribute <em>and</em> in
|
|
the content in the APPLET element. This enables the content to transform
|
|
gracefully for those user agents that only support one of the two mechanisms
|
|
("alt" or content).</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<APPLET code="Press.class" width="500" height="500"
|
|
alt="Java applet: how temperature affects pressure">
|
|
As temperature increases, the molecules in the balloon...
|
|
</APPLET>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>8.2 <a id="accessible-applets" name="accessible-applets">Directly
|
|
accessible applets</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-directly-accessible"
|
|
class="noxref">8.1</a> Make programmatic elements such as scripts and applets
|
|
directly accessible or compatible with assistive technologies [Priority 1
|
|
if functionality is important and not presented elsewhere, otherwise
|
|
Priority 2.]</li>
|
|
</ul>
|
|
|
|
<p>If an applet (created with either <a href="#edef-OBJECT">OBJECT</a> or <a
|
|
href="#edef-APPLET">APPLET</a>) requires user interaction (e.g., the ability to
|
|
manipulate a physics experiment) that cannot be duplicated in an alternative
|
|
format, make the applet directly accessible.</p>
|
|
|
|
<p>If an applet creates motion, developers should provide a mechanism for
|
|
freezing this motion (for an example, refer to <cite><a href="#ref-TRACE"
|
|
title="Link to reference TRACE">[TRACE]</a></cite>). Also, please refer to the
|
|
next section for information about making audio and video presentations
|
|
accessible.</p>
|
|
|
|
<p>For more information about developing accessible applets, please refer to
|
|
<cite><a href="#ref-JAVAACCESS" title="Link to reference JAVAACCESS">
|
|
[JAVAACCESS]</a></cite> and <cite><a href="#ref-IBMJAVA"
|
|
title="Link to reference IBMJAVA">[IBMJAVA]</a></cite>. These companies have
|
|
been developing an Accessibility API as well as making the Java Swing classes
|
|
accessible.</p>
|
|
|
|
<p>Related checkpoints:</p>
|
|
|
|
<ul>
|
|
<li><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]
|
|
,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts"
|
|
class="noxref">6.4</a> For scripts and applets, ensure that event handlers are
|
|
input device-independent. [Priority 2] ,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
|
|
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
|
|
alternative presentation or page. [Priority 2] ,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-flicker"
|
|
class="noxref">7.1</a> Until user agents allow users to control flickering,
|
|
avoid causing the screen to flicker. [Priority 1] ,</li>
|
|
|
|
<li><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] ,</li>
|
|
|
|
<li><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] ,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
|
|
class="noxref">7.4</a> Until user agents provide the ability to stop the
|
|
refresh, do not create periodically auto-refreshing pages. [Priority 2]
|
|
,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable"
|
|
class="noxref">9.2</a> Ensure that any element that has its own interface can
|
|
be operated in a device-independent manner. [Priority 2] ,</li>
|
|
|
|
<li>and <a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
|
|
class="noxref">10.1</a> Until user agents allow users to turn off spawned
|
|
windows, do not cause pop-ups or other windows to appear and do not change the
|
|
current window without informing the user. [Priority 2] .</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-synchronize-equivalents"
|
|
class="noxref">1.4</a> For any time-based multimedia presentation (e.g., a
|
|
movie or animation), synchronize equivalent alternatives (e.g., captions or
|
|
auditory descriptions of the visual track) with the presentation.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<h2>9 <a id="audio-and-video" name="audio-and-video">Audio and video</a></h2>
|
|
|
|
<!-- Add information about CSS2 ACSS and SMIL control of cueing,
|
|
parallel sounds -->
|
|
<h3>9.1 <a id="audio-information" name="audio-information">Audio
|
|
information</a></h3>
|
|
|
|
<h3>9.2 <a id="text-equivs-multimedia" name="text-equivs-multimedia">Text
|
|
equivalents for multimedia</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>When necessary, a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> should be provided for visual information to enable
|
|
understanding of the page. For example, consider a repeating animation that
|
|
shows cloud cover and precipitation as part of a weather status report. Since
|
|
the animation is supplementing the rest of the weather report (that is
|
|
presented in natural language - text), a less verbose description of the
|
|
animation is necessary. However, if the animation appears in a pedagogical
|
|
setting where students are learning about cloud formations in relation to land
|
|
mass, then the animation ought to be described for those who can not view the
|
|
animation but who also want to learn the lesson.</p>
|
|
|
|
<!-- why is this in this section?? <p>See also the section on
|
|
<a href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-text">text style</a> for
|
|
controlling blinking.</p> -->
|
|
<h3>9.3 <a id="embed-multimedia" name="embed-multimedia">Embedding multimedia
|
|
objects</a></h3>
|
|
|
|
<p>Other objects, such as those requiring a plug-in, should also use the <a
|
|
href="#edef-OBJECT">OBJECT</a> element. However, for backward compatibility
|
|
with Netscape browsers, use the proprietary EMBED element within the OBJECT
|
|
element as follows:</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
|
|
codebase="http://example.com/content.cab" width=100 height=80>
|
|
<PARAM name="Movie" value="moviename.swf">
|
|
<EMBED src="moviename.swf" width=100 height=80
|
|
pluginspage="http://example.com/shockwave/download/">
|
|
</EMBED>
|
|
|
|
<NOEMBED>
|
|
<IMG alt="Still from Movie"
|
|
src="moviename.gif" width=100 height=80>
|
|
</NOEMBED>
|
|
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>For more information refer to <cite><a href="#ref-MACROMEDIA"
|
|
title="Link to reference MACROMEDIA">[MACROMEDIA]</a></cite>.</p>
|
|
|
|
<h2>10 <a id="frames" name="frames">Frames</a></h2>
|
|
|
|
<p>For visually enabled users, frames may organize a page into different zones.
|
|
For non-visual users, relationships between the content in frames (e.g., one
|
|
frame has a table of contents, another the contents themselves) must be
|
|
conveyed through other means.</p>
|
|
|
|
<p>Frames as implemented today (with the <a href="#edef-FRAMESET">FRAMESET</a>,
|
|
<a href="#edef-FRAME">FRAME</a>, and <a href="#edef-IFRAME">IFRAME</a>
|
|
elements) are problematic for several reasons:</p>
|
|
|
|
<ul>
|
|
<li>Without scripting, they tend to break the "previous page" functionality
|
|
offered by browsers.</li>
|
|
|
|
<li>It is impossible to refer to the "current state" of a frameset with a URI;
|
|
once a frameset changes contents, the original URI no longer applies.</li>
|
|
|
|
<li>Opening a frame in a new browser window can disorient or simply annoy
|
|
users.</li>
|
|
</ul>
|
|
|
|
<p>In the following sections, we discuss how to make frames more accessible. We
|
|
also provide an <a href="#alt-frames">alternative to frames</a> that uses HTML
|
|
4.01 and CSS and addresses many of the limitations of today's frame
|
|
implementations.</p>
|
|
|
|
<h3>10.1 <a id="frame-names" name="frame-names">Providing a frame
|
|
title</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-frame-titles"
|
|
class="noxref">12.1</a> Title each frame to facilitate frame identification and
|
|
navigation. [Priority 1]</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>Use the "title" attribute to name frames.</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>A simple frameset document</TITLE>
|
|
</HEAD>
|
|
<FRAMESET cols="10%, 90%"
|
|
title="Our library of electronic documents">
|
|
<FRAME src="nav.html" title="Navigation bar">
|
|
<FRAME src="doc.html" title="Documents">
|
|
<NOFRAMES>
|
|
<A href="lib.html" title="Library link">
|
|
Select to go to the electronic library</A>
|
|
</NOFRAMES>
|
|
</FRAMESET>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>10.2 <a id="frame-text-equivalent" name="frame-text-equivalent">Describing
|
|
frame relationships</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-frame-longdesc"
|
|
class="noxref">12.2</a> Describe the purpose of frames and how frames relate to
|
|
each other if it is not obvious by frame titles alone. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>Today's news</TITLE>
|
|
</HEAD>
|
|
|
|
<FRAMESET cols="10%,*,10%">
|
|
|
|
<FRAMESET rows="20%,*">
|
|
<FRAME src="promo.html" name="promo" title="promotions">
|
|
<FRAME src="sitenavbar.html" name="navbar"
|
|
title="Sitewide navigation bar" longdesc="frameset-desc.html#navbar">
|
|
</FRAMESET>
|
|
|
|
<FRAME src="story.html" name="story" title="Selected story - main content"
|
|
longdesc="frameset-desc.html#story">
|
|
|
|
<FRAMESET rows="*,20%">
|
|
<FRAME src="headlines.html" name="index" title="Index of other
|
|
national headlines" longdesc="frameset-desc.html#headlines">
|
|
<FRAME src="ad.html" name="adspace" title="Advertising">
|
|
</FRAMESET>
|
|
|
|
<NOFRAMES>
|
|
<p><a href="noframes.html">No frames version</a></p>
|
|
<p><a href="frameset-desc.html">Descriptions of frames.</a></p>
|
|
</NOFRAMES>
|
|
|
|
</FRAMESET>
|
|
</HTML>
|
|
</pre>
|
|
|
|
<p>frameset-desc.html might say something like:</p>
|
|
|
|
<pre>
|
|
#Navbar - this frame provides links to the major
|
|
sections of the site: World News, National News,
|
|
Local News, Technological News,
|
|
and Entertainment News.
|
|
|
|
#Story - this frame displays the currently selected story.
|
|
|
|
#Index - this frame provides links to the day's
|
|
headline stories within this section.
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Note that if the a frame's contents change, the text equivalent will no
|
|
longer apply. Also, links to descriptions of a frame should be provided along
|
|
with other alternative content in the <a href="#edef-NOFRAMES">NOFRAMES</a>
|
|
element of a <a href="#edef-FRAMESET">FRAMESET</a>.
|
|
<!-- Long descriptions of frames should only
|
|
be used for frames with static contents. not necessarily so - depending on
|
|
the frame and how longdesc is written. WC --></p>
|
|
|
|
<!-- I commented out this example in favor of the current one. perhaps add it
|
|
in as a way to show how the longdesc won't always be applicable?
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>In this example, the file "chart.html" inserts a complex chart.
|
|
The "longdesc" attribute designates the file "chart-desc.html",
|
|
which contains a long description of the chart.</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>A simple frameset document</TITLE>
|
|
</HEAD>
|
|
<FRAMESET cols="20%, 80%">
|
|
<FRAME src="table_of_contents.html">
|
|
<FRAME src="chart.html" longdesc="chart-desc.html">
|
|
</FRAMESET>
|
|
</pre>
|
|
|
|
<p>Note that if the second frame's contents change (from"chart.html"), the long description will no longer apply. Long
|
|
descriptions of frames should only be used for frames with static
|
|
contents.</p>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
-->
|
|
<h3>10.3 <a id="noframes" name="noframes">Writing for browsers that do not
|
|
support FRAME</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
|
|
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
|
|
alternative presentation or page. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>In this example, if the user reads "top.html":</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>This is top.html</TITLE>
|
|
</HEAD>
|
|
<FRAMESET cols="50%, 50%" title="Our big document">
|
|
<FRAME src="main.html" title="Where the content is displayed">
|
|
<FRAME src="table_of_contents.html" title="Table of Contents">
|
|
<NOFRAMES>
|
|
<A href="table_of_contents.html">Table of Contents.</A>
|
|
<!-- other navigational links that are available in main.html
|
|
are available here also. -->
|
|
</NOFRAMES>
|
|
</FRAMESET>
|
|
</HTML>
|
|
</pre>
|
|
|
|
<p>and the user agent is not displaying frames, the user will have access (via
|
|
a link) to a non-frames version of the same information.</p>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>10.4 <a id="frame-has-html-src" name="frame-has-html-src">Frame
|
|
sources</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-dynamic-source"
|
|
class="noxref">6.2</a> Ensure that equivalents for dynamic content are updated
|
|
when the dynamic content changes. [Priority 1]</li>
|
|
</ul>
|
|
|
|
<!-- Fix this example -IJ -->
|
|
<p>Content developers must provide text equivalents of frames so that their
|
|
contents and the relationships between frames make sense. Note that as the
|
|
contents of a frame change, so must change any description. This is not
|
|
possible if an IMG is inserted directly into a frame. Thus, content developers
|
|
should always make the source ("src") of a frame an HTML file. Images may be
|
|
inserted into the HTML file and their text alternatives will evolve
|
|
correctly.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>A correct frameset document</TITLE>
|
|
</HEAD>
|
|
<FRAMESET cols="100%" title="Evolving frameset">
|
|
<FRAME name="goodframe" src="apples.html" title="Apples">
|
|
</FRAMESET>
|
|
</HTML>
|
|
</pre>
|
|
|
|
<pre>
|
|
<!-- In apples.html -->
|
|
<P><IMG src="apples.gif" alt="Apples">
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>The following deprecated example should be avoided since it inserts <a
|
|
href="#edef-IMG">IMG</a> directly in a frame:</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong></p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>A bad frameset document</TITLE>
|
|
</HEAD>
|
|
<FRAMESET cols="100%" title="Static frameset">
|
|
<FRAME name="badframe"
|
|
src="apples.gif" title="Apples">
|
|
</FRAMESET>
|
|
</HTML>
|
|
</pre>
|
|
|
|
<p>Note that if, for example, a link causes a new image to be inserted into the
|
|
frame:</p>
|
|
|
|
<pre>
|
|
<P>Visit a beautiful grove of
|
|
<A target="badframe" href="oranges.gif" title="Oranges">oranges</A>
|
|
</pre>
|
|
|
|
<p>the initial title of the frame ("Apples") will no longer match the current
|
|
content of the frame ("Oranges").</p>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>10.5 <a id="no-new-windows" name="no-new-windows">Using FRAME
|
|
targets</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
|
|
class="noxref">10.1</a> Until user agents allow users to turn off spawned
|
|
windows, do not cause pop-ups or other windows to appear and do not change the
|
|
current window without informing the user. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Content developers should avoid specifying a new window as the target of a
|
|
frame with target="_blank".</p>
|
|
|
|
<h3>10.6 <a id="alt-frames" name="alt-frames">Alternatives to frames</a></h3>
|
|
|
|
<p>One of the most common uses of frames is to split the user's browser window
|
|
into two parts: a navigation window and a content window. As an alternative to
|
|
frames, we encourage you to try the following:</p>
|
|
|
|
<ol>
|
|
<li>Create one document for the navigation mechanism (call it "nav.html"). A
|
|
separate document means that the navigation mechanism may be shared by more
|
|
than one document.</li>
|
|
|
|
<li>In each document requiring the navigation mechanism, include it at the
|
|
bottom of the document with the following (or similar) <a href="#edef-OBJECT">
|
|
OBJECT</a> markup:
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<P>
|
|
<OBJECT data="nav.html">
|
|
Go to the <A href="nav.html">table of contents</A>
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Putting the navigation mechanism at the end of the document means that when
|
|
style sheets are turned off, users have access to the document's important
|
|
information first.</p>
|
|
</li>
|
|
|
|
<li>Use style sheets to position the navigation mechanism where you want on the
|
|
screen. For example, the following CSS rule floats the navigation bar to the
|
|
left of the page and makes it take up 25% of the available horizontal space:
|
|
|
|
<div class="css-example">
|
|
<pre>
|
|
OBJECT { float: left; width: 25% }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The following CSS rule attaches the navigation mechanism to the bottom-left
|
|
corner of the page of the page and keeps it there even if the user scrolls down
|
|
the page:</p>
|
|
|
|
<div class="css-example">
|
|
<pre>
|
|
OBJECT { position: fixed; left: 0; bottom: 0 }
|
|
</pre>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<p><strong>Note.</strong> Navigation mechanisms or other content may be
|
|
inserted in a document by means of server-side includes.</p>
|
|
|
|
<h4>10.6.1 <a id="frame-relative-size" name="frame-relative-size">Sizing frames
|
|
with relative units</a></h4>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><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]</li>
|
|
</ul>
|
|
|
|
<p>In the previous examples, note that frame sizes are specified in percentage.
|
|
When a user resizes the window, the frames will adjust accordingly and remain
|
|
readable.</p>
|
|
|
|
<h2>11 <a id="forms" name="forms">Forms</a></h2>
|
|
|
|
<p>This section discusses the accessibility of forms and form controls that one
|
|
can put in a <a href="#edef-FORM">FORM</a> element.</p>
|
|
|
|
<h3>11.1 <a id="forms-keyboard-access" name="forms-keyboard-access">Keyboard
|
|
access to forms</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-tab-order" class="noxref">
|
|
9.4</a> Create a logical tab order through links, form controls, and objects.
|
|
[Priority 3]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-shortcuts"
|
|
class="noxref">9.5</a> Provide keyboard shortcuts to important links (including
|
|
those in client-side image maps), form controls, and groups of form controls.
|
|
[Priority 3]</li>
|
|
</ul>
|
|
|
|
<p>In the next example, we specify a tabbing order among elements (in order,
|
|
"field2", "field1", "submit") with "<a href="#adef-tabindex">tabindex</a>":</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<FORM action="submit" method="post">
|
|
<P>
|
|
<INPUT tabindex="2" type="text" name="field1">
|
|
<INPUT tabindex="1" type="text" name="field2">
|
|
<INPUT tabindex="3" type="submit" name="submit">
|
|
</FORM>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>This example assigns "U" as the accesskey (via "<a
|
|
href="#adef-accesskey">accesskey</a>"). Typing "U" gives focus to the label,
|
|
which in turn gives focus to the input control, so that the user can input
|
|
text.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
|
|
<FORM action="submit" method="post">
|
|
<P>
|
|
<LABEL for="user" accesskey="U">name</LABEL>
|
|
<INPUT type="text" id="user">
|
|
</FORM>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>11.2 <a id="forms-grouping" name="forms-grouping">Grouping form
|
|
controls</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-group-information"
|
|
class="noxref">12.3</a> Divide large blocks of information into more manageable
|
|
groups where natural and appropriate. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Content developers should <a href="#grouping">group information</a> where
|
|
natural and appropriate. When form controls can be grouped into logical units,
|
|
use the <a href="#edef-FIELDSET">FIELDSET</a> element and label those units
|
|
with the <a href="#edef-LEGEND">LEGEND</a> element:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<FORM action="http://example.com/adduser" method="post">
|
|
<FIELDSET>
|
|
<LEGEND>Personal information</LEGEND>
|
|
<LABEL for="firstname">First name: </LABEL>
|
|
<INPUT type="text" id="firstname" tabindex="1">
|
|
<LABEL for="lastname">Last name: </LABEL>
|
|
<INPUT type="text" id="lastname" tabindex="2">
|
|
...more personal information...
|
|
</FIELDSET>
|
|
<FIELDSET>
|
|
<LEGEND>Medical History</LEGEND>
|
|
...medical history information...
|
|
</FIELDSET>
|
|
</FORM>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h4>11.2.1 <a id="forms-group-options" name="forms-group-options">Grouping menu
|
|
options</a></h4>
|
|
|
|
<p>Content developers should <a href="#grouping">group information</a> where
|
|
natural and appropriate. For long lists of menu selections (which may be
|
|
difficult to track), content developers should group <a href="#edef-SELECT">
|
|
SELECT</a> items (defined by <a href="#edef-OPTION">OPTION</a>) into a
|
|
hierarchy using the <a href="#edef-OPTGROUP">OPTGROUP</a> element. Specifies a
|
|
label for the group of options with the <a href="#adef-label">label</a>
|
|
attribute on OPTGROUP.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<FORM action="http://example.com/prog/someprog" method="post">
|
|
<P>
|
|
<SELECT name="ComOS">
|
|
<OPTGROUP label="PortMaster 3">
|
|
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
|
|
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
|
|
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
|
|
</OPTGROUP>
|
|
<OPTGROUP label="PortMaster 2">
|
|
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
|
|
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
|
|
</OPTGROUP>
|
|
<OPTGROUP label="IRX">
|
|
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
|
|
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
|
|
</OPTGROUP>
|
|
</SELECT>
|
|
</FORM>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>11.3 <a id="forms-labels" name="forms-labels">Labeling form
|
|
controls</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-associate-labels"
|
|
class="noxref">12.4</a> Associate labels explicitly with their controls.
|
|
[Priority 2]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-unassociated-labels"
|
|
class="noxref">10.2</a> Until user agents support explicit associations between
|
|
labels and form controls, for all form controls with implicitly associated
|
|
labels, ensure that the label is properly positioned. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>An example of <a href="#edef-LABEL">LABEL</a> used with "<a
|
|
href="#adef-for">for</a>" in HTML 4.01 is given in the previous section.</p>
|
|
|
|
<p>A label is implicitly associated with its form control either through markup
|
|
or positioning on the page. The following example shows how a label and form
|
|
control may be implicitly associated with markup.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<LABEL for="firstname">First name:
|
|
<INPUT type="text" id="firstname" tabindex="1">
|
|
</LABEL>
|
|
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>11.4 <a id="forms-graphical-buttons" name="forms-graphical-buttons">
|
|
Graphical buttons</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>Using images to decorate buttons allows developers to make their forms
|
|
unique and easier to understand. Using an image for a button (e.g., with the <a
|
|
href="#edef-INPUT">INPUT</a> element or <a href="#edef-BUTTON">BUTTON</a>) is
|
|
not inherently inaccessible - assuming a text equivalent is provided for the
|
|
image.</p>
|
|
|
|
<p>However, a graphical form submit button created with <a href="#edef-INPUT">
|
|
INPUT</a>, type="image" creates a type of server-side image map. Whenever the
|
|
button is clicked with a mouse, the x and y coordinates of the mouse click are
|
|
sent to the server as part of the form submission.</p>
|
|
|
|
<p>In the <a href="#images">Image and Image Maps</a> section, we discuss why
|
|
server-side images ought to be avoided, and suggest using client-side image
|
|
maps instead. In HTML 4.01, graphical buttons may now be client-side image
|
|
maps. To preserve the functionality provided by the server, authors have the
|
|
following options, as stated in the HTML 4.01 Recommendation (<cite><a
|
|
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>, section
|
|
17.4.1):</p>
|
|
|
|
<blockquote>
|
|
<p>If the server takes different actions depending on the location clicked,
|
|
users of non-graphical browsers will be disadvantaged.<br />
|
|
For this reason, authors should consider alternate approaches:</p>
|
|
|
|
<ul>
|
|
<li>Use multiple submit buttons (each with its own image) in place of a single
|
|
graphical submit button. Authors may use style sheets to control the
|
|
positioning of these buttons.</li>
|
|
|
|
<li>Use a client-side image map together with scripting.</li>
|
|
</ul>
|
|
</blockquote>
|
|
|
|
<h3>11.5 <a id="forms-specific" name="forms-specific">Techniques for specific
|
|
controls</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-place-holders"
|
|
class="noxref">10.4</a> Until user agents handle empty controls correctly,
|
|
include default, place-holding characters in edit boxes and text areas.
|
|
[Priority 3]</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<p>Some legacy assistive technologies require initial text in form controls
|
|
such as <a href="#edef-TEXTAREA">TEXTAREA</a> in order to function
|
|
properly.</p>
|
|
|
|
<pre>
|
|
<FORM action="http://example.com/prog/text-read" method="post">
|
|
<P>
|
|
<TEXTAREA name=yourname rows="20" cols="80">
|
|
Please enter your name here.
|
|
</TEXTAREA>
|
|
<INPUT type="submit" value="Send"><INPUT type="reset">
|
|
</P>
|
|
</FORM>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p><a id="submit-alt" name="submit-alt">Provide</a> a <a
|
|
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
|
|
equivalent</a> for images used as "submit" buttons:</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<FORM action="http://example.com/prog/text-read" method="post">
|
|
<P>
|
|
<INPUT type="image" name=submit src="button.gif" alt="Submit">
|
|
</FORM>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<p>Also refer to the section on <a href="#link-accesskey">keyboard access</a>
|
|
since this applies to form controls.</p>
|
|
|
|
<h3>11.6 <a id="bc-forms" name="bc-forms">Backward compatibility issues for
|
|
forms</a></h3>
|
|
|
|
<p>In some HTML 3.2 browsers,</p>
|
|
|
|
<ul>
|
|
<li>The <a href="#edef-BUTTON">BUTTON</a> element does not appear</li>
|
|
|
|
<li><a href="#edef-INPUT">INPUT</a> with type="button" will appear as a text
|
|
input field</li>
|
|
</ul>
|
|
|
|
<h2>12 <a id="scripts" name="scripts">Scripts</a></h2>
|
|
|
|
<p>This section discusses the accessibility of scripts included in a document
|
|
via the <a href="#edef-SCRIPT">SCRIPT</a> element.
|
|
<!-- p>@@this section needs work. plus, is this the best place for this
|
|
discussion? should we have a separate "non-w3c" module?</p --></p>
|
|
|
|
<h3>12.1 <a id="scripts-gt" name="scripts-gt">Graceful transformation of
|
|
scripts</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
|
|
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
|
|
alternative presentation or page. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>Content developers must ensure that pages are accessible with scripts turned
|
|
off or in browsers that don't support scripts.</p>
|
|
|
|
<ul>
|
|
<li>Avoid creating content on the fly on the client. If a user's browser does
|
|
not handle scripts, no content will be generated or displayed. However, this is
|
|
different than displaying or hiding already existing content by using a
|
|
combination of style sheets and scripting; if there is no script, then the
|
|
content is always shown. This also does not rule out generating pages on the
|
|
fly on the server-side and delivering them to the client.</li>
|
|
|
|
<li>Avoid creating links that use "javascript" as the URI. If a user is not
|
|
using scripts, then they won't be able to link since the browser can't create
|
|
the link content.
|
|
|
|
<div class="deprecated-example">
|
|
<p><strong>Deprecated example.</strong> This is a dead-end link for a user
|
|
agent where scripts are not supported or not loaded.</p>
|
|
|
|
<pre>
|
|
<A href="javascript:">...</A>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>12.2 <a id="scripts-flicker" name="scripts-flicker">Scripts that cause
|
|
flickering</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-flicker"
|
|
class="noxref">7.1</a> Until user agents allow users to control flickering,
|
|
avoid causing the screen to flicker. [Priority 1]</li>
|
|
</ul>
|
|
|
|
<!-- p>@@how to create and pause flicker with scripts</p -->
|
|
<h3>12.3 <a id="scripts-movement-blinking" name="scripts-movement-blinking">
|
|
Scripts that cause movement and blinking</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><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]</li>
|
|
|
|
<li><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]</li>
|
|
</ul>
|
|
|
|
<!-- p>@@how to create accessible scripts that cause movement and blinking. Part of the
|
|
next section? directly accessible scripts?</p -->
|
|
<h3>12.4 <a id="directly-accessible-scripts"
|
|
name="directly-accessible-scripts">Directly accessible scripts</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts"
|
|
class="noxref">6.4</a> For scripts and applets, ensure that event handlers are
|
|
input device-independent. [Priority 2]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-scripts" class="noxref">
|
|
6.3</a> Ensure that pages are usable when scripts, applets, or other
|
|
programmatic objects are turned off or not supported. If this is not possible,
|
|
provide equivalent information on an alternative accessible page.
|
|
[Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-directly-accessible"
|
|
class="noxref">8.1</a> Make programmatic elements such as scripts and applets
|
|
directly accessible or compatible with assistive technologies [Priority 1
|
|
if functionality is important and not presented elsewhere, otherwise
|
|
Priority 2.]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-device-independent-events"
|
|
class="noxref">9.3</a> For scripts, specify logical event handlers rather than
|
|
device-dependent event handlers. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<p>An event handler is a script that is invoked when a certain event occurs
|
|
(e.g, the mouse moves, a key is pressed, the document is loaded, etc.). In HTML
|
|
4.01, event handlers are attached to elements via <a
|
|
href="#event-handler-attribs">event handler attributes</a> (the attributes
|
|
beginning with "on", as in "onkeyup").</p>
|
|
|
|
<p>Some event handlers, when invoked, produce purely decorative effects such as
|
|
highlighting an image or changing the color of an element's text. Other event
|
|
handlers produce much more substantial effects, such as carrying out a
|
|
calculation, providing important information to the user, or submitting a form.
|
|
For event handlers that do more than just change the presentation of an
|
|
element, content developers should do the following:</p>
|
|
|
|
<ol>
|
|
<li>Use application-level event triggers rather than user interaction-level
|
|
triggers. In HTML 4.01, application-level event attributes are "onfocus",
|
|
"onblur" (the opposite of "onfocus"), and "onselect". Note that these
|
|
attributes are designed to be device-independent, but are implemented as
|
|
keyboard specific events in current browsers.</li>
|
|
|
|
<li>Otherwise, if you must use device-dependent attributes, provide redundant
|
|
input mechanisms (i.e., specify two handlers for the same element):
|
|
|
|
<ul>
|
|
<li>Use "onmousedown" with "onkeydown".</li>
|
|
|
|
<li>Use "onmouseup" with "onkeyup"</li>
|
|
|
|
<li>Use "onclick" with "onkeypress"</li>
|
|
</ul>
|
|
|
|
<p>Note that there is no keyboard equivalent to double-clicking ("ondblclick")
|
|
in HTML 4.01.</p>
|
|
</li>
|
|
|
|
<li>Do not write event handlers that rely on mouse coordinates since this
|
|
prevents device-independent input.</li>
|
|
</ol>
|
|
|
|
<h3>12.5 <a id="scripts-alt" name="scripts-alt">Alternative presentation of
|
|
scripts</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
|
|
class="noxref">1.1</a> Provide a text equivalent for every non-text element
|
|
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
|
|
images, graphical representations of text (including symbols), image map
|
|
regions, animations (e.g., animated GIFs), applets and programmatic objects,
|
|
<acronym title="American Standard Code for Information Interchange">
|
|
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
|
|
graphical buttons, sounds (played with or without user interaction),
|
|
stand-alone audio files, audio tracks of video, and video.
|
|
[Priority 1]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-dynamic-source"
|
|
class="noxref">6.2</a> Ensure that equivalents for dynamic content are updated
|
|
when the dynamic content changes. [Priority 1]</li>
|
|
</ul>
|
|
|
|
<p>One way to accomplish this is with the <a href="#edef-NOSCRIPT">NOSCRIPT</a>
|
|
element. The content of this element is rendered when scripts are not
|
|
enabled.</p>
|
|
|
|
<div class="example">
|
|
<p><strong>Example.</strong></p>
|
|
|
|
<pre>
|
|
<SCRIPT type="text/tcl">
|
|
...some Tcl script to show a billboard of sports scores...
|
|
</SCRIPT>
|
|
<NOSCRIPT>
|
|
<P>Results from yesterday's games:</P>
|
|
<DL>
|
|
<DT>Bulls 91, Sonics 80.
|
|
<DD><A href="bullsonic.html">Bulls vs. Sonics game highlights</A>
|
|
...more scores...
|
|
</DL>
|
|
</NOSCRIPT>
|
|
</pre>
|
|
|
|
<p class="off">End example.</p>
|
|
</div>
|
|
|
|
<h3>12.6 <a id="script-refresh" name="script-refresh">Page updates and new
|
|
windows</a></h3>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
|
|
class="noxref">7.4</a> Until user agents provide the ability to stop the
|
|
refresh, do not create periodically auto-refreshing pages.
|
|
[Priority 2]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-auto-forward"
|
|
class="noxref">7.5</a> Until user agents provide the ability to stop
|
|
auto-redirect, do not use markup to redirect pages automatically. Instead,
|
|
configure the server to perform redirects. [Priority 2]</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
|
|
class="noxref">10.1</a> Until user agents allow users to turn off spawned
|
|
windows, do not cause pop-ups or other windows to appear and do not change the
|
|
current window without informing the user. [Priority 2]</li>
|
|
</ul>
|
|
|
|
<!-- p>@@this section needs work.</p -->
|
|
<h2>13 <a id="html-index" name="html-index">Index of HTML elements and
|
|
attributes</a></h2>
|
|
|
|
<p>Checkpoints in this section:</p>
|
|
|
|
<ul>
|
|
<li><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]</li>
|
|
</ul>
|
|
|
|
<h3 class="nonb"><a id="index-elements" name="index-elements">Elements</a></h3>
|
|
|
|
<p><a href="elemidx-linear.html">Linear version of HTML 4.01 element
|
|
index</a>.</p>
|
|
|
|
<p>This index lists all elements in HTML 4.01. The first column of this table
|
|
links to the definition of the element in the HTML 4.01 specification (<cite><a
|
|
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>). Elements
|
|
that are deprecated in HTML 4.01 are followed by an asterisk (*). Elements that
|
|
are obsolete in HTML 4.01 or don't exist in a W3C specification of HTML (2.0,
|
|
3.2, 4.01) do not appear in this table.</p>
|
|
|
|
<p>The second column indicates other W3C specifications for HTML that included
|
|
each element. The third column indicates the element's role.</p>
|
|
|
|
<p>The last column lists the sections in the current document where the element
|
|
is discussed. An entry of "N/A" means that the element is not discussed in this
|
|
document.</p>
|
|
|
|
<table
|
|
summary="Element index. Column heads are element name, defined in versions other than HTML 4.0, role, and relevant techniques"
|
|
border="1">
|
|
<tr>
|
|
<th valign="top" align="left">Element name</th>
|
|
<th valign="top" align="left">Defined also in</th>
|
|
<th valign="top" align="left">Role</th>
|
|
<th valign="top" align="left">Techniques</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-A" name="edef-A"
|
|
href="http://www.w3.org/TR/html401/struct/links.html#edef-A">A</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-ABBR" name="edef-ABBR"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-ABBR">ABBR</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-ACRONYM" name="edef-ACRONYM"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-ACRONYM">
|
|
ACRONYM</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-ADDRESS" name="edef-ADDRESS"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-ADDRESS">
|
|
ADDRESS</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-APPLET" name="edef-APPLET"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#edef-APPLET">
|
|
APPLET*</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Replaced</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-AREA" name="edef-AREA"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#edef-AREA">AREA</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-B" name="edef-B"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-B">B</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BASE" name="edef-BASE"
|
|
href="http://www.w3.org/TR/html401/struct/links.html#edef-BASE">BASE</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BASEFONT" name="edef-BASEFONT"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-BASEFONT">
|
|
BASEFONT*</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BDO" name="edef-BDO"
|
|
href="http://www.w3.org/TR/html401/struct/dirlang.html#edef-BDO">BDO</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BIG" name="edef-BIG"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-BIG">BIG</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BLOCKQUOTE" name="edef-BLOCKQUOTE"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE">
|
|
BLOCKQUOTE</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BODY" name="edef-BODY"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY">BODY</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BR" name="edef-BR"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-BR">BR</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-BUTTON" name="edef-BUTTON"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON">
|
|
BUTTON</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-CAPTION" name="edef-CAPTION"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION">
|
|
CAPTION</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-CENTER" name="edef-CENTER"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER">
|
|
CENTER*</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-CITE" name="edef-CITE"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-CITE">CITE</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-CODE" name="edef-CODE"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-CODE">CODE</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-COL" name="edef-COL"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-COL">COL</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-COLGROUP" name="edef-COLGROUP"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-COLGROUP">
|
|
COLGROUP</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DD" name="edef-DD"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DD">DD</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DEL" name="edef-DEL"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-del">DEL</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DFN" name="edef-DFN"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-DFN">DFN</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DIR" name="edef-DIR"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DIR">DIR*</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DIV" name="edef-DIV"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV">DIV</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DL" name="edef-DL"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DL">DL</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-DT" name="edef-DT"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DT">DT</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-EM" name="edef-EM"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-EM">EM</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-FIELDSET" name="edef-FIELDSET"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-FIELDSET">
|
|
FIELDSET</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-FONT" name="edef-FONT"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-FONT">
|
|
FONT*</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-FORM" name="edef-FORM"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-FORM">FORM</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-FRAME" name="edef-FRAME"
|
|
href="http://www.w3.org/TR/html401/present/frames.html#edef-FRAME">
|
|
FRAME</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Replaced</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-FRAMESET" name="edef-FRAMESET"
|
|
href="http://www.w3.org/TR/html401/present/frames.html#edef-FRAMESET">
|
|
FRAMESET</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-H1" name="edef-H1"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-H1">H1</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-HEAD" name="edef-HEAD"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD">HEAD</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-HR" name="edef-HR"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-HR">HR</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-HTML" name="edef-HTML"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-HTML">HTML</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-I" name="edef-I"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-I">I</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-IFRAME" name="edef-IFRAME"
|
|
href="http://www.w3.org/TR/html401/present/frames.html#edef-IFRAME">
|
|
IFRAME</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Replaced</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-IMG" name="edef-IMG"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#edef-IMG">IMG</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Replaced</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-INPUT" name="edef-INPUT"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT">
|
|
INPUT</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-INS" name="edef-INS"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-ins">INS</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-ISINDEX" name="edef-ISINDEX"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-ISINDEX">
|
|
ISINDEX*</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-KBD" name="edef-KBD"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-KBD">KBD</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-LABEL" name="edef-LABEL"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">
|
|
LABEL</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-LEGEND" name="edef-LEGEND"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-LEGEND">
|
|
LEGEND</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-LI" name="edef-LI"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-LI">LI</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-LINK" name="edef-LINK"
|
|
href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK">LINK</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-MAP" name="edef-MAP"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#edef-MAP">MAP</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-MENU" name="edef-MENU"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-MENU">MENU*</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-META" name="edef-META"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-META">META</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-NOFRAMES" name="edef-NOFRAMES"
|
|
href="http://www.w3.org/TR/html401/present/frames.html#edef-NOFRAMES">
|
|
NOFRAMES</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-NOSCRIPT" name="edef-NOSCRIPT"
|
|
href="http://www.w3.org/TR/html401/interact/scripts.html#edef-NOSCRIPT">
|
|
NOSCRIPT</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-OBJECT" name="edef-OBJECT"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT">
|
|
OBJECT</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Replaced</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-OL" name="edef-OL"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-OL">OL</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-OPTGROUP" name="edef-OPTGROUP"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-OPTGROUP">
|
|
OPTGROUP</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-OPTION" name="edef-OPTION"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION">
|
|
OPTION</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-P" name="edef-P"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-P">P</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-PARAM" name="edef-PARAM"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#edef-PARAM">
|
|
PARAM</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-PRE" name="edef-PRE"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-PRE">PRE</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-Q" name="edef-Q"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-Q">Q</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-S" name="edef-S"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-S">S*</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SAMP" name="edef-SAMP"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-SAMP">SAMP</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SCRIPT" name="edef-SCRIPT"
|
|
href="http://www.w3.org/TR/html401/interact/scripts.html#edef-SCRIPT">
|
|
SCRIPT</a></td>
|
|
<td valign="top" align="left">3.2 (DTD)</td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SELECT" name="edef-SELECT"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-SELECT">
|
|
SELECT</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SMALL" name="edef-SMALL"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-SMALL">
|
|
SMALL</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SPAN" name="edef-SPAN"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN">SPAN</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-STRIKE" name="edef-STRIKE"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-STRIKE">
|
|
STRIKE*</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-STRONG" name="edef-STRONG"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-STRONG">
|
|
STRONG</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-STYLE" name="edef-STYLE"
|
|
href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE">
|
|
STYLE</a></td>
|
|
<td valign="top" align="left">3.2 (DTD)</td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SUB" name="edef-SUB"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-SUB">SUB</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-SUP" name="edef-SUP"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-SUP">SUP</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TABLE" name="edef-TABLE"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE">
|
|
TABLE</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TBODY" name="edef-TBODY"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TBODY">
|
|
TBODY</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TD" name="edef-TD"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TD">TD</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TEXTAREA" name="edef-TEXTAREA"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#edef-TEXTAREA">
|
|
TEXTAREA</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TFOOT" name="edef-TFOOT"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TFOOT">
|
|
TFOOT</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TH" name="edef-TH"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TH">TH</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-THEAD" name="edef-THEAD"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-THEAD">
|
|
THEAD</a></td>
|
|
<td valign="top" align="left"> </td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TITLE" name="edef-TITLE"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#edef-TITLE">
|
|
TITLE</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TR" name="edef-TR"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TR">TR</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-TT" name="edef-TT"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-TT">TT</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-U" name="edef-U"
|
|
href="http://www.w3.org/TR/html401/present/graphics.html#edef-U">U*</a></td>
|
|
<td valign="top" align="left">3.2</td>
|
|
<td valign="top" align="left">Presentation</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-UL" name="edef-UL"
|
|
href="http://www.w3.org/TR/html401/struct/lists.html#edef-UL">UL</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="edef-VAR" name="edef-VAR"
|
|
href="http://www.w3.org/TR/html401/struct/text.html#edef-VAR">VAR</a></td>
|
|
<td valign="top" align="left">2.0, 3.2</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3 class="nonb"><a id="index-attributes"
|
|
name="index-attributes">Attributes</a></h3>
|
|
|
|
<p><a href="attridx-linear.html">Linear version of HTML 4.01 attribute
|
|
index</a>.</p>
|
|
|
|
<p>This index lists some attributes in HTML 4.01 that affect accessibility and
|
|
what elements they apply to. The first column of this table links to the
|
|
definition of the attribute in the HTML 4.01 specification (<cite><a
|
|
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>).
|
|
Attributes and elements that are deprecated in HTML 4.01 (<cite><a
|
|
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>) are
|
|
followed by an asterisk (*). Attributes and elements that are obsolete in HTML
|
|
4.01 or don't exist in a W3C specification of HTML (2.0, 3.2, 4.01) do not
|
|
appear in this table. Attributes that apply to most elements of HTML 4.01 are
|
|
indicated as such; please consult the HTML 4.01 specification for the exact
|
|
list of elements with this attribute.</p>
|
|
|
|
<p>The second column indicates other W3C specifications for HTML that included
|
|
each attribute. The third column indicates the elements that take each
|
|
attribute. The fourth column indicates the attribute's role.</p>
|
|
|
|
<p>The last column lists the sections in the current document where the
|
|
attribute is discussed. An entry of "N/A" means that the attribute is not
|
|
discussed in this document.</p>
|
|
|
|
<table
|
|
summary="Attribute index. Column heads are attribute name, applies to elements, role, and relevant techniques"
|
|
border="1">
|
|
<tr>
|
|
<th valign="top" align="left">Attribute name</th>
|
|
<th valign="top" align="left">Applies to elements</th>
|
|
<th valign="top" align="left">Role</th>
|
|
<th valign="top" align="left">Techniques</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-abbr" name="adef-abbr"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#adef-abbr">abbr</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
|
|
href="elemidx-linear.html#edef-TH">TH</a></td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-accesskey" name="adef-accesskey"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#adef-accesskey">
|
|
accesskey</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-A">A</a>, <a
|
|
href="elemidx-linear.html#edef-AREA">AREA</a>, <a
|
|
href="elemidx-linear.html#edef-BUTTON">BUTTON</a>, <a
|
|
href="elemidx-linear.html#edef-INPUT">INPUT</a>, <a
|
|
href="elemidx-linear.html#edef-LABEL">LABEL</a>, <a
|
|
href="elemidx-linear.html#edef-LEGEND">LEGEND</a>, <a
|
|
href="elemidx-linear.html#edef-TEXTAREA">TEXTAREA</a></td>
|
|
<td valign="top" align="left">User Interface</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-alt" name="adef-alt"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#adef-alt">alt</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-APPLET">
|
|
APPLET</a>, <a href="elemidx-linear.html#edef-AREA">AREA</a>, <a
|
|
href="elemidx-linear.html#edef-IMG">IMG</a>, <a
|
|
href="elemidx-linear.html#edef-INPUT">INPUT</a></td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-axis" name="adef-axis"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#adef-axis">axis</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
|
|
href="elemidx-linear.html#edef-TH">TH</a></td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-class" name="adef-class"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#adef-class">
|
|
class</a></td>
|
|
<td valign="top" align="left">Most elements</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-dir" name="adef-dir"
|
|
href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir">dir</a></td>
|
|
<td valign="top" align="left">Most elements</td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-for" name="adef-for"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#adef-for">for</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-LABEL">
|
|
LABEL</a></td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-headers" name="adef-headers"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#adef-headers">
|
|
headers</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
|
|
href="elemidx-linear.html#edef-TH">TH</a></td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-hreflang" name="adef-hreflang"
|
|
href="http://www.w3.org/TR/html401/struct/links.html#adef-hreflang">
|
|
hreflang</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-A">A</a>, <a
|
|
href="elemidx-linear.html#edef-LINK">LINK</a></td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-id" name="adef-id"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#adef-id">id</a></td>
|
|
<td valign="top" align="left">Most elements</td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-label" name="adef-label"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#adef-label-OPTION">
|
|
label</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-OPTION">
|
|
OPTION</a></td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-lang" name="adef-lang"
|
|
href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang">lang</a></td>
|
|
<td valign="top" align="left">Most elements</td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-longdesc" name="adef-longdesc"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#adef-longdesc-IMG">
|
|
longdesc</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-IMG">IMG</a>,
|
|
<a href="elemidx-linear.html#edef-FRAME">FRAME</a>, <a
|
|
href="elemidx-linear.html#edef-IFRAME">IFRAME</a></td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-scope" name="adef-scope"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#adef-scope">
|
|
scope</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
|
|
href="elemidx-linear.html#edef-TH">TH</a></td>
|
|
<td valign="top" align="left">Structure</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-style" name="adef-style"
|
|
href="http://www.w3.org/TR/html401/present/styles#adef-style">style</a></td>
|
|
<td valign="top" align="left">Most elements</td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-summary" name="adef-summary"
|
|
href="http://www.w3.org/TR/html401/struct/tables.html#adef-summary">
|
|
summary</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TABLE">
|
|
TABLE</a></td>
|
|
<td valign="top" align="left">Alternative</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-tabindex" name="adef-tabindex"
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex">
|
|
tabindex</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-A">A</a>, <a
|
|
href="elemidx-linear.html#edef-AREA">AREA</a>, <a
|
|
href="elemidx-linear.html#edef-BUTTON">BUTTON</a>, <a
|
|
href="elemidx-linear.html#edef-INPUT">INPUT</a>, <a
|
|
href="elemidx-linear.html#edef-OBJECT">OBJECT</a>, <a
|
|
href="elemidx-linear.html#edef-SELECT">SELECT</a>, <a
|
|
href="elemidx-linear.html#edef-TEXTAREA">TEXTAREA</a></td>
|
|
<td valign="top" align="left">User Interface</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-title" name="adef-title"
|
|
href="http://www.w3.org/TR/html401/struct/global.html#adef-title">
|
|
title</a></td>
|
|
<td valign="top" align="left">Most elements</td>
|
|
<td valign="top" align="left">Metadata</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td valign="top" align="left"><a id="adef-usemap" name="adef-usemap"
|
|
href="http://www.w3.org/TR/html401/struct/objects.html#adef-usemap">
|
|
usemap</a></td>
|
|
<td valign="top" align="left"><a href="elemidx-linear.html#edef-IMG">IMG</a>,
|
|
<a href="elemidx-linear.html#edef-INPUT">INPUT</a>, <a
|
|
href="elemidx-linear.html#edef-OBJECT">OBJECT</a></td>
|
|
<td valign="top" align="left">Processing</td>
|
|
<td valign="top" align="left">N/A</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>The following is the list of HTML 4.01 attributes not directly related to
|
|
accessibility. Content developers should use style sheets instead of
|
|
presentation attributes. For event handler attributes, please refer to the
|
|
section on <a href="#directly-accessible-scripts">device-independent event
|
|
handlers</a> for more detail.</p>
|
|
|
|
<dl>
|
|
<dt><b>Other structural attributes:</b></dt>
|
|
|
|
<dd>start*, value*, rowspan, colspan, span</dd>
|
|
|
|
<dt><b>Other presentation attributes:</b></dt>
|
|
|
|
<dd>align*, valign*, clear*, nowrap*, char, charoff, hspace*, vspace*,
|
|
cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*,
|
|
color*, text*, link*, alink*, vlink*, border, noshade*, rules, size (deprecated
|
|
according to element), marginheight, marginwidth, frame, frameborder, rows,
|
|
cols</dd>
|
|
|
|
<dt><b>Other processing instruction attributes:</b></dt>
|
|
|
|
<dd><a id="adef-ismap" name="adef-ismap">ismap</a>, coords, <a id="adef-shape"
|
|
name="adef-shape">shape</a></dd>
|
|
|
|
<dt><b>Other user interface attributes:</b></dt>
|
|
|
|
<dd>target, scrolling, noresize</dd>
|
|
|
|
<dt><b>Other metadata attributes:</b></dt>
|
|
|
|
<dd><a id="adef-type" name="adef-type">type</a>, cite, datetime</dd>
|
|
|
|
<dt><b><a id="event-handler-attribs" name="event-handler-attribs">Event handler
|
|
attributes:</a></b></dt>
|
|
|
|
<dd>onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress,
|
|
onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover,
|
|
onmouseup, onreset, onselect, onsubmit, onunload</dd>
|
|
</dl>
|
|
|
|
<hr />
|
|
<!--NewPage--><!-- this is for html2ps -->
|
|
<h2>14 <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-HTML4" name="ref-HTML4"><b>[HTML4]</b></a></dt>
|
|
|
|
<dd><a href="http://www.w3.org/TR/1999/REC-html401-19991224/">"HTML 4.01
|
|
Recommendation"</a>, D. Raggett, A. Le Hors, and I. Jacobs, eds., 24 December
|
|
1999. This <acronym>HTML</acronym> 4.01 Recommendation is
|
|
http://www.w3.org/TR/1999/REC-html401-19991224/.</dd>
|
|
|
|
<dt><a id="ref-MATHML" name="ref-MATHML"><b>[MATHML]</b></a></dt>
|
|
|
|
<dd><a href="http://www.w3.org/1999/07/REC-MathML-19990707/">"Mathematical
|
|
Markup Language"</a>, P. Ion and R. Miner, eds., 7 April 1998, revised 7 July
|
|
1999. This MathML 1.0 Recommendation is
|
|
http://www.w3.org/TR/1998/REC-MathML-19990707/. The <a
|
|
href="http://www.w3.org/TR/REC-MathML/">latest version of MathML 1.0</a> is
|
|
available at http://www.w3.org/TR/REC-MathML.</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-CSS-TECHNIQUES" name="ref-WCAG10-CSS-TECHNIQUES"><b>
|
|
[WCAG10-CSS-TECHNIQUES]</b></a></dt>
|
|
|
|
<dd><a href="http://www.w3.org/TR/WCAG10-CSS-TECHS/">"CSS Techniques for Web
|
|
Content Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, and I.
|
|
Jacobs, eds. The latest version of this document is available at
|
|
http://www.w3.org/TR/WCAG10-CSS-TECHS/.</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>15 <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>15.1 <a id="OtherGuidelines" name="OtherGuidelines">Other
|
|
guidelines</a></h3>
|
|
|
|
<dl>
|
|
<dt><a id="ref-IBMJAVA" name="ref-IBMJAVA"><b>[IBMJAVA]</b></a></dt>
|
|
|
|
<dd><a href="http://www-3.ibm.com/able/access.html">IBM Guidelines for Writing
|
|
Accessible Applications Using 100% Pure Java</a> are available from IBM Special
|
|
Needs Systems.</dd>
|
|
|
|
<dt><a id="ref-JAVAACCESS" name="ref-JAVAACCESS"><b>[JAVAACCESS]</b></a></dt>
|
|
|
|
<dd>Information about <a href="http://trace.wisc.edu/world/java/java.htm">Java
|
|
Accessibility and Usability</a> is available from the Trace R&D
|
|
Center.</dd>
|
|
|
|
<dt><a id="ref-MACROMEDIA" name="ref-MACROMEDIA"><b>[MACROMEDIA]</b></a></dt>
|
|
|
|
<dd><a href="http://www.macromedia.com/support/flash/ts/documents/tn4150.html">
|
|
Flash OBJECT and EMBED Tag Syntax</a> from Macromedia.</dd>
|
|
|
|
<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>15.2 <a id="ToolResources" name="ToolResources">User agents and other
|
|
tools</a></h3>
|
|
|
|
<p>A list of <a href="http://www.w3.org/WAI/References/Browsing">alternative
|
|
Web browsers</a> (assistive technologies and other user agents designed for
|
|
accessibility) is maintained at the WAI Web site.</p>
|
|
|
|
<dl>
|
|
<dt><a id="ref-ASTER" name="ref-ASTER"><b>[ASTER]</b></a></dt>
|
|
|
|
<dd>For information about ASTER, an "Audio System For Technical Readings",
|
|
consult <a href="http://www.cs.cornell.edu/home/raman/">T. V. Raman's home
|
|
page</a>.</dd>
|
|
|
|
<dt><a id="ref-HYPERMEDIA" name="ref-HYPERMEDIA"><b>[HYPERMEDIA]</b></a></dt>
|
|
|
|
<dd><a href="http://www-4.ibm.com/software/network/techexplorer/">IBM's
|
|
techexplorer Hypermedia Browser</a>.</dd>
|
|
</dl>
|
|
|
|
<h3>15.3 <a id="AccessResources" name="AccessResources">Accessibility
|
|
resources</a></h3>
|
|
|
|
<dl>
|
|
<dt><a id="ref-TRACE" name="ref-TRACE"><b>[TRACE]</b></a></dt>
|
|
|
|
<dd>The <a href="http://trace.wisc.edu/">Trace Research & Development
|
|
Center</a>. Consult this site for a variety of information about accessibility,
|
|
including a <a href="http://trace.wisc.edu/world/java/ScrollText.java">
|
|
scrolling Java applet that may be frozen by the user</a>.</dd>
|
|
|
|
<dt><a id="ref-WAI-ER" name="ref-WAI-ER"><b>[WAI-ER]</b></a></dt>
|
|
|
|
<dd>The <a href="http://www.w3.org/WAI/ER/">WAI Evaluation and Repair Working
|
|
Group</a></dd>
|
|
</dl>
|
|
|
|
<!--NewPage--><!-- this is for html2ps -->
|
|
<h2>16 <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>] [<a href="#html-index">html index</a>]
|
|
</p>
|
|
</map></div>
|
|
</body>
|
|
</html>
|
|
|