This article does a good job of summarizing the issues and explaining why
they are important.

Kelly



Create a barrier-free Web site
Macworld
San Francisco
Aug 2000
Jim Heid
Volume:                   17
Issue:                    8
Start Page:               109

OPENING SITES TO THE VISUALLY IMPAIRED WILL BENEFIT EVERYONE

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-or weeks-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," at 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-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-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/3365658, www.hj.com)
$795 Jaws for Windows. For the Mac, Alva Access Group (51/451-2582,
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="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-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-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-if not downright incomprehensible-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-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-many screen readers will
skip them entirely.

THE SOUND OF SURFING

LISTENING TO WEB SITES THROUGH A SCREEN READER SUCH AS Jaws is the best
way to appreciate the challenges and issues that lie behind Web site
accessibility.
Here's a sampling of what you'd hear on a visit to the high-traffic Web
sites for the New York Times (www.nytimes.com) and public broadcasting
giant WGBH (www.wgbh.org).

Hard Times at the Times

The New York Times on the Web immediately gets off on the wrong foot. The
ad graphic in the upper left corner (A) has no ali text, so Jaws reads
its link aloud-and because sites serve moss ads dynamically from databases,
these links are incomprehensible. In this instance, the laws surfing experience
begins as follows: "Page has 131 links. Link graphic hst one-dash-side-dot-gif
slash six-six-hundred-ninety-six-d-six ." This numerological gibberish
continues for several more seconds. Simply adding alt "Advertisement" to
the image tag would have eliminated that agony.

Things improve only slightly from here. The site's designers also fail
to specify alt text for the left-hand image map (B), sc Jaws reads the
links thus: "Image map link slash index. Image map link front slash index.
Image map link day slash world. Image map link day slash national." And
on and on.

Finally, the links for each of the main front-page articles (C; read simply
"Go to article." A blind user surfing from link to link won't know which
article each link designates.

Smooth Talker

The Web site for WGBH in Boston does it right-no surprise, given that WGBH
is headquarters for the National Center for Accessible Media.

The first thing a Jaws user hears is "Page contains 39 links"-less overwhelming
than The New York Times on the Web's 131 links. From there we hear "Link:
D vertical bar. Link: text version and access instructions. Graphic: This
week." (Thanks to an alt attribute, Jaws doesn't read the whole file name.)
"Link: site map. . . .

You'll notice that the text links at the very top of the page (A) enable
a blind user to jump quickly to a text-only version of the site and get
instructions about the site's structure and accessibility features. The
d link (B) leads to a page containing a description of the home page
graphics-how
many there are, what they look like, and so on-making the site a bit more
inclusive.

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.


[IMAGE ILLUSTRATION]

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 clientside 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-especially those used for navigation. Far too many sites-including
Yahoo, Amazon, and The New York Times on the Web-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 ( I ) 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--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"-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 tech niques 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 accessibilityand 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'tyielding nonsensical results.

If you use tables for layout and let's face it, they remain the most
browsercompatible
layout technique-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.

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, 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
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.


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.

A Macworld contributing editor since 1984, JIM HEID (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.


VICUG-L is the Visually Impaired Computer User Group List.
To join or leave the list, send a message to
[log in to unmask]  In the body of the message, simply type
"subscribe vicug-l" or "unsubscribe vicug-l" without the quotations.
 VICUG-L is archived on the World Wide Web at
http://maelstrom.stjohns.edu/archives/vicug-l.html