Web Content Accessibility Guidelines
Checkpoint List for Priority One
Note: This is a draft of the final pages. For reference only.
To check for updates to the list below, go to the W3C Checklist page.
Begin document with a standard choice of character set, such as:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Colors Used on a Page
There are two ways to get things done around here.
The second example is corrected to add text that indicates that colors are being used, and also which choice is the correct one:
There are two ways to get things done around here. The second method, also shown in red, is preferred.
Alternate Descriptions (alt=)
All content on a page must have an alternate description. This includes images, captions (text outside of main text), and other non-text elements.
Images must have an "alt" text code attached. This will let a text-only browser or user to understand that an image appears at this point in the text. The code below is an example of this:
<a href="http://www.buffalo.edu/"><img src="http://ublib.buffalo.edu/libraries/asl/images/UBlogostack.jpg" width="152" height="58" border="0" alt="Welcome to UB! Click here for Main UB Page" align="baseline"></a></font>
In this example, there is an image (img src= ) and an alternate text phrase (alt= ) that will display to indicate to a user what the image is.
If you use blank images (small white images used for spacing in text), you must also add the "alt=" string to show that a blank space appears.
In the above example, the image also has an optional link attached.
For every selectable element (link) on a page, a corresponding keyboard key should be available to allow the user to make selections using the keyboard only (no mouse). For links to URLs, this is automatic (the user hits the "Tab" key to move down a page). Images that are also links are included in this.
If an image uses an image map, be sure that each selection of the map has an "alt" text string attached:
<div align=center><a href="img/imgmap1.map"><img ISMAP src="imgmap1.gif" alt="Please use the following links instead of this imagemap." width="394" height="78"></a><BR>
[ <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> ]</div>
on the screen this appears as:
In this case, two different sets of "alt" tags occurs. The above is an excellent and easy solution to this. Each icon in the image has an alt tag. Added below the image are the same choices, but in text form. A user can click on either the image or its corresponding text version to reach their target.
Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). The code might appear as:
<img src="mountlemmon.jpg" alt="Smoke billows from the top of Mount Lemmon near Tucson, Arizona, as a wildfire rages Sunday." width="220" height="324">
<div align="left" class="StoryCaption">
Smoke billows from the top of Mount Lemmon near Tucson, Arizona, as a wildfire rages Sunday.
In this example, there is a caption that appears under the image. The caption is explained using a tag so that the reader can understand that the caption is not part of the body text, but is a separate piece of data.
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.
A simple solution to this is to avoid using style sheets.
Ensure that equivalents for dynamic content are updated when the dynamic content changes.
If you have data that updates on a page when the page is refreshed, or when a user makes a specific selection on the page, there must be "alt" text to describe every potential display element (i.e., citations that will appear after the user selects a choice for a new display of citations).
The simplest way to avoid limiting access to users is to not use rollovers or any mouse-based actions. If you decide to use rollovers, make sure to follow this guideline:
When you make a mouse-related link or if you have an "event" that occurs when the mouse rolls over the target (rollover images), then you must make sure to have an alt text equivalent that shows each aspect of the rollover.
One method of creating an alt keyboard only would be to create a script to assign various function keys to perform actions that are needed on the page.