I. Provide information in multiple
formats (redundancy)
A. Use graphics or auditory presentations
redundantly with text descriptions where they will make the page easier to
understand. (A, B [14.2])
Example: Use representative icons
next to topic headings (a picture of a
card catalog next to a header for “Catalogs”)
B. Use ALT tags, LONGDESC tags, or
accompanying text labels for all non-text elements as appropriate in context (B
[1.1])
Example:
For a portrait, you might use an ALT tag or text label if it is only important
to identify the picture subject, and a LONGDESC tag if it is important to
describe in detail what the subject is wearing. In
C.
If multimedia is used, provide captioning or transcription of
audio tracks and audio description of video. Make sure these alternatives are
synchronized with any time-based presentation (A, B [1.3, 1.4]) (Additional
information on captioning, transcription, and audio description is available at
http://main.wgbh.org/wgbh/pages/ncam/webaccess/index.html)
D. If you are using HTTP, support choice of
presentation mode via use of content negotiation (which allow users to set
universal preferences, such as language, in certain browsers and have these
preferences automatically implemented). Otherwise, indicate content type or
language through markup (e.g., in HTML use "type" and
"hreflang"). (A, B [11.3])
E. Use multiple methods for identifying
control keys (A)
Example:
Color, shape, and auditory feedback can all be used.
F. Provide a text equivalent of any bitmapped
or scrolling text (these cannot be captured by screen readers.) Make sure these
text equivalents are updated whenever the bitmapped or scrolling text is
updated. (B [6.2, 6.5])
G. If information is conveyed by color,
make sure that it can be understood without relying on color alone (B [2.1])
Example:
If the user is asked to distinguish between a green and a blue button,
provide additional identifiers such as button shape.
H. If you use image maps, provide client-side image maps
(“usemap”) instead of server-side image maps (“ismap”) except where the regions
cannot be defined with an available geometric shape. Provide redundant text
links for each active region of any image map. (B [1.2, 1.5, 9.1])
I. If you use scripts, applets, or other
programmatic objects, ensure that pages are usable when these objects are
turned off or not supported. If this is not possible, provide equivalent
information on an alternative accessible page. Make sure that these objects are
input device-independent and compatible with assistive technologies—screen
readers, speech input, magnification, alternative keyboards, etc. (A, B [6.3, 6.4, 8.1, 9.2, 9.3])
J. Use markup language tags to convey
information, but only use them for their intended purposes. (B [3.1])
Example:
Use heading tags to indicate document organizational structure. Make
sure that headers are used properly (e.g., that H3 elements follow H2 elements)
and don’t use them solely to change font sizes (A, B [3.5])
Example: Use the Q and BLOCKQUOTE elements to mark up inline and block
quotations, respectively. Don’t use these elements for formatting items that
are not quotations. (B [3.7])
K. Use structural markup according to
specification. (B [3.2, 13.2])
Example:
Metadata (e.g., in the header) can provide significant information to
users.
L. Use the “tabindex” and “accesskey”
attributes to facilitate navigation via keyboard shortcuts, particularly for
critical links like client-side image maps. Create a logical tab order through
links, form controls, and objects. (B [9.4, 9.5])
II. Keep information
presentation as simple and clear as possible
A. Use logical, simple, consistent URLs for
the home page and any other address people are likely to use as an entrance
point to the site. Keep URLs in all lowercase letters for maximal browser
compatibility.
Example: www.library.org/catalog is better than
www.library.org/fred/tuesday/liver_and_onions/lp39481293284/ctlg.html
B. Keep screen layouts simple and
uncluttered (A)
Example: A list of topic headings with links to further detail for
each heading is better than a long list of topics with multiple sub-topics.
C. Automate required
or complex steps, if this can be done without the user relinquishing control of
page presentation (A)
D. Keep descriptive language as simple as
possible (A, B [14.1])
Example: “Mary had a little lamb” is better than “Mary possessed a
juvenile ovine representative.”
E. If you use frames, always make the source of a
frame an HTML document. Title each frame to facilitate frame identification and
navigation. Avoid opening a new window as the target of a frame. Describe
the purpose of frames and how frames relate to each other if it is not obvious
by frame titles alone; for example, via a "longdesc" tag. (B [12.1,
12.2])
F. If you use forms, associate labels explicitly with their controls
and ensure that the label is properly positioned. (B [10.2, 12.4])
Example:
For a password field, make sure that the “Password:” label appears
immediately and unambiguously before the entry field.
G. Spell out acronyms and abbreviations
when first used. (B [4.2]) Consider providing brief definitions for jargon or
complex concepts.
Example:
“Web pages are created in Hypertext Markup Language (HTML), which is a set
of codes used to format Web pages.”
H. Provide distinguishing information as
early as possible (B [13.8])
Example:
Make the first sentence of a paragraph your topic sentence.
Example:
Have a link to a text-only version page as the first item on the referring
page.
I. Consider
providing multi-page documents as a downloadable “package” (preferably as ASCII
text); use metadata to describe links to these packages and use archiving tools
(e.g., ZIP or Stuffit) to create the packages. (B [13.9])
J. Divide large
blocks of information into more manageable groups where natural and
appropriate. (B [12.3])
III. Keep information
presentation as consistent as possible
A. Use
consistent design and placement for presentation of controls (A, B [14.3])
Example: A “Return to home page”
button or link should always be in the
same place (e.g., in the center of the screen, at the end of the page), in the
same font and color, etc.
B. Place
emphasis on recognition rather than recall of information (A)
Example: If a graphic is used to clarify
the meaning of a text header, use the graphic consistently every time the
header appears in the site.
C. Use
navigation mechanisms (e.g., navigation bars) in a consistent manner. (B
[13.4])
IV. Provide additional information where useful, particularly when
relevant to site navigation
A. Indicate where clicking on a link will
take the user away from the current site to a site that may be less accessible
(A)
B. Provide step-by-step instructions for
procedures (A)
C. Provide easy to access navigational
defaults (A)
Example:
Have a “Return to Home Page” button or link on every page of your site
D. Provide a goal/action structure for
actions—use descriptive words to ensure that users know why they are
taking an action; for example, clearly identify the target of each link. (A, B
[13.1])
Example:
Instead of using the phrase “Click here” as a link, use, “Click here to go
to the next page.”
E. Provide navigation mechanisms such as
navigation bars that appear on the same place on each page. Provide path
information to the current page. (A, B [13.3, 13.5])
Example:
If the home page is titled “A1,” A1 links to “B2,” and B2 links to “C3,”
then towards the top of page C3 could be a line and/or graphic that says, “A1 à
B2 à
C3 (this page)”
F. Use the “lang” attribute to identify
the primary language of the page and to indicate changes (this also applies to
captions, transcriptions, etc.) (B [4.1, 4.3])
G. If you use tables, clearly identify row and column
headers. For data tables that have two or more logical levels of row or column
headers, use markup to associate data cells and header cells. A brief paragraph
summarizing the table contents and indicating abbreviations used for header
labels may be useful. Provide a linear text alternative
(on the current page or some other) for all tables that lay out text
in parallel, word-wrapped columns. Avoid using tables
solely for page organization. (B [5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 10.3])
H. Use the HTML list elements DL,
UL, and OL to mark up lists. For
numbered lists, compound numbers (1.1, 2.32, etc.) generated via style sheets
are more informative than simple numbers. (B [3.6])
I. Use printable markers to separate
adjacent links. (B [10.5])
Example:
Format a string of adjacent links as a bulleted list or put commas between
links.
J. Group related links and precede them
with a link that allows users to bypass the group and move directly to a
different section. (B [13.5, 13.6])
Example: On the home page of a newspaper
site, group links to different parts of the paper (weather, sports, etc.) and
allow users to bypass these links to move straight to current headlines.
K. If a search engine is implemented,
provide as much leeway for accommodating truncated or misspelled search terms
as possible. (B [13.7])
Example:
At http://www.vb-helper.com/HowToBeg.htm, there is a sample VisualBasic
program for using Microsoft Word’s spell checking capabilities with a search
form.
L. Provide links that allow users to
bypass ASCII art (e.g., smileys, graphs rendered as ASCII text), but also
provide an appropriate description of what they are bypassing. (B [13.10])
M. If you are using forms, include default,
place-holding values in edit boxes and text areas. (B [10.4]
Example:
If the user is required to enter their first name in a form field, use
“First name” as a default value or use a default selection from a pull-down
list.
V. Provide the user with as
much control as possible
A. Support use of style sheets,
particularly to control presentation. However, ensure that information
presentation is not reliant on style sheets. (A, B [3.3, 6.1]) When style
sheets are used, follow the Web Content Accessibility Guidelines, Section 5
B. Where streaming information is
provided, allow user control over stream rate where possible. (A)
C. Give only the user the ability to
dismiss on-screen messages (A)
Example:
Avoid automatically redirecting users to changed URLs;
rather, let them read a redirect screen at their own rate and then take an
action to go to the new URL. (B [7.5])
D. For actions with critical or
irreversible results, prompt user for confirmation (A)
Example:
If user clicks on a link to another site, provide information indicating
that the other site may be inaccessible and providing instruction on how to get
back to your site.
E. Avoid auto-refreshing pages or other windows that change
without informing the user. (B [7.4, 10.1]])
VI. Maximize usability of design
elements and avoid elements that would cause problems for many users.
A. Avoid functions that require multiple
actions to activate or operate (A)
B. Avoid objects that blink, flicker or
flash, particularly in the 4-59 hertz range. Avoid anything that changes rapidly between dark and light.
(These can trigger seizures in some photosensitive individuals.) (B [7.1, 7.4])
C. Maximize
contrast between backgrounds and text. (B [2.2]) Avoid patterned backgrounds.
D.
Avoid pop-up windows. (B [10.1])
E.
Use the most
current HTML standards. (B [11.1, 11.2])
For Additional Assistance
Many validation tools are available on the Internet to
assist with accessible design. Some of the most popular are the following (the
services are free unless otherwise noted):
General (assist with overall accessibility)
Bobby: http://www.cast.org/bobby
Popular validator for compliance with W3C standards
LIFT ($49/year): http://www.usablenet.com/index.htm
Provides specific code fixes; not as thorough as Bobby
WebSAT: zing.ncsl.nist.gov/webmet/sat/websat-process.html
Checks for site usability based on several criteria,
including accessibility
W3C Validation Services: validator.w3.org/
