WSU Web Accessibility Guidelines
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.
||Create Web pages that are clear and simple,
so they are more easily understood.
||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
||Use color and background images judiciously.
||Test your pages for accessibility.
One-Page Accessibility Standards/Guidelines
- 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,
- 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
2) If you need to include quotes in several languages
in your HTML page, write it this way:
Der bleistift ist braun.
Yo no hablo Deutsch.
3) You may also use the <SPAN> tag to note
<P>And with a certain <SPAN lang="fr">je
ne sais quoi</SPAN>, she entered both the
room, and his life, forever.
- Expand abbreviations and acronyms the
first time they occur to assist with interpretation.
The UTC (University Technology Committee) recently approved the University
- 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.
back to top
- 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.
- 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.
- 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.
The following list identifies three basic accessibility guidelines.
- Create Web pages that are clear and simple, so they are more easily
- Logically organize your page and use HTML to encode meaning rather
- Provide equivalent alternatives to auditory and visual content.
- All <img> tags must include an "alt" attribute
- Use simple words to describe the function
of structural elements rather than describing
- 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
back to top
- 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:
back to top
- Use color and background images judiciously.
- Be sure to review the 508
Standard (c) Information on use of color.
- Background images must be light enough that they don't hinder readability
or lessen the contrast between the text and the background.
- 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
The most common form of colorblindness is red-green, so this combination
is especially troublesome.
- Our Accessibility Resources page
links to sites that provide information on color
- 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.
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
- Use an accessibility validator such as Bobby to
test your pages.
back to top
For further clarification on or questions about these guidelines, contact
the WSU Web Team.