web guidelines

Web Content Accessibility Guidelines

Checkpoint List for Priority One

To check for updates to the list below, visit the W3C Checklist page.

CONTENTS

Fonts
Colors Used on Page
Alternate Descriptions
Links
Captions
Roll-overs

Begin document with a standard choice of character set, such as: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Fonts

Use a single font or limit font use to two (one for text another possibly for examples, sidebars, or captions).

Make changes in font size that are not too extreme throughout. Rather than having a variety of sizes, restrict use to ones that set apart one concept or subsection from another.

Colors Used on a Page

Set the background to white "FFFFFF" and text to black "000000." If using a tinted background, you must make the background and text of a contrast high enough for someone to read without difficulty (ratio of light to dark must be strong enough for readability).

When assigning colors for backgrounds, text, and other page elements, a simple method of choosing colors is to use only "Web-safe" colors (the 256 color palette). These are colors that will reproduce the same on every browser/computer configuration.

Color of table backgrounds and emphasized text, etc. should be kept to a minimum to avoid problems of color contrast and definition. When a color is used, be sure to check that the color stands out from its surroundings and also to offer information in the text that explains that a color has been used.

Use color to convey information only if the information is also clear from the markup and/or text. Without color, the following example is meaningless. The first example (lacking alt text for colors) illustrates the problem this presents.

Example 1:

There are two ways to get things done around here.

Your way.
My way.

Example 2:

There are two ways to get things done around here. The second method, also shown in red, is preferred.

Your way.
My way.

Note that the second example is corrected to add text that indicates that colors are being used, and also which choice is the correct one.

Use the clearest and simplest language appropriate for a site's content. In other words, keep wording concise and organized, with adequate space around text blocks so that it is easy to read either on a browser or on a text-only screen.

Keeping it simple also means limiting use of Bold, Italic, or other text attributes, except where it makes key points or requires special emphasis.

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.

Links

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:

[ Section A | Section B | Section C | Section D | Section E ]

In this case, two different sets of "alt" tags occur. 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.

Captions

Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). The code might appear as:

<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).

Roll-overs

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.

Content provider: Scott Hollander
Comments: lib-staffweb@buffalo.edu
Last update: 27 October, 2004