|
Making Accessible Web Pages
ACNS/CTSS Bulletin RS-03
September 2002
Access to information by all members of its learning community is inherent in Colorado State University's mission as an institution of higher education. However, consideration must be given to the design of university web resources to insure that all members of our community, including those persons who have disabilities, have reasonable access to this information. For those web resources that cannot be made accessible, consider providing alternative methods for people to obtain the information such as a phone number, email address, or an office location.
These guidelines are based on Section 508 of the Rehabilitation Act of 1973 (as amended) and the World Wide Web Consortium's Web Access Initiative. These guidelines are in keeping with the spirit of current legislation such as ADA, Section 504 of the Rehabilitation Act, Section 255 of the Telecom Act. An expanded version of these guidelines is available at http://www.colostate.edu/depts/ATRC/resource.htm .
Start with text for your web page and then fill in web components (graphics, Java applets, Java scripts, etc.).
Use consistent format — layout [templates, cascading style sheets (CSS), Fonts, "white space"].
Provide good contrast between background and text colors.
If color or font style is used to convey pertinent information, make sure the information is available in another format.
Tables and frames should be titled with text that facilitates identification and navigation.
Provide easy and consistent navigation.
Links should make sense if read out of context; not "click here."
Add a TITLE element to links requiring more explanation, e.g., rollovers, mouseovers, and flyouts.
Provide a method that allows users to skip repetitive navigation links.
Use client side image maps rather than server side.
Embedded links (such as those on an image map) need to be duplicated as text links to ensure accessibility. This would also include links generated by mouseovers, rollovers, or flyouts. Embedded links need to be duplicated as text links to ensure accessibility.
In DreamWeaver: Click on an image. Properties window should appear. (If it doesn't, go to Window|Properties). On the bottom right side of the window is the word "Alt" with a blank text box beneath. The text that you type in this box will appear as alt text.
In FrontPage: Right click on an image and select properties. Under the General Tab, under Alternative representations, is the Text box. Fill in alt text here.
HTML code: <IMG SRC="/images/morgan.jpg" alt="Morgan Library photo.">
Additional information on accessibility and multi-media can be found at http://www.captions.org/ .
Rich Media Showcase: http://ncam.wgbh.org /webaccess/arm/ .
When a plug-in, player, or viewer is required to view essential content, provide a link to download the plug-in. If you are unsure if the plug-in meets accessibility standards, provide the information in an alternative format.
When using PDFs and Power Point presentations, also provide the information in an html format. Adobe provides PDF accessibility information at: http://access.adobe.com/ .
Java applets require Alt tags. Sun Microsystems provides information on JAVA and accessibility at http://www.sun.com/access .
Use scripting languages sparingly.
Design electronic forms to allow for easy navigation, completion, and submission of the information requested. TAB key should flow sequentially through the form; all fields and boxes should be properly labeled.
Provide text-based description of the information requested, form procedures, and any time limitations.
Provide an alternative way of providing the information requested.
Use HTML whenever possible.
A text description should be provided before the script executes if the script conveys additional information or performs a function that effects the user's interface.
See how your page displays in different browsers, e.g., Netscape, Internet Explorer, Lynx, etc.
Check the appearance of your site using different operating systems.
Check your page against an accessibility tester such as Bobby or A-Prompt.
http://accessibility.colostate.edu — This site provides complete CSU Accessibility Guidelines and additional accessibility resources.
http://www.colostate.edu/depts/ATRC/resource.htm — This site provides information about assistive technology at CSU, as well as extensive web accessibility resources.
http://www.w3.org/TR/WAI-WEBCONTENT/ — This site provides the World Wide Web Consortium Web Content Accessibility Guidelines.
http://www.access-board.gov/508.htm — These sites provide governmental guidelines for technology accessibility.
http://webaim.org — This site describes "how to" make web pages accessible. Great resource.
http://www.macromedia.com/macromedia/accessibility/ — This site provides the free downloadable 508 Accessibility Suite Extension, as well as other tools and resources for Macromedia products such as Dreamweaver.
http://bobby.watchfire.com — This site provides a web accessibility validator that checks pages against the WC3 or 508 guidelines. See http://www.colostate.edu/ Depts/ATRC/tools.htm for other validators and usability checkers.
http://aprompt.snow.utoronto.ca — This site provides A-Prompt (Accessibility Prompt), a free downloadable tool designed to improve the usability of HTML documents by evaluating Web pages for accessibility barriers and providing developers with a fast and easy way to make the necessary repairs.
http://www.trace.wisc.edu/world/web/index.html — This site provides information regarding web accessibility and universal design.