DRAFT:
FOR REVIEW BY ITPG
April 1, 2002
Accessible World Wide Web Page Design
Web pages, like all other forms of communication on campus, must be accessible to people with disabilities. This section contains information on how to make your World Wide Web publishing as accessible as possible to the widest range of people. This includes people with sensory, mobility, and learning disabilities as well as people who do not have multimedia computers or who use text-browsers or slow modems. At the end of this section you will find multiple web sites that provide detailed programming information for web designers. First, here is some general information.
We recommend that you insert in your WWW pages the phrase, “If any of this material is not accessible to you, please contact our department at (telephone number/address/or e-mail) and we will provide alternatives.”
· Quick Tips To Make Accessible Web Sites
These tips have been provided courtesy of The World Wide Web Consortium (W3C). For Complete Guidelines & Checklist:
Images & animations: Use the alt attribute to describe the function
of each visual.
Image maps: Use the client-side map and text for hotspots.
Multimedia: Provide captioning and transcripts of audio, and
descriptions of video.
Hypertext links: Use text that makes sense when read out of
context. For example, avoid "click here."
Page organization: Use headings, lists, and consistent structure.
Use CSS for layout and style where possible.
Graphs & charts: Summarize or use the longdesc attribute.
Scripts, applets, & plug-ins: Provide alternative content in case
active features are inaccessible or unsupported.
Frames: Use the no-frames element and meaningful titles.
Tables: Make line-by-line reading sensible. Summarize.
Check your work: Validate by using tools, checklist, and
guidelines at:
· General Design Tips3
1. Maintain a simple, standard page layout throughout the document. Place buttons and navigational links in the same places on the screen, and have headers that follow a consistent format.
A. Use vertical links where possible. This type of presentation is more accessible to people using screen readers with graphical browsers than are multiple links on one line or in one sentence.
B. End all sentences, headers, and list items with a period or other suitable punctuation. Screen-readers interpret punctuation for the listener.
C. Include a graphical button-bar as a navigational aid on your pages. This can be useful for people with learning disabilities. Try to keep the same buttons and the same location on every page. Also, don’t forget to give a text-only alternative for users who cannot view graphics.
D. Allow for increasing the font size to a larger type.
2. Use universally recognized HTML tags. File formats other than HTML should be used only as alternatives to, rather than replacements for, HTML files.
· Do not use the <blink> tag, scrolling marquees. or continuous animation.
3. Test your pages with a variety of Web browsers and on different platforms.
4. Every graphic image should have associated text if possible. The <ALT> tag, when used with a graphic, will allow a written description of the image to be conveyed to the user. For stand-alone images, include embedded captions with graphic files. If graphic navigation tools, such as image maps, are used there should be an alternate method of selecting options. Also, check your image files at different resolution and color depths.
5. Use tables judiciously. Try to put them in a non-matrix format that can be understood by a screen reader, or organize them in an X-Y format and add a de-columnized version of the information.
6. Provide text transcripts or descriptions for audio clips.
7. If image maps are used, there should be an alternative method of obtaining the materials. (Image maps are graphics with multiple areas that, when selected with a pointer, take you to another Web page or section.) Providing text as an alternate to the image map will ensure better accessibility. It is advisable not to design image maps that require extremely precise mouse positioning.
8. Don’t use complicated backgrounds. Have enough contrast between background and foreground material presented. A is to view the page for readability in black and white.
9. Provide forms that can be downloaded and then mailed, or, provide an alternate mechanism for on-line forms. This may mean including an e-mail address at the end of the document where a user can contact you.
·
Useful Sites for
Programmers:
· Frequently Asked Questions About Web Content Accessibility Guidelines:
·
http://www.w3.org/2000/02/ATAG-FAQ
· Web Content Accessibility Guidelines:
http://www.w3.org/TR/WAI-WEBCONTENT
· Techniques for Authoring Tool Accessibility:
http://www.w3.org/TR/ATAG10-TECHS/
· Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0:
http://www.w3.org/TR/WCAG10/full-checklist.html
· Checklist of Checkpoints for Authoring Tool Accessibility Guidelines:
http://www.w3.org/TR/ATAG10/atag10-chktable.html
· Tips for Web Page Accessibility under 508 Guidelines:
http://www.webable.com/508_guidelines.html
· Guide to Adaptive Computing in Science, Engineering and Mathematics:
http://www.rit.edu/~easi/easisem/handbk1.html
Evaluation and Repair Tools for Web Content Accessibility:
http://www.w3.org/WAI/ER/existingtools.html
· Access Symbol
A Web Access Symbol is now available for use to denote sites that are accessible for disabled users.4 It is not required, but use of the symbol will help to standardize web sites as it comes into wider use. It may be copied at no charge in electronic or printed format from:
http://www.boston.com/wgbh/pages/ncam/symbolwinner.html
The symbol is a globe, marked with a grid that tilts at an
angle. A keyhole is cut into its
surface. You should use this symbol
with the following alt-text tag:
“Web Access Symbol (for people with disabilities).”