[Not yet a] W3C Working Draft 30-Jan-1998
Working Group Chairs:
Chuck Letourneau, Starling
Software
Gregg Vanderheiden, Trace
Research and Development
Editors:
Gregg Vanderheiden, Trace
Research and Development
Wendy Chisholm, Trace
Research and Development
Ian Jacobs, W3C
Contributors:
Jim Bell, Jane Berliss, Harvey Bingham, Judy Brewer, Kevin Carey, John Churchill, David
Clark, Dan Connolly, Daniel Dardailler, Judith Dixon, Martin Durst, Paul Fontaine, Geoff
Freed, Alfred S. Gilman, Larry Goldberg, Jon Gunderson, Markku Hakkinen, Scott Isaacs,
Scott Isensee, Jun Ishikawa, Steve Jacobs, Phill Jenkins, Alan Karben, Hiroshi Kawamura,
George Kerscher, Peter Korn, Josh Krieger, Chuck Letourneau, Edmund MacKenty, Murray
Maloney, Aya Matsui, Gabriel Michel, Jim Miller, Masafumi Nakane, Charles Oppermann, Mike
Paciello, David Pawson, Michael Pieper, Dave Raggett, T.V. Raman, Jan Richards, Madeleine
Rothberg, Jutta Treviranus, Steve Tyler, Jaap Van Lelieveld, Jason White, Tom
Wlodkowski, ATRC, CAST, InfoUse, NCR, WGBH, WINGS, YRIF, and the WAI IG and GL Working
groups
W3C staff contacts:
Judy Brewer and Daniel Dardailler
This is [not yet] a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the DOM working group.
This document has been produced as part of the W3C WAI Activity, and is intended as a draft of a proposed recommendation for how to make web pages accessible. The authors of this document are the WAI GL members.
The goal of the WAI-GL group is discussed in our charter.
We will update this draft specification on a regular basis.
Please send detailed comments on this document to w3c-wai-gl@w3.org. Public discussion about the WAI author guidelines also takes place on this mailing list.
This document recommends guidelines that HTML authors should follow in order to improve the accessibility of their pages. Some of the guidelines take advantage of the features of HTML 4.0, but many of them apply to earlier versions of HTML as well.
Measures to improve accessibility fall roughly into the following categories:
The following sections offer specific guidelines that HTML authors should use to improve the accessibility of their pages.
Each guideline may be accompanied by a rating that describes its importance:
Each guideline may be implemented by one or more "strategies" in HTML (and possibly a style sheet language). Each strategy may be classified according to the immediacy of its application:
Strategies with no classification work for earlier versions of HTML and old or new browsers.
[New] Style sheets are supported as of HTML 4.0.
Use
style sheets instead of elements (such as I
, B
, FONT
,
etc.) and attributes (such as "align
") that control visual
presentation. Authors should continue to use elements (such as STRONG
, EM
,
H1
, H2
, ABBR
, etc.) that add structure to
documents.
Use style sheets rather than:
PRE
elements to layout pagesUse style sheets to:
Please also consult the section on links.
alt
" attribute is mandatory for the AREA
and IMG
elements, but should also be used for APPLET
, and INPUT
. For
example, <IMG src="logo.gif" alt="XYZ
Logo">
.OBJECT
is used, text can be provided in the body of the OBJECT
element. For example, <OBJECT
data="logo.gif">XYZ Logo</OBJECT>
<IMG src="97sales.gif" alt="Sales for
1997"><A href="sales.html">D</A>
longdesc
" attribute of the IMG
element. For example:<IMG src="97sales.gif" alt="Sales for 1997"
longdesc="sales.html">
OBJECT
element:<OBJECT data="sales.gif">
Sales in 1997 were down subsequent to ...
</OBJECT>
alt
"
or "title
" attribute values provided with the URLs rather than the
images. If a server-side image map has to be used, provide a list of the image map
choices (links) as text links on the same page, on an alternative page that is accessible,
or within the body of the OBJECT
element (similar to strategy 2.4.2). To
avoid confusion, if providing the list of links following the image map, you should
indicate within the alt-text of the image map that this is an alternate list.
MAP
element has been used with AREA
, set the "alt
"
attribute of the AREA
element. For example, with the IMG
element: <IMG src="welcome.gif" alt="Image map of areas in the library" usemap="#map1"> <MAP name="map1"> <AREA coords="0,0,30,30" href="reference.html" alt="Reference"> <AREA coords="34,34,100,100" href="media.html" alt="Audio Visual lab"> </MAP>
[New] The same idea, this time with the OBJECT
element:
<OBJECT data="welcome.gif" usemap="#map1"> alt="Image map of areas in the library" </OBJECT> <MAP name="map1"> <AREA coords="0,0,30,30" href="ref.html"alt="Reference"> <AREA coords="34,34,100,100" href="media.html" alt="Audio Visual Lab"> </MAP>
MAP
element is used with A
elements that
specify active region geometries, set the "title
" attribute of each
A
element. <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A title="Access Guide"href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A title="Go" href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A title="Search" href="search.html" shape="circle" coords="184,200,60">Search</A> | <A title="Top 10" href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A> </MAP> </OBJECT>
Note in this example that the MAP
element is the content of the OBJECT
element so that the alternate links will only be displayed if the image map (navbar1.gif)
is not.
"title"
attribute of the A
element to provide
more information about images used as links (e.g., a graphical button). For example: <A href="home.html" title="XYZ company home page"> <IMG src="logo.gif" alt="XYZ logo"> </A>
NOSCRIPT
element allows authors to supply alternative
content for scripts. For example: <SCRIPT type="text/tcl"> ...some Tcl script to show a billboard of sports scores... </SCRIPT> <NOSCRIPT> <P>To access today's scores <A href="scores.html">visit our text-only version.</A> </NOSCRIPT>
"alt"
attribute of the APPLET
element, as in: <APPLET code="Press.class" width="500" height="500" alt="Java applet: how temperature affects pressure."> As temperature increases the molecules in the balloon... </APPLET>
Note. The APPLET
element is deprecated in HTML 4.0.
OBJECT
element, specify alternative content: <OBJECT classid="Press.class" width="500" height="500" title="Java applet: how temperature affects pressure."> As temperature increases the molecules in the balloon... </OBJECT>
A more complex version takes advantage of the fact the OBJECT
elements may
be embedded to provide for alternative representations of information:
<!-- First, try the pressure applet --> <OBJECT title="How temperature affects pressure" classid="Press.class" width="500" height="500"> <!-- Else, try the MPEG video --> <OBJECT data="pressure.mpeg" type="application/mpeg"> <!-- Else, try the GIF image --> <OBJECT data="Pressure.gif"> <!-- Else render the description and an alternative exercise --> As temperature increases the molecules in the balloon... </OBJECT></OBJECT></OBJECT>
APPLET
element
(see the example in 3.2.1). OBJECT
element (see
the example in 3.2.2).APPLET
or OBJECT
elements.Note. More exploration is needed in this area. Please stay tuned.
title
" attribute to provide a brief description of
a very short sound.<A href="mittens.wav"
title="meow"></A>
Please refer to the section on style sheets for more information about formatting and positioning text and graphics.
ABBR, ACRONYM, CITE, CODE, DFN, EM, H1, H2, KBD, SAMP,
STRONG, VAR,
etc.size="14", B, I, TT, FONT, BASEFONT,
CENTER.
H1, H2
, etc.) to generate navigation tools. BLOCKQUOTE
element or the "cite
"
attribute to indent a paragraph (use style sheets). Do not use PRE
to create
a tabular layout of text, use tables. HR
) might convey a structural change to
some users, it may not to all users. Instead, specify structure with DIV
and SPAN
.
For example: <DIV class="navigation-bar"> <HR title="Rule introducing navigation bar"> [ <A rel="Next" href="next.html">Next page alt="Next page"</A> | <A rel="Previous" href="previous.html">Previous page alt="Previous page"</A> | <A rel="First" href="first.html">First page alt="First page"</A> ] </DIV>
BLINK
and MARQUEE
elements. First of all, these elements are not part of HTML 4.0 (they are proprietary
extensions and should be avoided). Second, blinking and moving text is either read
incorrectly or not at all by screen readers, can adversely affect people with cognitive
disabilities, and is often annoying to people in general (see Jared Spool's book,
"Web Site Usability"). Authors should use style sheets to draw attention to text
in other ways, such different fonts, sizes, or colors.<HR title="new section">
<ABBR>title="World Wide Web">WWW</ABBR>
Tips and Tricks
DL, UL, OL, LI
) should be used to create lists, not
for presentation (e.g., indentation). [New] Use style sheets rather than HTML attributes to control item spacing.
Tips and Tricks
headers
" and "scope
"
attributes. Please refer to the first two tables examples in the appendix.abbr
" attribute) should be short
but meaningful. This will be particularly useful for future speaking technologies
that will read row and column labels for each cell. Abbreviations cut down on
repetition and reading time. Please refer to the examples in the appendix.summary
"
attribute) are especially useful for non-visual users. Please refer to the examples
in the appendix.axis
"
attribute) in the appendix. Tips and Tricks
Please also consult the section on image maps.
accesskey
" attribute of the LABEL, A, CAPTION and LEGEND
elements allows an author to associate a keyboard shortcut with the phrase. For example,
when associated with a link, it takes the user to the associated document. <A
accesskey="C" href="doc.html">Press C to go to XYZ page</A>
LINK
element) so that the browser loads it automatically. If the user has set their default
media type to "aural," "braille," or "tty" this will
load the alternative page automatically. For example: <HEAD> <TITLE>This document has a text-only version</TITLE> <LINK title="Text-only version" rel="alternate" href="text_only.html" media="aural, braille, tty"> </HEAD>
NOFRAMES
element at the end of each FRAMESET
.
Please refer to the example in the Central Reference
Document. IMG
or OBJECT
elements. <FRAMESET cols="10%,90%" title="Our library of electronic documents"> <FRAME src="nav.html" title="Navigation bar"> <FRAME src="doc.html" title="Documents"> </FRAMESET>
longdesc
" attribute on the FRAME
and IFRAME
elements to designate a long description.BUTTON
or INPUT
elements with alternative text.
for
" attribute of the LABEL
element allows explicit association. For example: <FORM action="http://somesite.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>
<INPUT type="image"
name="submit" src="button.gif" alt="Submit">
tabindex
" attribute specifies the tabbing
navigation order among form controls. For example: <INPUT tabindex="1" type="text" name="field1"> <INPUT tabindex="2" type="text" name="field2"> <INPUT tabindex="3" type="submit" name="submit">
FIELDSET
element groups form controls while the LEGEND
attribute provides labels each group. Please see the example in guideline 10.2. OPTGROUP
element (with the SELECT
element). For example: <FORM action="http://somesite.com/prog/someprog" method="post"> <P><SELECT name="ComOS"> <OPTGROUP label="Comm Servers"> <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> <OPTGROUP label="Routers"> <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> </OPTGROUP> </SELECT> </FORM>
accesskey
"
attribute. This example assigns "U" as the access key. Typing "U"
gives focus to the label which gives focus to the control then the user can input text. <FORM action="submit" method="post"> <LABEL for="user" accesskey="U">user name</label> <INPUT type="text" name="user"> </FORM>
If, after best efforts, any page is still not accessible, provide a link to an alternative page which is accessible, has equivalent information, and is maintained with the same frequency as the inaccessible page. This is a last resort since it increases site maintenance.
Following the general site design guidelines will further improve accessibility.
<BLINK>
and <MARQUEE
>).<HEAD><TITLE>Reference manual -- Chapter 1</TITLE> <LINK rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html"> <LINK rel="Next" title="Chapter 2" type="text/html" href="http://someplace.com/manual/ch2.html"> </HEAD>
Good Web Site Design Practices - Chapter 25 in the Central Reference Document
headers
" - The following example, shows how to
associate header information with the "headers" 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
". <TABLE border="border" 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="t1">Name</TH> <TH id="t2">Cups</TH> <TH id="t3" abbr="Type">Type of Coffee</TH> <TH id="t4">Sugar?</TH> <TR> <TD headers="t1">T. Sexton</TD> <TD headers="t2">10</TD> <TD headers="t3">Espresso</TD> <TD headers="t4">No</TD> <TR> <TD headers="t1">J. Dinnen</TD> <TD headers="t2">5</TD> <TD headers="t3">Decaf</TD> <TD headers="t4">Yes</TD> </TABLE>
A speech synthesizer might render this table as follows:
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
scope
" - The following example associates the
same header and data information as the previous example, but uses the "scope"
attribute rather than "headers." "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. <TABLE border="border" 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 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>
"axis"
- The following example shows how to
create categories within a table. <TABLE border="border"> <CAPTION> Travel Expense Report </CAPTION> <TR> <TH></TH> <TH id="a2" axis="expenses">Meals</TH> <TH id="a3" axis="expenses">Hotels</TH> <TH id="a4" axis="expenses">Transport</TH><TD>subtotals</ TD> </TR> <TR> <TH id="a6" axis="location">San Jose</TH> <TH></TH><TH></TH><TH></TH><TD> </TD> </TR> <TR> <TD id="a7" axis="date">25-Aug-97</TD> <TD headers="a6 a7 a2">37.74</TD> <TD headers="a6 a7 a3">112.00</TD> <TD headers="a6 a7 a4">45.00</TD><TD></TD> </TR> <TR> <TD id="a8" axis="date">26-Aug-97</TD> <TD headers="a6 a8 a2">27.28</TD> <TD headers="a6 a8 a3">112.00</TD> <TD headers="a6 a8 a4">45.00</TD><TD></TD> </TR> <TR> <TD>subtotals</TD><TD>65.02</TD><TD>224.00& lt;/TD><TD>90.00</TD><TD>379.02</TD> </TR> <TR> <TH id="a10" axis="location">Seattle</TH> <TH></TH><TH></TH><TH></TH><TD> </TD> </TR> <TR> <TD id="a11" axis="date">27-Aug-97</TD> <TD headers="a10 a11 a2">96.25</TD> <TD headers="a10 a11 a3">109.00</TD> <TD headers="a10 a11 a4">36.00</TD><TD></TD> </TR> <TR> <TD id="a12" axis="date">28-Aug-97</TD> <TD headers="a10 a12 a2">35.00</TD> <TD headers="a10 a12 a3">109.00</TD> <TD headers="a10 a12 a4">36.00</TD><TD></TD> </TR> <TR> <TD>subtotals</TD><TD>131.25</TD><TD>218.00 </TD><TD>72.00</TD><TD>421.25</TD> </TR> <TR> <TH>Totals</TH><TD>196.27</TD><TD>442.00< ;/TD><TD>162.00</TD><TD>800.27</TD> </TR> </TABLE>
Each guideline may be accompanied by a rating that describes its importance:
If after best efforts, a page is still not accessible, provide a link to an alternative page that is accessible, has equivalent information, and is maintained with the same frequency as the inaccessible page.