Designing Accessible Web Sites:
Creating sites that are accessible to people with disabilities
Prepared By:
Iowa Program for Assistive Technology and Iowa Department for the Blind
April 1999
"No one with a disability will access my site."
According to Georgia Tech's GVU WWW Survey (April 1998),
approximately eight percent of web users have a disability. Nearly half of those users are
blind or visually impaired. For details, check out the
GVU WWW web
site.
In This Booklet:
A person who has a disability uses a variety of techniques
and equipment to "surf the Web." For example, a person who is blind uses a
screen reader program to convert the text on the screen to either synthesized speech or
refreshable Braille. A blind person cannot use a mouse efficiently. Therefore, the screen
reader also allows the user to move the mouse pointer with arrow keys. Using keyboard
shortcuts, she can operate a web browser, read a web page, and choose links. The screen
reader reads the information and indicates which link is selected.
When designing your web pages, remember that a blind person
cannot use the mouse or read graphics, a deaf person cannot hear audio files, a person
with physical disabilities uses an alternative input device, such as a joystick.
You do not need to forgo a multi-media, graphic intensive
design in order to make your information accessible. Using the following guidelines, you
will ensure that your pages can be used by people with disabilities. In addition, by using
the guidelines, you can also make your site more friendly to search engines as well as to
people using a variety of technologies (such as desktop browsers, voice browsers, and
mobile phones) and to people with slower web connections.
Links
- Use descriptive text links that will make sense if read out of
context. Avoid: Click here for cow-tipping information. For snipe hunting tips, click
here. Instead: Cow-tipping information.
Use a space and a period or a vertical line to separate a list
of text links on the same line.
Images,
Image Links, and Image Maps
Do not assume a blind person does not care about the images
on your page. While a screen reader cannot interpret graphics, you can make your images
accessible. Here's how.
- For all images and image links, use descriptive ALT Text. Good
ALT text descriptions reflect the function of the graphic.
<IMG SRC="logo.jpg" ALT="MSN Logo">
Or
<A HREF="search.htm"><IMG SRC="search.gif"
ALT="Search"></A>
- Avoid server-side image maps because they require a mouse. If
you use server-side image maps, provide a list of text links below the image map. The ALT
text should indicate the links are listed below. Example: ALT="Image Map: Use text
links below." Or, provide a text-only page.
- For client-side image maps, use ALT or Title attributes for
the Area elements for each link.
<AREA SHAPE="rect"
COORDS="1,47,48,69" HREF="index.htm" ALT="Home">
- For important graphics (charts, tables, diagrams), include a
D-link to a text alternative page.
<IMG SRC="chart4.gif" ALT="Chart: Product Distribution">
<BR> Quarterly Product Distribution
<A HREF="describe.htm">D.</A>
You may use invisible D-links. An invisible D-link is a small
image (1 pixel) or transparent image used as a link whose ALT text is "D-link,"
"D," or other descriptive ALT text.
- Provide text within the body of the OBJECT element.
<OBJECT data="sales.gif"> 1997 Sales were down subsequent to
</OBJECT>
Quick Accessibility Test: View each page
with the images turned off. Does every image have descriptive ALT text? Can you determine
the purpose of each image? Press the Tab key to move through links. Can you tab to all the
links? Can you discern the purpose of the link by reading the link only?
Text Tips
- Avoid bit-map text. Screen readers ignore bit-map text.
- Avoid scrolling & moving text. According to the W3C
guidelines: "Some people with cognitive limitations or visual disabilities are unable
to read moving text quickly enough or at all. Movement can also cause such a distraction
that the rest of the page becomes unreadable for people with cognitive disabilities.
Screen readers are unable to read moving text. People with physical disabilities might not
be able to move quickly or accurately enough to interact with moving objects. People with
photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to
59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as
well as quick changes from dark to light."
- Use proportional font markups rather than specifying font
size. This allows the site to be shown using the user's preferences.
Use foreground and background colors that contrast well.
Forms
- Keep form labels next to the form fields.
Name: <input type="text" size="40" name="s3">
- Do not use graphical buttons. If you do, use ALT text that
describes the function.
<IMG SRC="Submit.gif" ALT="Submit Button">
Or
<IMG SRC="Reset.gif" ALT="Clear Form">
- Specify a logical tab order with "tabindex"
attribute.
- Use the "For" attribute to associate labels with
their form controls.
If all else fails, provide a form that can be downloaded then
mailed or e-mailed, or list a phone number to call someone for assistance.
Frames
- Provide a No-Frames alternative. Make sure the
No-Frames link is the first link in the frame with the initial focus.
<A HREF="contents.htm">No Frames.</A>
- Include a NOFRAMES element at the end of each FRAMESET.
<NOFRAMES><A HREF="contents.html" title="site contents">Go
to the Contents page.</A></NOFRAMES>
- Provide a title for all frames.
<FRAME SRC="main.htm" title="Contents Page">
- Do not include an image directly in a frame - put it in an
HTML document.
- Describe the layout and purpose of frames and how multiple
frames relate to each other. Use the "longdesc" attribute on the FRAME and
IFRAME elements to designate a long description.
Tables
- Use tables for tabular information. Try style
sheets to position graphics and text rather than tables.
If using tables, follow these guidelines:
- Explicitly associate table cells with row and column labels
using the "headers" and "scope" attributes included in HTML 4.0
- Use row and column headings that are short, but descriptive.
Or provide abbreviations for lengthy row or column labels using row and column header
abbreviations (the "abbr" attribute).
- Provide an alternative or summary for tables.
<A HREF="97summary.htm">Summary of Table.</A>
Or
<TABLE border="2" summary="This table lists products, product release
dates, and product description.">
If all else fails, provide an e-mail
address or phone or fax number for more information.
Lists
- Indicate the number of list items that are in
an upcoming list or number the list items.
- If using bullets, try a lower-case "o." Screen
readers ignore both graphic bullets and bullets inserted with the Unordered List tag
<UL>.
- For graphic bullets, use the small "o" or
"bullet" as the ALT text.
PDF Files
- Include a link to download the Access plug-in next to any link
to download the Adobe Acrobat reader. The Access plug-in allows the user to convert the
PDF file to an ASCII Text format.
If you are using a screen reader, download
the Access plug-in as well: http://access.adobe.com.
JavaScript,
Applets, DHTML
- Provide alternative presentations of content for each script
and applet that conveys information. Use the NOSCRIPT element, supply a description as
content of the APPLET element or the OBJECT element.
- Provide alternative mechanisms for each script and applet that
performs an important function, other than presentation of information.
- If an applet requires user interaction that cannot be
duplicated in an alternative format, make the applet directly accessible.
- Provide a mechanism for the user to freeze all moving or
blinking objects, particularly those that contain text.
Style Sheets
- Use elements and attributes that comply with an
HTML 4.0 Document Type Definition (DTD) and CSS-1.
- Ensure pages are readable and usable without style sheets for
browsers that do not support them or users who deactivate them.
- Nest headings properly.
- Use style sheets rather than HTML attributes to control
spacing or to force layout.
Audio and Movie
Clips
- Provide a text transcript next to the anchor
for the sound.
- Use captions or other visual representation for information in
the sound track.
- Provide text description of video information.
- Synchronize transcript and video descriptions with audio/video
information.
Sample Sites
Resources
Legal Questions
Applying
the ADA to the Internet
Is Your Site
ADA-Compliant or a Lawsuit-in-Waiting?
The Need for Accessibility
Test Your Site
To determine whether your site is accessible
with a screen reader, check out the following:
Lynx Viewer
HTML checkers. Non-standard HTML very often causes problems
for screen readers. Run your site through an HTML checker. HTML 4.0 includes Accessibility
standards.
For More Information
You can find expanded online versions of these
guidelines can be found at:
If you have questions, call the Iowa Department for the Blind
at 515-281-1338.
This booklet may be reproduced in its entirety.
Iowa Program for Assistive Technology (IPAT)
IPAT is supported by the National Institute on
Disability and Rehabilitation Research, U.S. Department of Education. This material does
not necessarily reflect the views of the NIDRR/ED, or indicate official endorsement of the
contents.
Iowa Program for
Assistive Technology
University Hospital School
100 Hawkins Drive, Room S295
Iowa City, IA 52242-1011
800-331-3027 (voice/TTY)
319-356-0550 or
Iowa Department for the Blind
In provision of services and in employment practices, the Department.for
the Blind does not discriminate on the basis of age, sex, race, creed, color, national
origin, religion or physical or mental disability. For more information, contact the
Director, Iowa Dept. for the Blind. The Department is an Equal Employment
Opportunity/Affirmative Action Employer.
Iowa Department for
the Blind
524 Fourth Street
Des Moines, IA 50311
800-362-2587
515-281-1333
515-281-1355 (TTY)
IPAT/Home InfoTech Funding UERS Publications Links
Disclaimer
IPAT/InfoTech is proud to be
Find
out more about this logo and accessible page design. Also check
out the booklet, Accessible Web Designs for more information.