Are you a web designer? Would you like to make your websites accessibleto everyone, even those who are disabled? In some instances accessibilityis a requirement. For example, Section 508 of the 1998 Rehabilitation Act requires all U.S. Federal agencies to make their websites accessible. Butit makes sense for just about any informational or e-commerce site tobe 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 theterms used. Web-searching on "accessibility tutorial" should give youa long list to choose from.
The Checkpoints
1. Validate your HTML and CSS first. Many of the checkpoints willalready be taken care of when your page validates.
2. Appearance: Make a visual check of your page. Text should standout clearly from the background. Text lines should not be too long. Thefont 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 requiredfield.")
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 linkshould exist before the menu.
5. Links: Use meaningful link text. Always use a title attributein 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. Defineacronyms and abbreviations in a 'title' attribute. Use the proper tagsalso for quotations ('q' for one line, 'blockquote' for more than oneline, '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 surethat 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 intological 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 withoutthem). Use 'noscript' tags to explain what the script does, and how toset the proper permissions to allow Javascript.
Now it should be easier for you to design a website taking account ofa person's sight, mobility, and auditory faculties.
Source:
David Broadhead, aka "The Professor", is the owner and sole employee of ProfessionalWebsite Development, based in the US Virgin Islands. He also writestutorials and code snippetsdesigned for people who understand plain English.