Create
a Barrier-Free Web Site
OPENING SITES TO THE
VISUALLY IMPAIRED WILL BENEFIT EVERYONE
By Jim Heid
MacWorld
Magazine,
August, 2000 page: 109
For people with visual
impairments, the Internet has the potential to broaden
horizons and open doors to independence. Using new surfing
technology, they can read newspapers and magazines without
waiting days&endash;or weeks&endash;for Braille or audio
versions and without depending on volunteer reading
services. They can shop for music, groceries, and airline
tickets. They can learn, bank, work, or just
surf.
That's the Internet's
potential. The reality is that many Web sites are cumbersome
or impossible for blind users to navigate. Banner
advertisements, multicolumn layouts, poorly phrased
hyperlinks, and unlabeled graphics can turn an
elegant-looking site into a navigational
nightmare.
Here's a look at the issues
and the answers behind Internet accessibility. This article
focuses mainly on the needs of users with severe visual
impairments, because your design choices impact their
experience most. For an overview of other accessibility
issues, see the online sidebar, "Designing
for Users with Other
Impairments," or at:
http://www.macworld.com/2000/08/create/access.html.
Growing
Awareness
Fortunately, the need to
improve Internet accessibility, not only for the blind but
also for everyone with disabilities, is receiving a lot of
attention, thanks in part to lawmakers. As part of an
amendment to the Rehabilitation Act of 1973, the U.S.
government recently passed regulations requiring that
federal Web sites be accessible to people with disabilities
by the end of the year. Meanwhile, the National Federation
of the Blind has filed suit against America Online, charging
that its system is inaccessible.
But addressing the needs of
disabled users isn't just a good cause&endash;it's also good
business. Consider this: an estimated 10 percent of
Americans have a physical disability, and a 1998 federal
study concluded that consumers with disabilities control
more than $175 billion in discretionary income. Open your
site to this group, and you'll not only expand your
audience&endash;you may also win some extremely loyal
customers.
Adding accessibility
features will also help you prepare for the coming stampede
of Web-enabled devices. Web-capable handheld computers, such
as the Palm VII, are already available, and soon you'll be
surfing from devices as diverse as cell phones and car
dashboards. All of these devices lack the large displays
needed to show off the fancy graphics and complicated
layouts on today's sites. By making your site navigable
without graphics, you benefit sighted and blind customers
alike.
The Sound of a
Site
Just how do people with
visual impairments access the Web? Most of them rely on
screen reader software. Screen readers use voice synthesis
to read aloud the contents of windows, menus, and other
interface elements. The most popular screen reader is
Henter-Joyce's (800/336-5658, http://www.hj.com)
$795 Jaws for Windows. For the Mac, Alva Access Group
(510/451-2582, http://www.aagi.com)
offers the $695 outSpoken.
Screen readers help visually
impaired users navigate a site by interpreting HTML tags,
particularly those dealing with hyperlinks, Web forms, and
graphics. Take the following HTML code, for example: Ða
href="http://www.yoursite.com/ index.html"ðGo to home
pageÐ/að
Instead of reading out the
entire link, the screen reader simply says, "Link: go to
home page." Blind users can then press the tab key to jump
from one link to the next. To get an idea of what a blind
person might experience on both an accessible and a
not-so-accessible site, see the sidebar "The
Sound of Surfing."
Easy Ways to Improve
Accessibility
Does making your site
accessible mean eliminating glitzy graphics, rollovers,
multimedia, Java applets, and all the other eye candy that
spices up (and sometimes clutters) today's sites? Absolutely
not. Indeed, sighted users won't even notice most
accessibility tricks.
The following tips are easy
to implement, even on existing sites&endash;and many also
improve the surfing experience for sighted users.
Describe Your Graphics It's
no news flash that graphics dominate today's sites. What
with buttons, logos, and artwork, a single page can include
a dozen or more images&endash;many of them essential for
navigation. By default, when a screen reader encounters one
of these graphics, it reads out the file name, often an
unhelpful&endash;if not downright
incomprehensible&endash;string of letters such as
Top2_rev.gif.
You can tell screen readers
to ignore these file names and provide valuable context for
your graphics. Use the Ðimageð tag's alt attribute
to give a brief description of the images&endash;for
example, XYZ Corporation Logo for a company logo or Link to
the home page for a graphical button. If, like many
designers, you rely on transparent GIFs to control space in
your layout, just use blank spaces for their alt
descriptions&endash;many screen readers will skip them
entirely.
Concise, meaningful alt text
is one of the most important accessibility features you can
add. It will also improve your site for the many sighted Web
users who speed up surfing by setting their browsers to skip
images.
Label Your Image Maps Image
maps are common navigation devices that divide a single
image into several different links. There are two types of
image maps: server-side maps, which rely on software that
runs on the Web server to interpret where a user clicked,
and client-side maps, which use HTML tags to denote each of
the map's clickable hot spots directly within the Web page.
Some screen readers can only interpret client-side
maps.
In addition to providing
client-side maps, it's essential that you use the alt
attribute to create an informative text description for each
clickable region&endash;especially those used for
navigation. Far too many sites&endash;including Yahoo,
Amazon, and The New York Times on the Web&endash;forget this
step, rendering their maps almost useless to a visually
impaired user.
Write Meaningful Links
Before reciting all the text on a page, some screen readers
recite just the hyperlinks, enabling a user to jump
elsewhere without having to listen to every word. But if you
use the all-too-common click here for your hyperlinks, the
user hears just "click here, click here, click here." The
solution is to write meaningful links that provide some
context, such as Learn about our products. Read aloud your
pages' hyperlinks as a test. Is the site still
navigable?
Provide Text-Based
Navigation If you use image maps or graphics for navigation,
also provide a text-based navigation scheme, such as a row
of links at the top or bottom of each Web page. Place a
vertical bar (|) between links to set them apart. This helps
some screen readers distinguish them.
A text-based site map, also
a great idea, enables sighted and blind users alike to jump
quickly to sections of interest.
Accessing Forms
Web forms, a prerequisite
for almost every online shopping site, present their own
accessibility issues because they rely on additional
user-interface elements, such as text boxes for typed
information, pop-up menus for choosing options, and Submit
buttons for sending the form's contents. The way you create
and position these elements greatly influences how well a
screen reader can interpret them.
Label Form Elements Properly
To help visually impaired users navigate your forms, you
need to provide a text label for every form element. For
example, instead of just leaving four empty fields for a
user's address, specify which part of the address to enter
in each box. And always position the labels either directly
above or directly to the left of the elements they describe.
This way screen readers can state additional information
about the element-&endash;for example, "edit: street
address."
If you use an image for your
form's Submit button, don't forget to specify alt text.
Otherwise, a screen reader will read the image as
"button"&endash;and if the page has multiple buttons, a
blind user won't know which one does what.
Put the Most Likely Choice
First When creating pop-up menus for navigation or for
choosing values such as a country, consider creating a
hierarchy, with the most likely choice as the default value
and others below it in descending order of likelihood. This
decreases the amount of scrolling users must do to get to
the desired option.
Designing Your
Site
You may want to use the
following techniques when starting a new site or redesigning
an existing one. The design choices you make at this phase
have a huge impact on your site's accessibility&endash;and
on its adaptability for other types of browsing devices,
such as mobile phones.
Simplify Tables Most
designers use HTML tables to position items on a Web page.
As a result, text doesn't always read logically across the
screen. Jaws is smart enough to deconstruct tables properly,
but most screen readers aren't&endash;yielding nonsensical
results.
If you use tables for
layout&endash;and let's face it, they remain the most
browser-compatible layout technique&endash;avoid nesting
them. Also consider providing nontabular versions of the
most important pages on your site. A simplified layout
speeds up your site for everybody.
Don't Count on Flash Blind
users can't access multimedia elements, such as Flash
movies. Therefore, if you use Flash for navigation or to
present content, you'll need to provide a non-Flash version
of your site to make it accessible.
Accessibility
Bookmarks
On these Web sites,
you can learn more about accessibility issues,
techniques, and tools.
www.w3.org/wai The
World Wide Web Consortium's Web Accessibility
Initiative is the horse's mouth for all Internet
issues related to accessibility.
www.cast.org The
Center for Applied Special Technology (CAST) is a
great resource for Web developers. CAST's Bobby is
a Web-based tool that will analyze any page and
report on its accessibility.
www.ibm.com/able/
IBM's Web Accessibility Checklist is a succinct
guide to accessibility techniques.
www.webable.com WebAble
contains a database of hundreds of accessibility
resources.
|
Test Your Sites
Those without vision
impairments might have difficulty pinpointing accessibility
trouble spots. You can use the free trial versions of both
Jaws and outSpoken, available from the companies' Web sites,
to check your designs for accessibility. The trial versions
are fully functional but work for only 20 to 40 minutes
before requiring a restart. You can test Jaws, the most
popular screen reader, on a Mac using Connectix's
(800/950-5880, http://www.connectix.com)
$179 Virtual PC 3.0.
If you've added
accessibility features to your site, post a notice on the
Usenet newsgroup alt.comp.blind-users. Invite its members to
visit your site and provide feedback. You can also submit
your Web site to http://www.cast.org/bobby,
which tests it and sends a report on its
accessibility.
As more stores and services
move onto the Web, accessibility will become an increasingly
heated issue. A little preparation and forethought now could
save you serious headaches later and win you valuable new
customers.
A Macworld contributing editor since 1984, JIM HEID
(http://www.heidsite.com)
writes and lectures about all aspects of Web development. He
thanks Tom Wlodkowski of the WGBH National Center for
Accessible Media for his insights.
MacWorld
Magazine,
August, 2000 page: 109
|