WAI Check list
General:-Priority 1
1. Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc",
or in element content). This includes: images, graphical representations of
text (including symbols), image map regions, animations (e.g., animated GIFs),
applets and programmatic objects, ASCII 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.
Solution: Use "alt" for the IMG, INPUT, and APPLET elements, or provide a text equivalent in the
content of the OBJECT and APPLET elements. For complex content (e.g., a chart) where the "alt"
text does not provide a complete text equivalent, provide an additional description using, for
example, "longdesc" with IMG or FRAME, a link inside an OBJECT element, or a description
link. For image maps, either use the "alt" attribute with AREA, or use the MAP element with A
elements (and other text) as content
2. Ensure that all information conveyed with color is also available without color,
for example from context or Markup.
Solution: Color to highlight the preferred choice for those who can perceive it, and an
ordered list to identify the preferred choice for people who cannot see colors.
Example 1: There are two ways to get things done around here. The second method, also
Don't use color to convey information unless the information is also clear from the
markup and/or text. Without color, the following example is meaningless. (This example
is intentionally colorless to show the author that if the person visiting their page cannot
see color, they will miss the point the author is trying to make.)
Example 2: There are two ways to get things done around here. The preferred method is
3. Clearly identify changes in the natural language of a document's text and any
text equivalents (e.g., captions).
Solution: Use the "lang" attribute to clearly identify changes in the language of text.
When mixing languages in a sentence or paragraph, notate the language changes like
Mother, he's asking you to go.
He's saying, "Allons, Madame plaisante!"
Mother, he's asking you to go.
He's saying,<SPAN lang="fr"> "Allons, Madame plaisante!"</SPAN>
4. Organize documents so they may be read without style sheets. For example,
when an HTML document is rendered without associated style sheets, it must
still be possible to read the document.
Solution: Style markup is used to create the following fancy text display:
Let's say you use style commands that do not specify the vertical positioning of each part
.part1 /* The quick */ { padding-left: 0;
font-family: copperplate gothic bold, fantasy, sans-serif }
.part2 /* brown fox */ {padding-left: 100px;
font-family: times new roman, desdemona, serif }
.part3 /* jumped over */ { padding-left: 350px;
font-family: desdemona, times new roman, serif }
.part4 /* the lazy dog */ { padding-left: 350px;
font-family: fantasy, copperplate gothic bold, sans-serif }
Using the above style commands, you would have to order the text like this in your
<DIV class=part4>the lazy dog.</DIV>
<DIV class=part1>The quick</DIV>
<DIV class=part3>jumped over</DIV>
<DIV class=part2>brown fox</DIVv>
So, if style sheets were turned off or not supported in your browser, you would read:
5. Ensure that equivalents for dynamic content are updated when the
Solution: Always make the source of a frame an HTML document
Access note: This simple example uses a table and an image to simulate the look of a
page created with FRAME markup.
The accessible way to insert content into a frame is to make the frame's source an HTML
file. In this case, source for the frame with the picture of the house should be:
<FRAME name="picture_frame" src="home.html">
where "home.html" should contain the following:
<IMG src="home.gif" alt="Picture of a house.">.
If you make the frame's source the image file itself:
<FRAME name="picture_frame" src="home.gif">
then you can't provide a text equivalent for the image.
6. Until user agents allow users to control flickering, avoid causing the screen to
Solution: People with photosensitive epilepsy can have seizures triggered by flickering
or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20
flashes per second as well as quick changes from dark to light (like strobe lights).
Of course, we can't show you an example of an image or text blinking at 20 flashes per
second or we could be accused of trying to bring on an seizure.
The point is: be careful when designing animated .gif images or other refreshing content.
7. Use the clearest and simplest language appropriate for a site's content.
Solution: Follow these writing suggestions:
• Strive for clear and accurate headings and link descriptions. Review every heading,
outline, and menu to see if the crucial words mean exactly what is intended, and if
there are more common words that would convey the same meaning.
• State the topic of the sentence or paragraph at the beginning of the sentence or
• Limit each paragraph to one main idea.
• Avoid idiomatic language, technical jargon, and other unfamiliar vocabulary and
• Avoid specialized meanings of familiar vocabulary, unless explanations are provided.
• Avoid complex sentence structures.
• Make link phrases terse yet meaningful enough so they make sense when read out of
context, alone or as part of a series of links.
And if you use images and image maps (Priority 1)
8. Provide redundant text links for each active region of a server-side image map
Solution: Server-side image maps (those using the ISMAP attribute in the IMG element)
usually don't or can't provide any textual information about the links that are coded into
them. If your server-side image map has hot-links to sections A, B, C, D and E of your site,
then provide a text alternative on the page. For example, the code:
<A HREF="img/imgmap1.map">
<IMG ISMAP SRC="imgmap1.gif"
ALT="Please use the following links instead of this imagemap.">
[ <A HREF="a.htm">Section A</A> | <A HREF="b.htm">Section B</A> |
<A HREF="c.htm">Section C</A> | <A HREF="d.htm">Section D</A> | <A
HREF="e.htm">Section E</A> ]
produces the following server-side image map and text equivalent:
[ Section A | Section B | Section C | Section D | Section E ]
Note: the "alt" text you provide in the IMG element informs the users that a text
equivalent exists -- but does not describe the image itself. If you want to describe the
image map in detail, use "longdesc"
9. Provide client-side image maps instead of server-side image maps except where the
regions cannot be defined with an available geometric shape.
Solution: The purpose of this checkpoint, in the context of device-independence, is to
remind us that client-side image maps can (and must) use the alt attributes on the AREA
elements to let the user know the purpose (destination) of each active area. Server side
image maps cannot, in most circumstances, provide the user with similar information. If
you must use a server side image map, you must provide an alternative way for users to
navigate the links hidden in the image map.
Server side image maps are still important for applications like geographical information
systems and mapping applications where each point (coordinate pair) is active.
Designing a client side map with thousands of single pixel active regions would be very
Another method of creating a client side image map uses the <OBJECT>, <MAP> and <A>
elements (although this method is not widely supported yet):
This code should expose the standard links if the user's browser does not support
OBJECT or has turned off the loading of images:
<OBJECT data="imgmap4.gif" type="image/gif"
<A href="a.htm" shape="rect"
coords="0,0,39,39">[Section A]</A>
<A href="b.htm" shape="rect"
coords="40,0,79,39">[Section B]</A>
coords="80,0,120,39">[Section C]</A>
<A href="d.htm" shape="rect"
coords="121,0,160,39">[Section D]</A>
And if you use tables (Priority 1)
10. For data tables, identify row and column headers.
This checkpoint is telling you that if you have a legitimate need to present data in
a tabular format, then you should use the HTML TABLE element and its supporting
elements and attributes (like TR, TD, TH and CAPTION). The alternatives (such as using
the PRE tag for preformatted text or using style sheets) will actually make understanding
of tabular data more difficult for users of assistive technology.
A simple data table created with proper data table mark up, might look like this: The
above example is preferable to the using the <PRE> element to layout the data, because
future browsers will use the TH and other TABLE markup to logically linearize tables.
Note: if you are using tables for page layout (instead of CSS), then you should NOT use
markup reserved for data tables (like TH, HEADER, SCOPE, COLGROUP, etc.) because
those elements will be used by some agents to identify and manipulate data) HTML
4.0 also allows you to explicitly link header information to columns and rows using
the "headers" attribute of the <TD> and <TH>
you use the 'headers' attribute, a browser or screen reader might be able to expose or
read the contents of the cells (if the user wishes) like this:
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
Because each datum is explicitly associated with its appropriate header.
11. For data tables that have two or more logical levels of row or column headers, use
markup to associate data cells and header cells.
For "complex" tables, i.e. where tables have structural divisions beyond those implicit in
the rows and columns, use appropriate markup to identify those divisions.
Example: A travel expenses worksheet. While the following data table appears simple
enough visually, it would be difficult to understand if read by some of today's screen-
readers. A good way to approximate what some screen-reader users will hear is to hold
a ruler to the table, and read straight across the screen. Then, move the ruler down until
the next line of characters is displayed. Read straight across. Acter a while, pick a data
cell at random and, without looking at the column or row title, try and remember what
headers describe that data point. The larger and more complex the table, the harder it
would be to remember the row and column relationships.
And if you use frames (Priority 1)
12. Title each frame to facilitate frame identification and navigation.
Solution: Here are four frames in this example. The frame along the top of the page is for
the page title and primary navigation bar. The narrow frame (center, left) is to be used
for the Table of Contents. The largest frame (center, right) is where the content of the
document chosen from the Table of Contents will appear. The frame across the bottom
of the page is for the copyright, secondary navigation and other constant information.
The code for the FRAMESET show the appropriate use of the title attribute.
<FRAMESET ROWS="20%,*,30%">
<FRAME SRC="f1.htm" title="Title and main navigation bar frame">
<FRAME SRC="f2.htm" title="Table of Contents frame">
<FRAME SRC="f3.htm" title="Content viewing frame">
<FRAME SRC="f4.htm" title="Copyright, acknowlegment and secondary navigation
And if you use applets and scripts (Priority 1)
13. 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.
Solution: Content developers must ensure that pages are accessible with scripts turned
off or in browsers that don't support scripts.
• Avoid creating content on the fly locally (client-side). 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
• 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. For
<A href="javascript:">...</A>
Because this is a dead-end link for a user agent where scripts are not supported or
And if you use multimedia (Priority 1)
14. Until user agents can automatically read aloud the text equivalent of a visual track,
provide an auditory description of the important information of the visual track of a
Solution: An auditory description of a multimedia clip's visual track is used to convey
important information, such as scenery, movement, charts, graphs, etc., which is
otherwise lost if the user cannot see the screen. For persons who are blind or visually
impaired, these audio descriptions are necessary if the user is to fully understand any
This guideline is only a stop-gap measure because we expect that future user agents
will be able to use a text-to-speech application to automatically read and speak audio
descriptions from text. Writing the descriptions (rather than recording them) may be
easier for page authors since only a text editor is required. Providing recorded audio
descriptions requires the page author to have sound recording and editing capabilities.
Another benefit of written descriptions (as opposed to recorded descriptions) is that the
text file can be indexed and searched, just like any other text on a Web site.
However, since there are currently no user agents that can automatically read and speak
written descriptions, a multimedia presentation must be accompanied by an audio track
which describes important information presented in the visual track. The next example
(Checkpoint 1.4) explains the need to synchronize all the equivalent alternatives of a
At present there are three formats or languages that support the addition of a separate
audio description track. These are Apple's QuickTime, the W3C's SMIL (Synchronized
Multimedia Integration Language) and Microsoft's SAMI. You will need different
software to play the different formats, so check the multimedia software page to
download what's appropriate. From the multimedia software page, we provide links to
examples that demonstrate the auditory description track
15. 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
Solution: A time-based presentation can include any form of multimedia, such as a
movie, animation or slide show. Equivalent alternatives to these types of presentations
are captions (which provide access to audio tracks) and audio descriptions (which
provide access to visual tracks).
We have already explained the need to provide a textual transcript for any audio track
or video track, and a textual description of the video track However, it must be admitted
that a text transcript alone is not the ideal method for providing an equitable experience
for persons with disabilities. It is widely accepted that on-screen captioning allows
deaf and hard-of-hearing people to more fully appreciate the experience of a movie
or multimedia production. An almost-equivalent accommodation for people with sight
and hearing is the provision of subtitles during foreign-language films or performances.
A separate textual transcript that must be read after the fact does not provide an
Thus the requirement to synchronize the equivalent alternatives. The caption track
is an alternative for deaf or hearing-impaired viewers. The audio-description track
is an alternative for people who are blind or visually impaired. Synchronizing these
alternatives with the main presentation (that is, the video and/or audio) means that
nearly all users will get the best experience and the most information available to them.
(Bear in mind that for people who do not have access to multimedia-playback devices, or
for people who are deaf-blind, a transcript of both the audio and the audio descriptions
How do you ensure that your movies or multimedia meet this guideline?
1. In many cases multimedia projects are created for you by professional studios
which already have (or ought to have) the ability to produce the accessible
equivalents. When you contract for this type of work, include the accessible
alternatives in your core requirements.
2. If you produce your own multimedia or movie clips, it is likely that you already
have the tools on hand to build in your own accessible equivalents. Many
standard sound, movie, animation packages (including those from Apple's
QuickTime or RealNetworks) can be used to create accessible formats.
At present there are three formats or languages that support the ability to synchronize
equivalent alternatives. These are Apple's QuickTime, the W3C's SMIL (Synchronized
Multimedia Integration Language) and Microsoft's SAMI. You will need different
software to play the different formats, so check the multimedia software page to
download what's appropriate. From the multimedia software page, we provide links to
examples that demonstrate the synchronization of equivalent alternatives.
And if all else fails (Priority 1)
16. If, after best efforts, you cannot create an accessible page, provide a link to an
alternative page that uses W3C technologies, is accessible, has equivalent information
(or functionality), and is updated as often as the inaccessible (original) page.
Solution: Because of the difficulty in keeping alternative pages up to date with the full
content of the original page, alternative pages should be provided only after you have tried
all of the other pertinent techniques outlined in the Web Content Accessibility Guidelines to
make your original page accessible (unless the alternative page is automatically generated
from the same source as the original page).
Here is one way you might give visitors the choice:
Welcome to the Organization's Web Site!
<A HREF="path1/">dazzling but confusing site,</A>,
<A HREF="path2/">accessible version</A>.
When the user chooses a link, the appropriate page will be served.
Please remember that this checkpoint should only be used as a LAST RESORT. As more
browsers support the latest versions of HTML, XML, CSS1 and 2 and other accessible W3C
languages, pages that cannot be made accessible by following the other guidelines will
1. 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].
Solution: Bit-mapped image containing dark text on a light background, which is good contrast
for viewing in almost any circumstance. The second example shows an image with poor choices
for foreground and background color. Some people or some devices might not easily interpret
the content. The reason the priority is higher for color choices in an image is that the user has no
control over the rendering of the color of an image.
Access note: the actual wording contained in these example images is the same as in the following
The reason that safe color choices are a lower priority for text is that most (if not all)
browsers that support color let you chose your own foreground and background colors,
overriding the page author's choices. In the case of style sheet markup, browsers will
let you select your own preferred stylesheet as well. Thus, in general you have some
control over font colors. Still, if your page has poor color choices, many visitors will be
Access note: These examples are intended to show people who can see color the difference between good
and bad color choices - Text example 1 shows text with good contrast (black text on white background),
while Text example 2 shows bad contrast (light yellow, green and blue text on a greenish-brown
background. This example also uses CSS style to format and color the text, so if your browser doesn't
support CSS you will see only plain text in both examples. Finally, a two column table is used to position
these examples because CSS style sheet positioning doesn't work well across all browsers yet.
2. When an appropriate markup language exists, use markup rather than images to
Solution: Mathematical and scientific equations and symbols and musical notations
are often presented as bit-mapped images, like the one in this example. The image of
the equation is inaccessible, and alt-text is usually insufficient to convey the meaning of
the equation. Groups like the W3C are developing markup languages that will ease the
creation of and permit the accessible interpretation of special notations.
One particular language being developed is called MathML.
Select this link to see the MathML markup that might generate the following equation
3. Create documents that validate to published formal grammars.
Solution: In general the overall accessibility of any Web page will be improved if you
adhere to the standards for the web-presentation language you are using. The major
reason for this is that most developers of assistive technology or accessible web
technology have based their accessibility features on the premise that content authors
We also assume that most Web browsers will more or less follow the published
standards. Writing the "cleanest" code possible should ensure your pages will look best
across the widest range of Web display technology.
If your coding meets the requirements of a particular grammar, use the DOCTYPE
statement as the first line of your HTML file. For example, the following DOCTYPE
statement would indicate to servers, browsers and validators that you expect your code
to conform to the HTML 4.0 Transitional document type descriptor (or DTD). The DTD is
the "formal" grammar of the language.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Quite a few sites, including the W3C, offer HTML validation. There are even sites that
will validate your HTML and check your page for some aspects of accessibility. See the
section on Validation and Testing in this curriculum for more details.
4. Use style sheets to control layout and presentation.
Solution: Use style sheets to control text color and sizing. Elements such as BASEFONT,
and FONT size, color etc. are deprecated in HTML 4.0 so it doesn't hurt to start
weaning yourself off them now. As we also told you, please don't use the heading
elements (H1-H6) just to get quick font size changes. The following example shows
some style sheet commands that will do the job very well:
It isn't the cough that carries you off,
it's the coffin they carry you off in.
.para { font-size: 130%; color: #ff0000 }
.linetwo { font-size: 70% ; font-style: italic ; color: #0000ff }
<P CLASS=para>It isn't the cough that carries you off,
<SPAN CLASS=linetwo>it's the coffin they carry you off in.</SPAN></P>
Use style sheet commands rather than BLOCKQUOTE, UL, DL & DT, TABLE and so on
just to get a quick formatting boost. Each of those HTML elements have their proper
use in defining the structure of a document. For all those simple formatting tricks you
did using HTML, please use CSS instead. For example, you can create a nice colored
background for an indented paragraph without creating a TABLE:
If your browser supports style sheets, you will see a block of text with a red border,
indented from the margins of the page, and sporting a light blue background.
And the style command to create this is simply:
<DIV style="border: thin red groove; padding: 1em; margin: 2%; background: #ccffff">If
5. Use relative rather than absolute units in markup language attribute values and style
Solution: For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which
are absolute units. If absolute units are used, validate that the rendered content is usable by
checking the results on various browsers or systems. See the section on Validation and Testing
6. Use header elements to convey document structure and use them according to
Solution: Nest headings in order, as in this example. Some user agents will use the heading
structure to improve or add useful navigation features, or to abstract the document. Using
heading levels appropriately will ensure your document is more accessible.
Page title: use (<H1>)
First major section heading: use (<H2>)
First sub-section title: use (<H3>)
This is where the content of the sub section will go. It may be paragraphs, lists,
quotes, diagrams or whatever your document requires.
Second sub-section title: use (<H3>)
Second major section heading: use (<H2>)
First sub-section title: use (<H3>)
Don't nest headings randomly (as in this next example) just to take advantage of the
default display sizes of the H elements. Instead, use CSS to create your visual text
Incorrect use of <H5>: We will never offer
incorrect use of <H5>: We will never offer
Incorrect use of <H1>: Free Software Upgrades
Incorrect use of <H1>: Because we care
Incorrect use of <H5>: only about our bottom line.
7. Mark up lists and list items properly.
Solution: Encode list structure and list items (UL, OL, DL, LI) properly. The HTML list
elements DL, UL, and OL (available in HTML 3.2 and HTML 4.0) should only be used to
create lists, not for formatting effects such as indentation. When possible, use ordered
(numbered) lists to help navigation.
Structure the list with navigational information, like this:
A. Instruments found within the string section of a symphony orchestra:
And the code for this example is:
<LI>Instruments found within the string section of a symphony orchestra:</LI>
Don't organize a list in an unstructured manner, like this:
• Instruments found within the string section of a symphony orchestra:
<LI>Instruments found within the string section of a symphony orchestra:
This list was created with the DL and DT elements, which should be used for definition
lists, not simply for indenting a list. Instead, use the unordered list element <UL> if
this is really a list, or use CSS if all you want is the indentation provided by <DL>, for
<P style="text-indent: 3em">Violins</P>
Will indent an item without adding any unwanted semantics to the markup.
8. Mark up quotations. Do not use quotation markup for formatting effects such as indentation.
Solution: Mark up quotations with the Q and BLOCKQUOTE elements. Do not use them for
formatting effects such as indentation.
Quotation marks and quotation styles vary from language to language. Using the
Q element (instead of typing the ASCII equivalent of quotation marks) will allow
international browsers to properly display the required quote system. Therefore,
please use the Q element to insert quotation marks, like this:
"I'm going home at midnight!"
<Q lang="en-us"> I'm going home at midnight!</Q>
Access Note: The Q element is not widely supported yet. Until it is, you will have to continue to add
quotation marks manually. The "lang" attribute of the Q element is expected to cause the language-
specific quotation symbols or rules to be applied during the rendering of the quote. To the best of our
knowledge, this feature is also not supported by any browser.
General:-Priority 1
1. Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc",
or in element content). This includes: images, graphical representations of
text (including symbols), image map regions, animations (e.g., animated GIFs),
applets and programmatic objects, ASCII 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.
Solution: Use "alt" for the IMG, INPUT, and APPLET elements, or provide a text equivalent in the
content of the OBJECT and APPLET elements. For complex content (e.g., a chart) where the "alt"
text does not provide a complete text equivalent, provide an additional description using, for
example, "longdesc" with IMG or FRAME, a link inside an OBJECT element, or a description
link. For image maps, either use the "alt" attribute with AREA, or use the MAP element with A
elements (and other text) as content
2. Ensure that all information conveyed with color is also available without color,
for example from context or Markup.
Solution: Color to highlight the preferred choice for those who can perceive it, and an
ordered list to identify the preferred choice for people who cannot see colors.
Example 1: There are two ways to get things done around here. The second method, also
Don't use color to convey information unless the information is also clear from the
markup and/or text. Without color, the following example is meaningless. (This example
is intentionally colorless to show the author that if the person visiting their page cannot
see color, they will miss the point the author is trying to make.)
Example 2: There are two ways to get things done around here. The preferred method is
3. Clearly identify changes in the natural language of a document's text and any
text equivalents (e.g., captions).
Solution: Use the "lang" attribute to clearly identify changes in the language of text.
When mixing languages in a sentence or paragraph, notate the language changes like
Mother, he's asking you to go.
He's saying, "Allons, Madame plaisante!"
Mother, he's asking you to go.
He's saying,<SPAN lang="fr"> "Allons, Madame plaisante!"</SPAN>
4. Organize documents so they may be read without style sheets. For example,
when an HTML document is rendered without associated style sheets, it must
still be possible to read the document.
Solution: Style markup is used to create the following fancy text display:
Let's say you use style commands that do not specify the vertical positioning of each part
.part1 /* The quick */ { padding-left: 0;
font-family: copperplate gothic bold, fantasy, sans-serif }
.part2 /* brown fox */ {padding-left: 100px;
font-family: times new roman, desdemona, serif }
.part3 /* jumped over */ { padding-left: 350px;
font-family: desdemona, times new roman, serif }
.part4 /* the lazy dog */ { padding-left: 350px;
font-family: fantasy, copperplate gothic bold, sans-serif }
Using the above style commands, you would have to order the text like this in your
<DIV class=part4>the lazy dog.</DIV>
<DIV class=part1>The quick</DIV>
<DIV class=part3>jumped over</DIV>
<DIV class=part2>brown fox</DIVv>
So, if style sheets were turned off or not supported in your browser, you would read:
5. Ensure that equivalents for dynamic content are updated when the
Solution: Always make the source of a frame an HTML document
Access note: This simple example uses a table and an image to simulate the look of a
page created with FRAME markup.
The accessible way to insert content into a frame is to make the frame's source an HTML
file. In this case, source for the frame with the picture of the house should be:
<FRAME name="picture_frame" src="home.html">
where "home.html" should contain the following:
<IMG src="home.gif" alt="Picture of a house.">.
If you make the frame's source the image file itself:
<FRAME name="picture_frame" src="home.gif">
then you can't provide a text equivalent for the image.
6. Until user agents allow users to control flickering, avoid causing the screen to
Solution: People with photosensitive epilepsy can have seizures triggered by flickering
or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20
flashes per second as well as quick changes from dark to light (like strobe lights).
Of course, we can't show you an example of an image or text blinking at 20 flashes per
second or we could be accused of trying to bring on an seizure.
The point is: be careful when designing animated .gif images or other refreshing content.
7. Use the clearest and simplest language appropriate for a site's content.
Solution: Follow these writing suggestions:
• Strive for clear and accurate headings and link descriptions. Review every heading,
outline, and menu to see if the crucial words mean exactly what is intended, and if
there are more common words that would convey the same meaning.
• State the topic of the sentence or paragraph at the beginning of the sentence or
• Limit each paragraph to one main idea.
• Avoid idiomatic language, technical jargon, and other unfamiliar vocabulary and
• Avoid specialized meanings of familiar vocabulary, unless explanations are provided.
• Avoid complex sentence structures.
• Make link phrases terse yet meaningful enough so they make sense when read out of
context, alone or as part of a series of links.
And if you use images and image maps (Priority 1)
8. Provide redundant text links for each active region of a server-side image map
Solution: Server-side image maps (those using the ISMAP attribute in the IMG element)
usually don't or can't provide any textual information about the links that are coded into
them. If your server-side image map has hot-links to sections A, B, C, D and E of your site,
then provide a text alternative on the page. For example, the code:
<A HREF="img/imgmap1.map">
<IMG ISMAP SRC="imgmap1.gif"
ALT="Please use the following links instead of this imagemap.">
[ <A HREF="a.htm">Section A</A> | <A HREF="b.htm">Section B</A> |
<A HREF="c.htm">Section C</A> | <A HREF="d.htm">Section D</A> | <A
HREF="e.htm">Section E</A> ]
produces the following server-side image map and text equivalent:
[ Section A | Section B | Section C | Section D | Section E ]
Note: the "alt" text you provide in the IMG element informs the users that a text
equivalent exists -- but does not describe the image itself. If you want to describe the
image map in detail, use "longdesc"
9. Provide client-side image maps instead of server-side image maps except where the
regions cannot be defined with an available geometric shape.
Solution: The purpose of this checkpoint, in the context of device-independence, is to
remind us that client-side image maps can (and must) use the alt attributes on the AREA
elements to let the user know the purpose (destination) of each active area. Server side
image maps cannot, in most circumstances, provide the user with similar information. If
you must use a server side image map, you must provide an alternative way for users to
navigate the links hidden in the image map.
Server side image maps are still important for applications like geographical information
systems and mapping applications where each point (coordinate pair) is active.
Designing a client side map with thousands of single pixel active regions would be very
Another method of creating a client side image map uses the <OBJECT>, <MAP> and <A>
elements (although this method is not widely supported yet):
This code should expose the standard links if the user's browser does not support
OBJECT or has turned off the loading of images:
<OBJECT data="imgmap4.gif" type="image/gif"
<A href="a.htm" shape="rect"
coords="0,0,39,39">[Section A]</A>
<A href="b.htm" shape="rect"
coords="40,0,79,39">[Section B]</A>
coords="80,0,120,39">[Section C]</A>
<A href="d.htm" shape="rect"
coords="121,0,160,39">[Section D]</A>
And if you use tables (Priority 1)
10. For data tables, identify row and column headers.
This checkpoint is telling you that if you have a legitimate need to present data in
a tabular format, then you should use the HTML TABLE element and its supporting
elements and attributes (like TR, TD, TH and CAPTION). The alternatives (such as using
the PRE tag for preformatted text or using style sheets) will actually make understanding
of tabular data more difficult for users of assistive technology.
A simple data table created with proper data table mark up, might look like this: The
above example is preferable to the using the <PRE> element to layout the data, because
future browsers will use the TH and other TABLE markup to logically linearize tables.
Note: if you are using tables for page layout (instead of CSS), then you should NOT use
markup reserved for data tables (like TH, HEADER, SCOPE, COLGROUP, etc.) because
those elements will be used by some agents to identify and manipulate data) HTML
4.0 also allows you to explicitly link header information to columns and rows using
the "headers" attribute of the <TD> and <TH>
you use the 'headers' attribute, a browser or screen reader might be able to expose or
read the contents of the cells (if the user wishes) like this:
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
Because each datum is explicitly associated with its appropriate header.
11. For data tables that have two or more logical levels of row or column headers, use
markup to associate data cells and header cells.
For "complex" tables, i.e. where tables have structural divisions beyond those implicit in
the rows and columns, use appropriate markup to identify those divisions.
Example: A travel expenses worksheet. While the following data table appears simple
enough visually, it would be difficult to understand if read by some of today's screen-
readers. A good way to approximate what some screen-reader users will hear is to hold
a ruler to the table, and read straight across the screen. Then, move the ruler down until
the next line of characters is displayed. Read straight across. Acter a while, pick a data
cell at random and, without looking at the column or row title, try and remember what
headers describe that data point. The larger and more complex the table, the harder it
would be to remember the row and column relationships.
And if you use frames (Priority 1)
12. Title each frame to facilitate frame identification and navigation.
Solution: Here are four frames in this example. The frame along the top of the page is for
the page title and primary navigation bar. The narrow frame (center, left) is to be used
for the Table of Contents. The largest frame (center, right) is where the content of the
document chosen from the Table of Contents will appear. The frame across the bottom
of the page is for the copyright, secondary navigation and other constant information.
The code for the FRAMESET show the appropriate use of the title attribute.
<FRAMESET ROWS="20%,*,30%">
<FRAME SRC="f1.htm" title="Title and main navigation bar frame">
<FRAME SRC="f2.htm" title="Table of Contents frame">
<FRAME SRC="f3.htm" title="Content viewing frame">
<FRAME SRC="f4.htm" title="Copyright, acknowlegment and secondary navigation
And if you use applets and scripts (Priority 1)
13. 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.
Solution: Content developers must ensure that pages are accessible with scripts turned
off or in browsers that don't support scripts.
• Avoid creating content on the fly locally (client-side). 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
• 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. For
<A href="javascript:">...</A>
Because this is a dead-end link for a user agent where scripts are not supported or
And if you use multimedia (Priority 1)
14. Until user agents can automatically read aloud the text equivalent of a visual track,
provide an auditory description of the important information of the visual track of a
Solution: An auditory description of a multimedia clip's visual track is used to convey
important information, such as scenery, movement, charts, graphs, etc., which is
otherwise lost if the user cannot see the screen. For persons who are blind or visually
impaired, these audio descriptions are necessary if the user is to fully understand any
This guideline is only a stop-gap measure because we expect that future user agents
will be able to use a text-to-speech application to automatically read and speak audio
descriptions from text. Writing the descriptions (rather than recording them) may be
easier for page authors since only a text editor is required. Providing recorded audio
descriptions requires the page author to have sound recording and editing capabilities.
Another benefit of written descriptions (as opposed to recorded descriptions) is that the
text file can be indexed and searched, just like any other text on a Web site.
However, since there are currently no user agents that can automatically read and speak
written descriptions, a multimedia presentation must be accompanied by an audio track
which describes important information presented in the visual track. The next example
(Checkpoint 1.4) explains the need to synchronize all the equivalent alternatives of a
At present there are three formats or languages that support the addition of a separate
audio description track. These are Apple's QuickTime, the W3C's SMIL (Synchronized
Multimedia Integration Language) and Microsoft's SAMI. You will need different
software to play the different formats, so check the multimedia software page to
download what's appropriate. From the multimedia software page, we provide links to
examples that demonstrate the auditory description track
15. 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
Solution: A time-based presentation can include any form of multimedia, such as a
movie, animation or slide show. Equivalent alternatives to these types of presentations
are captions (which provide access to audio tracks) and audio descriptions (which
provide access to visual tracks).
We have already explained the need to provide a textual transcript for any audio track
or video track, and a textual description of the video track However, it must be admitted
that a text transcript alone is not the ideal method for providing an equitable experience
for persons with disabilities. It is widely accepted that on-screen captioning allows
deaf and hard-of-hearing people to more fully appreciate the experience of a movie
or multimedia production. An almost-equivalent accommodation for people with sight
and hearing is the provision of subtitles during foreign-language films or performances.
A separate textual transcript that must be read after the fact does not provide an
Thus the requirement to synchronize the equivalent alternatives. The caption track
is an alternative for deaf or hearing-impaired viewers. The audio-description track
is an alternative for people who are blind or visually impaired. Synchronizing these
alternatives with the main presentation (that is, the video and/or audio) means that
nearly all users will get the best experience and the most information available to them.
(Bear in mind that for people who do not have access to multimedia-playback devices, or
for people who are deaf-blind, a transcript of both the audio and the audio descriptions
How do you ensure that your movies or multimedia meet this guideline?
1. In many cases multimedia projects are created for you by professional studios
which already have (or ought to have) the ability to produce the accessible
equivalents. When you contract for this type of work, include the accessible
alternatives in your core requirements.
2. If you produce your own multimedia or movie clips, it is likely that you already
have the tools on hand to build in your own accessible equivalents. Many
standard sound, movie, animation packages (including those from Apple's
QuickTime or RealNetworks) can be used to create accessible formats.
At present there are three formats or languages that support the ability to synchronize
equivalent alternatives. These are Apple's QuickTime, the W3C's SMIL (Synchronized
Multimedia Integration Language) and Microsoft's SAMI. You will need different
software to play the different formats, so check the multimedia software page to
download what's appropriate. From the multimedia software page, we provide links to
examples that demonstrate the synchronization of equivalent alternatives.
And if all else fails (Priority 1)
16. If, after best efforts, you cannot create an accessible page, provide a link to an
alternative page that uses W3C technologies, is accessible, has equivalent information
(or functionality), and is updated as often as the inaccessible (original) page.
Solution: Because of the difficulty in keeping alternative pages up to date with the full
content of the original page, alternative pages should be provided only after you have tried
all of the other pertinent techniques outlined in the Web Content Accessibility Guidelines to
make your original page accessible (unless the alternative page is automatically generated
from the same source as the original page).
Here is one way you might give visitors the choice:
Welcome to the Organization's Web Site!
<A HREF="path1/">dazzling but confusing site,</A>,
<A HREF="path2/">accessible version</A>.
When the user chooses a link, the appropriate page will be served.
Please remember that this checkpoint should only be used as a LAST RESORT. As more
browsers support the latest versions of HTML, XML, CSS1 and 2 and other accessible W3C
languages, pages that cannot be made accessible by following the other guidelines will
1. 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].
Solution: Bit-mapped image containing dark text on a light background, which is good contrast
for viewing in almost any circumstance. The second example shows an image with poor choices
for foreground and background color. Some people or some devices might not easily interpret
the content. The reason the priority is higher for color choices in an image is that the user has no
control over the rendering of the color of an image.
Access note: the actual wording contained in these example images is the same as in the following
The reason that safe color choices are a lower priority for text is that most (if not all)
browsers that support color let you chose your own foreground and background colors,
overriding the page author's choices. In the case of style sheet markup, browsers will
let you select your own preferred stylesheet as well. Thus, in general you have some
control over font colors. Still, if your page has poor color choices, many visitors will be
Access note: These examples are intended to show people who can see color the difference between good
and bad color choices - Text example 1 shows text with good contrast (black text on white background),
while Text example 2 shows bad contrast (light yellow, green and blue text on a greenish-brown
background. This example also uses CSS style to format and color the text, so if your browser doesn't
support CSS you will see only plain text in both examples. Finally, a two column table is used to position
these examples because CSS style sheet positioning doesn't work well across all browsers yet.
2. When an appropriate markup language exists, use markup rather than images to
Solution: Mathematical and scientific equations and symbols and musical notations
are often presented as bit-mapped images, like the one in this example. The image of
the equation is inaccessible, and alt-text is usually insufficient to convey the meaning of
the equation. Groups like the W3C are developing markup languages that will ease the
creation of and permit the accessible interpretation of special notations.
One particular language being developed is called MathML.
Select this link to see the MathML markup that might generate the following equation
3. Create documents that validate to published formal grammars.
Solution: In general the overall accessibility of any Web page will be improved if you
adhere to the standards for the web-presentation language you are using. The major
reason for this is that most developers of assistive technology or accessible web
technology have based their accessibility features on the premise that content authors
We also assume that most Web browsers will more or less follow the published
standards. Writing the "cleanest" code possible should ensure your pages will look best
across the widest range of Web display technology.
If your coding meets the requirements of a particular grammar, use the DOCTYPE
statement as the first line of your HTML file. For example, the following DOCTYPE
statement would indicate to servers, browsers and validators that you expect your code
to conform to the HTML 4.0 Transitional document type descriptor (or DTD). The DTD is
the "formal" grammar of the language.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Quite a few sites, including the W3C, offer HTML validation. There are even sites that
will validate your HTML and check your page for some aspects of accessibility. See the
section on Validation and Testing in this curriculum for more details.
4. Use style sheets to control layout and presentation.
Solution: Use style sheets to control text color and sizing. Elements such as BASEFONT,
and FONT size, color etc. are deprecated in HTML 4.0 so it doesn't hurt to start
weaning yourself off them now. As we also told you, please don't use the heading
elements (H1-H6) just to get quick font size changes. The following example shows
some style sheet commands that will do the job very well:
It isn't the cough that carries you off,
it's the coffin they carry you off in.
.para { font-size: 130%; color: #ff0000 }
.linetwo { font-size: 70% ; font-style: italic ; color: #0000ff }
<P CLASS=para>It isn't the cough that carries you off,
<SPAN CLASS=linetwo>it's the coffin they carry you off in.</SPAN></P>
Use style sheet commands rather than BLOCKQUOTE, UL, DL & DT, TABLE and so on
just to get a quick formatting boost. Each of those HTML elements have their proper
use in defining the structure of a document. For all those simple formatting tricks you
did using HTML, please use CSS instead. For example, you can create a nice colored
background for an indented paragraph without creating a TABLE:
If your browser supports style sheets, you will see a block of text with a red border,
indented from the margins of the page, and sporting a light blue background.
And the style command to create this is simply:
<DIV style="border: thin red groove; padding: 1em; margin: 2%; background: #ccffff">If
5. Use relative rather than absolute units in markup language attribute values and style
Solution: For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which
are absolute units. If absolute units are used, validate that the rendered content is usable by
checking the results on various browsers or systems. See the section on Validation and Testing
6. Use header elements to convey document structure and use them according to
Solution: Nest headings in order, as in this example. Some user agents will use the heading
structure to improve or add useful navigation features, or to abstract the document. Using
heading levels appropriately will ensure your document is more accessible.
Page title: use (<H1>)
First major section heading: use (<H2>)
First sub-section title: use (<H3>)
This is where the content of the sub section will go. It may be paragraphs, lists,
quotes, diagrams or whatever your document requires.
Second sub-section title: use (<H3>)
Second major section heading: use (<H2>)
First sub-section title: use (<H3>)
Don't nest headings randomly (as in this next example) just to take advantage of the
default display sizes of the H elements. Instead, use CSS to create your visual text
Incorrect use of <H5>: We will never offer
incorrect use of <H5>: We will never offer
Incorrect use of <H1>: Free Software Upgrades
Incorrect use of <H1>: Because we care
Incorrect use of <H5>: only about our bottom line.
7. Mark up lists and list items properly.
Solution: Encode list structure and list items (UL, OL, DL, LI) properly. The HTML list
elements DL, UL, and OL (available in HTML 3.2 and HTML 4.0) should only be used to
create lists, not for formatting effects such as indentation. When possible, use ordered
(numbered) lists to help navigation.
Structure the list with navigational information, like this:
A. Instruments found within the string section of a symphony orchestra:
And the code for this example is:
<LI>Instruments found within the string section of a symphony orchestra:</LI>
Don't organize a list in an unstructured manner, like this:
• Instruments found within the string section of a symphony orchestra:
<LI>Instruments found within the string section of a symphony orchestra:
This list was created with the DL and DT elements, which should be used for definition
lists, not simply for indenting a list. Instead, use the unordered list element <UL> if
this is really a list, or use CSS if all you want is the indentation provided by <DL>, for
<P style="text-indent: 3em">Violins</P>
Will indent an item without adding any unwanted semantics to the markup.
8. Mark up quotations. Do not use quotation markup for formatting effects such as indentation.
Solution: Mark up quotations with the Q and BLOCKQUOTE elements. Do not use them for
formatting effects such as indentation.
Quotation marks and quotation styles vary from language to language. Using the
Q element (instead of typing the ASCII equivalent of quotation marks) will allow
international browsers to properly display the required quote system. Therefore,
please use the Q element to insert quotation marks, like this:
"I'm going home at midnight!"
<Q lang="en-us"> I'm going home at midnight!</Q>
Access Note: The Q element is not widely supported yet. Until it is, you will have to continue to add
quotation marks manually. The "lang" attribute of the Q element is expected to cause the language-
specific quotation symbols or rules to be applied during the rendering of the quote. To the best of our
knowledge, this feature is also not supported by any browser.
