Friday, February 22, 2008

11 Checkpoints for Simple Webpage Accessibility

by David Broadhead

Are you a web designer? Would you like to make your websites accessible to everyone, even those who are disabled? In some instances accessibility is a requirement. For example, Section 508 of the 1998 Rehabilitation Act requires all U.S. Federal agencies to make their websites accessible. But it makes sense for just about any informational or e-commerce site to be useable by as many people as possible.

These checkpoints are what I use, since I find them much more comprehensible than trying to interpret the Section 508 or WCAG (Web Content Accessibility) guidelines. As used here, the word "simple" means that the page has only widely-used features. If you use Flash, for example, you will need to add some new checkpoints of your own. Since this is not a tutorial, I will not offer an explanation for the terms used. Web-searching on "accessibility tutorial" should give you a long list to choose from.

The Checkpoints

1. Validate your HTML and CSS first. Many of the checkpoints will already be taken care of when your page validates.

2. Appearance: Make a visual check of your page. Text should stand out clearly from the background. Text lines should not be too long. The font should be easy to read. Color should not be necessary in order to use the page. (eg. Don't say something like, "Red indicates a required field.")

3. Structure: Heading tags should be in order (h1, h2, h3), and none should be skipped. Paragraph tags should be used so that all text is enclosed by a block element.

4. Menus: Use an unordered list for menus. A skip-navigation link should exist before the menu.

5. Links: Use meaningful link text. Always use a title attribute in the 'a' tag. Use a small icon to indicate off-page links.

6. On-page navigation: Make sure that tab-browsing works properly. Use 'tabindex' only if necessary, and 'accesskey' where appropriate (eg - 1 for Home Page, 2 for Main Content). I try not to use letters, since they could conflict with a text-reader.

7. Text: Use 'em' for italics and 'strong' for boldface. Define acronyms and abbreviations in a 'title' attribute. Use the proper tags also for quotations ('q' for one line, 'blockquote' for more than one line, 'cite' to include a link to the quote).

8. Images: Always use the 'alt' attribute, with meaningful text, unless the image is only for spacing, decoration, or a list-bullet -- then use alt="". In addition, use 'title' if the image is not being used as a link. (This will cause a hover 'tooltip' to appear in Firefox, like the one that appears using 'alt' in Internet Explorer.)

9. Tables: These of course should not be used for markup. Be sure that a description of the table is given, using 'caption', 'title', or 'summary'. Use 'th' tags for clarity.

10. Forms: Use 'fieldset' and 'legend' to group form elements into logical units. Always use the 'label' tag adjacent to all 'input' and 'textarea' tags, and don't forget to correlate the 'for and 'id' attributes. For clarity, all 'button' tags and 'submit' buttons need a 'title' attribute.

11. Scripts: Should be unobtrusive (off-page), backwards-compatible (work with older browsers), and degradable (things work properly without them). Use 'noscript' tags to explain what the script does, and how to set the proper permissions to allow Javascript.

Now it should be easier for you to design a website taking account of a person's sight, mobility, and auditory faculties.

About the Author

David Broadhead, aka "The Professor", is the owner and sole employee of Professional Website Development, based in the US Virgin Islands. He also writes tutorials and code snippets designed for people who understand plain English.