General Techniques | Checked | Fixed |
Judicious use of colors, fonts, and graphics. Restraint is the key word. A web page can, in many ways, be likened to a page in a book. As a general rule: - Avoid the use of more than two or three colors (plus white) and three font sizes.
- Use bold and italic sparingly (for titles and occasional emphasis), and avoid underlining plain text (people often mistake underlined plain text as a link).
- As far as colors go, keep in mind that 8-12% of the population is color blind.
- The most common form of color blindness is Red-Green, where the colors red and green can appear as a shade of brown. Placing red text on green, or vice versa, may yield an unreadable web page for roughly 10% of your visitors.
- Similar problems may occur when using red, green, and brown in graphics (pie charts, graphs, maps, etc). Instead, consider using textures and fill patterns. Otherwise, use colors with a good measure of contrast (light tones vs. dark tones).
- Try to minimize your use of textured backgrounds. If you must use them, make sure they are very low contrast. Be especially careful when choosing font and link colors on a colored background.
- Also, avoid animated gifs (or have them loop only once or twice). They are distracting when trying to read text on a page, and for some people with certain learning disabilities animated gifs may be very difficult to ignore.
| | |
Consistent layout. - Determine a common layout for your all of your web pages, and stick to it. This greatly assists visitors in navigating your web pages, and for some may determine their ability to understand the organization of your pages.
- Placement of the title, logo, navigation and content should be consistent from page to page.
- Navigational links should be placed within the first "screen" the viewer encounters on any given page (they shouldn't have to scroll to find the links).
| | |
"No Frames" compatibility. There are two options for those of you with web pages using "frames" (if you don't know what "frames" means, it's probably not you). - Maintain a text-only or non-frame version of your web site in parallel with your framed version. The text-only/non-frame version must be kept as up-to-date as the framed version. This basically means maintaining two versions of your web site.
- --OR--
- Redesign your site so that it doesn't use frames.
In essence, you need to weigh creating and maintaining an up-to-date parallel non-frames (or text only) site vs. doing a site redesign. | | |
Viewable with ANY browser - Use evaluation tools and text-only browsers to verify accessibility.
- Your site needs to work with all types of browsers, including text-only browsers like Lynx, and screen-reader technology (for the visually impaired). Lynx gives you a good (though not perfect) approximation of how some of the new technology for the disabled "reads" or represents a web page.
- Another option is to find out if there is an accessibility lab on a nearby campus which may be used to test your web pages.
- It is also good idea to download a version of Lynx (or telnet to the campus version - just type "lynx" at the telnet prompt), and view your web pages through it to see how they appear. Lynx is not the most intuitive program for those of us used to Netscape and Internet Explorer, but it's a basic piece of software, and the instructions at the bottom of the page are simple and clear. If you don't use telnet, you can download (free) a PC version of Lynx from title="Lynx Browser. Opens in new window">http://lynx.browser.org/, and versions for Mac and other platforms may be found at title="Lynx Browser for other platforms. Opens in new window">at this URL.
- If you are using Cascading Style Sheets on your web pages, make sure your practices are in line with the recommendations by the World Wide Web Consortium's (W3C) Accessibility Recommendations (see URL at bottom of page).
| | |
Offer alternative to online forms, PDF, JavaScript, etc. - All information in non-HTML file formats, newer technologies (such as Flash/Shockwave, Real Audio, QuickTime, etc.), HTML forms, PDF, JavaScript, and the like, should be available in plain HTML or text formats.
- Failing that, a method of communicating with the information provider and obtaining the information in alternative formats (for the visually or hearing impaired) should be made easily available.
| | |
To Accomodate Visually Impaired or Blind Users | Checked | Fixed |
Supply descriptive text attributes (alt, longdesc, title, map, etc.) for images, links, graphs, charts, tables, image maps. - Images: include "alt" tags for all images. "alt" descriptions should be short but understandable to someone who is visually impaired. If you're using a WYSIWYG editor, you should be able to enter "alt" descriptions by double clicking on a web page image, and entering alternative text in the text field.
- Links: when creating links, don't link a whole sentence. Link only a couple of key words or a short phrase. Reading a sentence (or several sentences) of bold, underlined, colored text can be tiring for even the best vision.
- Graphs, charts, maps: if a graph, chart, or map is integral to your message or content, include a link to a separate page holding a text description of the information presented in the graphic. This is true of other important images as well.
- Tables: tables can be tricky. Some screen readers read only from left to right, regardless of table borders. For detailed information on how to produce accessible tables, please see title="W3C Site. Opens in new window">the W3C table markup document.
- Image maps: like tables, image maps can be complex. W3C advises, "For image maps, either use the 'alt' attribute with AREA, or use the MAP element with A elements (and other text) as content."
- Audio describe videos.
If you are providing video clips on your web pages, there must be accompanying audio text which describes the video information for the visually impaired. | | |