All web sites associated with the federal government (and an increasing number
of states) will need to comply with the Americans With Disabilities
Act by early next year. This will affect web publications, software
development, and hardware and software procurement standards.
CONTENTS:
THE ISSUE AT HAND
I recently attended a
web accessibility seminar, and it confirmed some issues that have been discussed
in recent months throughout the web development commmunity: new U.S. Federal
and State laws affecting web sites. While you may not be running a site supported
by federal or state funding, it might be beneficial to make accessibility
adjustments to your site just the same.
According to the seminar, federal web sites (and their contractors) must adhere
to the federal law by February 2000. State laws, in some cases, are already supposed
to be in effect, but this varies. For example, in the case of Maryland the law was
supposed to go into effect as of October 1998, but the information is only now
(almost a year later) being widely disseminated.
WHAT THE NEW LAWS MAY MEAN FOR YOU
Affected web site managers and developers must take into account the steps below
to rectify possible problems on their web sites. For most of you (I hope),
these steps mean minor tweaks to your sites; for others it may mean significant
site overhaul or redesign.
The features listed below are not optional. If you have been
previously unaware of accessibility issues and failed to take these principles
into account, you will now have to make an additional effort to adopt the
good design practices described below. According to the information presented
at the seminar, if you have a public web site associated with Federal or
State government (including state-funded colleges and universities), you are
required to adhere to these guidelines. This includes faculty pages meant
to disseminate information for students and resources for the public, but does
not include "personal" web pages (though these guidelines encourage good design practices in general).
Please begin checking and modifying your site soon, as the six months will pass by quickly.
OVERVIEW OF ACCESSIBILITY FEATURES FOR WEB SITES
|
General Techniques
|
Checked
|
Fixed
|
|
Judicious use of colors, fonts, and graphics.
Restraint is the key word. A web page can, in many ways, be likened
to a page in a book. As a general rule:
-
Avoid the use of more than two or three colors (plus white) and three font sizes.
-
Use bold and italic sparingly (for titles and occasional emphasis),
and avoid underlining plain text (people often mistake
underlined plain text as a link).
-
As far as colors go, keep in mind that 8-12% of the population is color blind.
-
The most common form of color blindness is Red-Green, where the colors
red and green can appear as a shade of brown. Placing red text on green,
or vice versa, may yield an unreadable web page for roughly 10% of your visitors.
-
Similar problems may occur when using red, green, and brown in graphics
(pie charts, graphs, maps, etc). Instead, consider using textures and
fill patterns. Otherwise, use colors with a good measure of contrast
(light tones vs. dark tones).
-
Try to minimize your use of textured backgrounds. If you must use them,
make sure they are very low contrast. Be especially careful when choosing
font and link colors on a colored background.
-
Also, avoid animated gifs (or have them loop only once or twice). They
are distracting when trying to read text on a page, and for some people
with certain learning disabilities animated gifs may be very difficult
to ignore.
|
|
|
|
Consistent layout.
-
Determine a common layout for your all of your web
pages, and stick to it. This greatly assists visitors in
navigating your web pages, and for some may determine their
ability to understand the organization of your pages.
-
Placement of the title, logo, navigation and content should
be consistent from page to page.
-
Navigational links should be placed within the first "screen"
the viewer encounters on any given page (they shouldn't have to scroll
to find the links).
|
|
|
|
"No Frames" compatibility.
There are two options for those of you with web pages using
"frames" (if you don't know what "frames"
means, it's probably not you).
-
Maintain a text-only or non-frame version of your web site in
parallel with your framed version. The text-only/non-frame
version must be kept as up-to-date as the framed version.
This basically means maintaining two versions of your web site.
- --OR--
-
Redesign your site so that it doesn't use frames.
In essence, you need to weigh creating and maintaining an up-to-date
parallel non-frames (or text only) site vs. doing a site redesign.
|
|
|
Viewable with ANY browser
-
Use evaluation tools and text-only browsers to verify accessibility.
-
Your site needs to work with all types of browsers, including text-only
browsers like Lynx, and screen-reader technology (for the visually
impaired). Lynx gives you a good (though not perfect) approximation of
how some of the new technology for the disabled "reads"
or represents a web page.
-
Another option is to find out if there is an accessibility lab on
a nearby campus which may be used to test your web pages.
-
It is also good idea to download a version of Lynx
(or telnet to the campus version - just type "lynx"
at the telnet prompt), and view your web pages through it to
see how they appear. Lynx is not the most intuitive program for those
of us used to Netscape and Internet Explorer, but it's a basic
piece of software, and the instructions at the bottom of
the page are simple and clear. If you don't use telnet, you
can download (free) a PC version of Lynx from
http://lynx.browser.org/,
and versions for Mac and other platforms may be found at
at this URL.
-
If you are using Cascading Style Sheets on your web pages, make
sure your practices are in line with the recommendations by the World
Wide Web Consortium's (W3C) Accessibility Recommendations (see URL at bottom of page).
|
|
|
Offer alternative to online forms, PDF, JavaScript, etc.
-
All information in non-HTML file formats, newer technologies
(such as Flash/Shockwave, Real Audio, QuickTime, etc.), HTML
forms, PDF, JavaScript, and the like, should be available in plain
HTML or text formats.
-
Failing that, a method of communicating with the information
provider and obtaining the information in alternative formats
(for the visually or hearing impaired) should be made easily available.
|
|
|
To Accomodate Visually Impaired or Blind Users
|
Checked
|
Fixed
|
|
Supply descriptive text attributes (alt, longdesc, title,
map, etc.) for images, links, graphs, charts, tables,
image maps.
-
Images: include "alt" tags for all images.
"alt" descriptions should be short but understandable
to someone who is visually impaired. If you're using a WYSIWYG
editor, you should be able to enter "alt" descriptions by
double clicking on a web page image, and entering alternative text
in the text field.
-
Links: when creating links, don't link a
whole sentence. Link only a couple of key words or a short phrase.
Reading a sentence (or several sentences) of bold, underlined,
colored text can be tiring for even the best vision.
-
Graphs, charts, maps: if a graph, chart,
or map is integral to your message or content, include a link to
a separate page holding a text description of the information presented
in the graphic. This is true of other important images as well.
-
Tables: tables can be tricky. Some screen readers read
only from left to right, regardless of table borders. For detailed information
on how to produce accessible tables, please see
the W3C table markup document.
-
Image maps: like tables, image maps can be complex.
W3C advises, "For image maps, either use the 'alt' attribute
with AREA, or use the MAP element with A elements (and other text)
as content."
-
Audio describe videos.
If you are providing video clips on your web pages,
there must be accompanying audio text which describes the
video information for the visually impaired.
|
|
|
To Accomodate Users With Hearing Loss
|
Checked
|
Fixed
|
-
Provide text or visual cues for all auditory
information (voice, sounds, etc.).
Where sound is used, be sure to provide a link to a
page containing a text representation of description of
the auditory information.
-
Caption all videos.
Likewise, make a text version of the information available.
|
|
|
To Accomodate Users With Motor Impairments
|
Checked
|
Fixed
|
|
Keep the site easily navigable.
Have a menu bar in the same location on each page.
Limit the number of clicks needed to navigate through the site.
|
|
|
FURTHER RESOURCES:
RELATED ARTICLES AT evolt.org:
A founder of evolt.org, Marlene (say "Mar-lay-nuh") currently lives in Virginia and is a web and print designer, massage therapist, photographer, artist, burner (person who attends Burning Man), dancer, activist and yogini. In years past Marlene served as evolt.org's executive director and treasurer, though she's not much involved these days. But she still encourages visitors to give to evolt.org.
Marlene began exploring computer-generated graphics with a purchase of the first Mac 128K in 1984. She's subsequently been involved in print design, illustration, and since 1995, professional web design and development. Her other skills are information architecture, usability testing and site management (the largest at 14,000+ pages). Additionally, she's taught seminars, has been published on A List Apart, and contributed to and reviewed a chapter on evolt.org which appears in Information Architecture for the World Wide Web, Designing Large Scale Web Sites.
Check out her portfolio at DigitizeThis.com.