W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2000

Media: Create a Barrier-Free Web Site (Macworld)

From: <LZelley@aol.com>
Date: Wed, 28 Jun 2000 10:17:02 EDT
Message-ID: <4a.765ed2f.268b62de@aol.com>
To: w3c-wai-ig@w3.org
The following article does a nice job of discussing web accessibility - and 
it's from Macworld!

Sincerely,
Luke Zelley
lzelley@aol.com

This article is available online at: 
<http://www.creativepro.com/story/news/0,,6713,00.html >

Create a Barrier-Free Web Site 
Opening Sites To the Visually Impaired Will Benefit Everyone 

By  Jim Heid 
Tuesday, June 27, 2000 
www.Macworld.com

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

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 -- 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 (|) 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 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 -- 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-yielding nonsensical results. 

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

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.

Copyright © 2000 Mac Publishing LLC. All rights reserved. Reproduction in 
whole or in part in any form or medium without express written permission is 
prohibited.
Received on Wednesday, 28 June 2000 10:17:46 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:13:49 GMT