WEB ACCESSIBILITY - HTML GUIDELINES

CAMPUS WEB ACCESSIBILITY GUIDELINES

We have provided a downloadable document in PDF that explains the necessary components of an accessible Web site.

Web Accessibility Guidelines [155K PDF]

Please note that these guidelines are always changing as new technology and markup standards are created. The following guidelines are summarized from the W3C Content Accessibility Guidelines version 2.0 and Section 508 of the Rehabilitation Act. They focus on four premises:

1. Content must be perceivable.
2. Interface elements in the content must be operable.
3. Content and controls must be understandable.
4. Content must be robust enough to work with current and future Web technologies.

A. Content Must be Perceivable.

1. Provide text equivalents to all non-text elements.
Perhaps one of the most important standards is the concept of a text equivalent for images displayed on every Web page. What this means is that when information is communicated graphically, there must be alternative textual information available which communicates the same information as the graphic. This is most commonly accomplished by using an "alt txt" or "longdesc" tab within the Web page. Not only does this help individuals using screen reading software to understand the information presented on your page, but it also makes your site more accessible to Web crawlers which index content on the Web and make it easier to find via search engines. If a graphic does not contain any information, use a null tag (empty quotes) in order to avoid distracting persons using a screen reader. An example of this would be:

<IMG SRC="bluebar.gif" ALT="">

2. Provide Multimedia Alternatives.
This standard also applies to any multimedia presentation such as a video of an important speaker, news broadcast or other presentation where the lack of hearing inhibits the understanding of what is being presented. Information on captioning multimedia presentations can be found in Appendix VII.

3. Do not rely on color alone to convey information.
Information conveyed by color alone is inaccessible to individuals who are color blind as well as people who are using a screen reader to convey Web information. For instance, instructions such as "click on the green button to continue" should not be used unless the green button is identified in a format accessible to persons with colorblindness or other disabilities which do not allow them to distinguish colors. A better method would be to use an emphasized elment or strong element or mark the item with an * as well as a color.

4. Use markup and style sheets and do so properly. Pages must transform gracefully.
Markup sheets should be used according to W3C standards and not simply for presentation effect (i.e. to achieve a specific font or text size). Pages should still be able to be read without the associated style sheet - i.e. the content should be arranged in a logical order.

A page should either be useable without scripts, applets, and other programming objects, or an identical alternate page should be readily available which doesn't require such objects.

5. Create tables that transform gracefully.
Data tables should have table headers and use attributes such as scope or id and headers to associate table data with the right headers.

• A caption (use the <caption> tag) acting as a title for the table.
  
  
• A summary attribute (contained within the opening <table> tag).
  
  
• Table headers.

Tables should be used for data and not to lay out pages unless the page will still make sense when linearized.

6. Ensure that your Web page can be viewed by people with color blindness.
For more information on testing your page for color accessibility: go to http://colorfilter.wickline.org/ or http://www.vischeck.com (both pages have a filter though which you can run your Web page to test for color discernability). Some other simple techniques for testing color combinations are to print your Web page on a black and white printer and see if any information is difficult or impossible to discern. Alternatively, turn the colors all the way down on your monitor and make the same observation.

7. Repeat image map links as text somewhere else on the page.
Not every Web browser can properly interpret image links and in the case of very small image links, they can be difficult to click on by someone with limited dexterity. Listing the alternate text links at the bottom of the page is acceptable but closer to the image in question is preferable.

B. Interface Elements Must be Operable.

1. Design for device-independence.
Your page should be navigable via either a mouse, keyboard, by voice or by a head wand. Items which only appear during a mouse-over are generally inaccessible to people using screen readers. Generally speaking, any page which can be navigated via the keyboard only can also be navigated by voice and by anyone using a screen reader.

2. Ensure user control of time-sensitive content changes.
Do not use automatic client-side redirection or refreshing. If you must use automatic refreshing, provide ample time between refreshes (a general guideline is 20 seconds for every line of text. Even better would be to include a button that allows one to disable or turn off automatic refreshing and redirection. Screen readers are unable to read moving text. Try to avoid using the <blink> or <marquee> tags at all costs, but especially between 2 and 55 times per second as this can induce seizures in users with epilepsy or other seizure disorders. If motion is crucial to your page, you need to allow a user to easily stop the motion or skip it altogether.

3. Provide mechanisms to help users find content, orient themselves within it, and navigate through it.
Such mechanisms may include site specific search engines, site outlines, tree diagrams, and the use of proper HTML techniques such as tagging elements as tables, headers, lists and forms. When using tables, title each frame to facilitate navigation and describe the frame and their relationship to the other frames in the table if it is not readily apparent. Avoid ambiguous navigation tags such as: "Click here", "More info", or "Skip intro". Wherever possible, use a "title" attribute to further clarify the destination of a link. It is also helpful to allow users to skip redundant navigation links (i.e. identical links that appear at the top of every subpage). While a visual user can simply skip over these links, a person using a screen reader must tab through each link before they can access content. One technique is to make an anchor at the start of your content:

<a name="content"></a>

Then make the first link on the page a link to this anchor. This page can be white on white if needed to preserve graphical design issues:

<a href="#content">Skip to Page Content</a>

Any links which use the same text should go to the same page (i.e. "Link to Our Home Page" or "Link to Email Us").

Provide a means to skip over ASCII art and calendars.

4. Use interim solutions.
The following guidelines will change as adaptive technology enables the user to override certain Web page features which adaptive technology users might find problematic:

Do not use pop-up windows. They inhibit the ability of screen readers to read the desired active screen.

Use a non-link item between links when listing links in a row:
Weather | People | Find | Job Opportunities

5. Use W3C technologies and guidelines.
Use accessible technology specified by W3C such as HTML and CSS while avoiding PDF and Shockwave which is not as readily accessible. When utilizing PDF documents provide an alternative HTML page wherever possible. Alternatively, PDF documents may be used PROVIDED they meet the accessible PDF guidelines listed below.

Text only Web pages should be used ONLY as a last resort, as they are invariably not updated with the same frequency and regularity as the main graphical page.

C. Content and Controls Must be Understandable.

1. Ensure that documents are clear and simple.
Use consistent page layout and clear, simple language.

2. Clarify natural language usage.
Identify the natural language of content using the "lang" attribute in HTML or the "xml:lang" tag in XML in order to facilitate correct pronunciation by screen readers. This includes specifications for language which are read.

3. Provide links to plug-ins and applets.
If a page requires the use of a plug-in or applet, there must be a link to the plug-in or applet from the page requiring it.

4. Use accessible Flash files.
See Appendix V for information on creating accessible Flash files.

5. Use accessible PDF files.
See Appendix VI for information on creating accessible PDF files.

6. Use accessible multimedia files.
See Appendix VII for information on captioning multimedia files.