WSU Web Accessibility Guidelines

Request Web Server Access →

WSU Web Accessibility Guidelines

Checklist of Accessibility Standards & Guidelines

Comparison of Section 508 Standards vs. W3C Guidelines

508 Standards

Resources

Laws

Facts

Accountability

Web Policy

Style Guide

Last revised Tuesday, 10-Jan-2006 16:46:26 EST .

These guidelines provide additional information to help make your Web pages as accessible, effective and easy-to-use as possible.

NOTE: Your Web pages must meet the Web Accessibility Standards, set forth by the Architectural and Transportation Barriers Compliance Board (Access Board) as part of Section 508 of the Rehabilitation Act of 1973.

Once you've developed your Web pages, test them for accessibility using a validator such as Bobby (http://www.cast.org/bobby/). Additional accessibility information is available on our Resource List Web page.

Number	Guideline Description
Guideline 1	Create Web pages that are clear and simple, so they are more easily understood.
Guideline 2	Logically organize your page and use HTML to encode meaning rather than appearance -- use HTML tags for purpose they were created and use style sheets where appropriate.
Guideline 3	Provide clear and consistent navigation and links.
Guideline 4	Use color and background images judiciously.
Guideline 5	Test your pages for accessibility.

One-Page Accessibility Standards/Guidelines Checklist

Create Web pages that are clear and simple, so they are more easily understood.

Consistent page layout, recognizable graphics, and easy-to-understand language benefit all users. Use the clearest and simplest language appropriate for a site's content and audience.

"Every word and phrase should have to fight for its life.

That means writing 'use' instead of 'utilize' which is identical in meaning, but has two more syllables."

--Crawford Kilian, "Effective Web Writing," Web Techniques, Feb. 2001

Clearly identify places where text or text equivalents change to a different language to facilitate pronunciation or interpretation of foreign text. Speech synthesizers and Braille devices can automatically switch to the new language if appropriate HTML markup is used.

HTML Source Code:

1) Similar to the country codes used in URLs, two-letter codes signify language abbreviations. Note the default language for the page:

... rest of an HTML document written in English ...

</BODY>
</HTML>

2) If you need to include quotes in several languages in your HTML page, write it this way:

<HTML lang="de">
<BODY>

Der bleistift ist braun.

<P lang="es">

Yo no hablo Deutsch.

</BODY>
</HTML>

3) You may also use the <SPAN> tag to note language changes:

<P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever.

</BODY>
</HTML>

Expand abbreviations and acronyms the first time they occur to assist with interpretation.

Example:
The UTC (University Technology Committee) recently approved the University Web Policy.

To reduce confusion, don't use style sheets to remove the underlining from hyperlinks and don't underline text or headings (that aren't hyperlinks). Users have learned that hyperlinks are underlined.

Logically organize your page and use HTML to encode meaning rather than appearance -- use HTML tags for purpose they were created and use style sheets where appropriate.
1. Use HTML tags for the purpose they were created. For example, for headers use header tags <H1><H2>, etc., rather than font size changes, to note sections and subsections of your page. Some assistive technology software will use a different voice or a sound to signify text that is enclosed in header tags.
  - Use style sheets rather than <blockquote></blockquote> or list tags to create indentation or margins. The <q></q> tag is used within a paragraph to quote a direct source. The <blockquote></blockquote> tag is used for a longer quote, which is "blocked" or indented from each side margin.
  - Use list tags only to create lists.
  - Use style sheets, not header tags, to create changes in font size.
2. Lists -- to make your lists more accessible, do the following:
  - Announce the occurrence of the list and announce the number of available choices before the list begins.
  - Label list items numerically.
  - Label sublist items alphabetically.
  Example:
  
  The following list identifies three basic accessibility guidelines.
  1. Create Web pages that are clear and simple, so they are more easily understood.
  2. Logically organize your page and use HTML to encode meaning rather than appearance.
  3. Provide equivalent alternatives to auditory and visual content.
    1. All <img> tags must include an "alt" attribute
    2. Use simple words to describe the function of structural elements rather than describing the appearance.
3. Divide large blocks of information into more manageable groups where natural and appropriate. Use a "Table of Contents" at the top of your page (where appropriate) and provide "Back to Top" links at each section break.

Provide clear and consistent navigation and links.
Use descriptive, concise hyperlink names. Hyperlinks should make sense when they are read one at a time or out of context. Rewriting the phrase or sentence surrounding the link is the best way to eliminate confusion. (e.g., Rather than writing "You can now find WSU news releases online. Click here.," write "You can now find WSU news releases online.") Most screen readers will pull out all of the links of a page, providing users with a way to navigate quickly. Just imagine a list of links similar to this:

Use color and background images judiciously.
1. Be sure to review the 508 Standard (c) Information on use of color.
2. Background images must be light enough that they don't hinder readability or lessen the contrast between the text and the background.
3. Provide sufficient contrast between background and text colors, so the text on the page is legible.
  
  Dark letters on a light background are easier to read than light letters on a dark background. In addition, light letters won't be legible when printed.
  
  The most common form of colorblindness is red-green, so this combination is especially troublesome.
4. Our Accessibility Resources page links to sites that provide information on color vision impairments.
Test your pages for accessibility.

Avoid absolute or fixed font sizes. Use relational instead (e.g., 1, 2). Users with poor eyesight may need to adjust font size within browser to see/read your pages, and absolute font sizes may not adjust. Test your pages with the default font set to 10, 12 and 14 points to ensure your design is user-friendly for these font sizes.
Use a text-only browser such as Lynx to test how your pages will look/read using text only.
Use Lynx Viewer to see what your pages will look like when viewed with Lynx, a text-mode Web browser.

If you are a WSU faculty or staff member or a WSU registered student, you can use a telnet utility to log onto unixapps1.wright.edu to test your pages with Lynx. After logging in, type the word "lynx" to see information about the program. Choose "G" for "Go" and at the prompt, type in the URL for the page you wish to check. Or, simply type the word "lynx" and then the Web address of the page you wish to check (do not include the "http://" in the address).
Use an accessibility validator such as Bobby to test your pages.

For further clarification on or questions about these guidelines, contact the WSU Web Team.

3640 Colonel Glenn Highway - Dayton, Ohio - 45435