media:Fw: Accessible Websites -- Making Sure That All Your Visitors Can Access All Your Site

From: Editor@members.iteachnet.org, Int\'l Education Daily
david@members.iteachnet.org
To:  iteachnet-daily@members.iteachnet.org

Accessible Websites  -- Making Sure That All Your Visitors Can Access
All 
Your Site

By David J. Smith, consultant on
Geography and Technology. See also David Smith's columns from last year
Many Web sites are not accessible to visitors with disabilities. 
Imagine
the frustration of a person with a mobility impairment when faced with
a
page that says "click here" and offers no alternative; imagine a blind
visitor loading your Website and being unable to even find out what
your
images are.

People with visual impairments surf the Web using adaptive technologies
such as text-to-speech programs which convert content to audio format,
or
all-encompassing screen readers, which present both content and control
features as audio.  People with mobility impairments use various
devices
to replace mouse or keyboard access to a page.
But Web design requires certain strategies in order for a page to be
fully
accessible to visitors with disabilities using these tools.  In this
short
article, we'll look at four issues, and strategies for resolving them.
These barely scratch the surface of key points needed by those who
would
like to make sure their Websites are as accessible as possible.  There
are
a great many sites that will give you more advice, and even actual html
for improving accessibility.
1. Make sure you have "alt" tags for every image.  If a screen-reading
browser sees this tag:  <img src="frank.gif"> all it will be able
to 
do is
announce that there's an image called "frank".  But if it sees this:
<img src="frank.gif"  ALT="Picture of Frank Jones, our
headmaster"> 
then
it reports to the user exactly what the image is. (Note: this is also
helpful to visitors who have turned images off in their browsers in
order
to speed up access to pages!)

For a complex picture, or one that's difficult to describe in just a
few
words, the strategy is to use a link to a "description page";  the link
would look something like this:
    <img src="frank.gif" ALT="see d-link for long description">
    <a
href="descriptionpage.html#description_of_frank">d</a>
A user then can click on the "d" and be taken to the long description.
2. Columns in a table can be a problem unless content is carefully
planned.  Most "text to speech" readers read across a page, rather than
in
columns.  Imagine a table that is laid out in two columns, for example:

        ActivitiesRequirements

        Swimming and            A Red Cross card
        Boating without         or other proof of
        Supervision             qualification

This table will be read as "Activities Requirements....swimming and a
red
cross card boating without or other proof or supervision qualification"

There are several accessible design strategies to help with this
problem.
First, try to make sure that each table element has one and only one
line
of text; it can also help to rearrange the table so that the headings
go
down the left column, and content down the right.
3. Bypass Repetitive Navigation Links. Well designed sites generally
include a navigation bar at the top, or down the side of every page.
For a
person who uses a screen reader, these navigation links can be a source
of
aggravation, because screen readers read all the content of a page --
even
when it's the same thing again and again and again.

The "fix" here is a means to skip through the content, bypassing
whatever
the user doesn't want (or need) to hear.  The most common strategy for
this is to insert a 1 pixel by 1 pixel gif, with an alt tag "Bypass
navigation bar", that includes a link to an anchor further down the
page
beyond the navigation tools.
4. Make sure context is universal.  Not everybody can click or scroll.
For example,
 Don't use
 <a href="index.shtml"> click here</a> to jump back to our
home 
page
 Instead, do use
 <a href="index.shtml">jump back to our home page</a>

Also, HTML 4.0 introduced two elements to deal with short forms.
Acronyms
can be contained within the ACRONYM element. Screen readers will read
the
value of the ACRONYM element instead of the acronym itself.
    Welcome to the <ACRONYM title="Antarctic Council of
International
        Schools">ACIS</ACRONYM>Website

The ABBR element does the same thing for abbreviations:
    Average temperature at ACIS schools is -20 degrees<ABBR
title="celsius">c</ABBR>.
There are many sources of information about how to make the Web
accessible
for people with disabilities.  Be sure to see MIT's very good
"universal
design" area on its Website: http://Web.mit.edu/atic/www/sw/.  Also,
the
World Wide Web Consortium publishes standards and guidelines of all
kinds
for the Web; the pages on accessibility are very comprehensive:
http://www.w3.org/TR/WAI-WebCONTENT/

But if you want a quick heads-up on how accessible your Website it, you
can point your browser to http://www.cast.org/bobby. "Bobby" is a
Web-based public service offered by the Center for Applied Special
Technology that analyzes Web pages for their accessibility to people
with
disabilities as well as their compatibility with various browsers.  If
you
submit your site to Bobby, and receive a clean report back, you are
entitled to put a "Bobby" image on your site, along with the words
"Approved by Bobby at the Center for Applied Special Technology."

Received on Saturday, 19 January 2002 00:02:05 UTC