W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2002

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

From: David Poehlman <poehlman1@home.com>
Date: Sat, 19 Jan 2002 00:02:01 -0500
Message-ID: <000e01c1a0a6$6eea2ae0$c2f20141@cp286066a>
To: "wai-ig list" <w3c-wai-ig@w3.org>

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

Accessible Websites  -- Making Sure That All Your Visitors Can Access
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. 
the frustration of a person with a mobility impairment when faced with
page that says "click here" and offers no alternative; imagine a blind
visitor loading your Website and being unable to even find out what
images are.

People with visual impairments surf the Web using adaptive technologies
such as text-to-speech programs which convert content to audio format,
all-encompassing screen readers, which present both content and control
features as audio.  People with mobility impairments use various
to replace mouse or keyboard access to a page.
But Web design requires certain strategies in order for a page to be
accessible to visitors with disabilities using these tools.  In this
article, we'll look at four issues, and strategies for resolving them.
These barely scratch the surface of key points needed by those who
like to make sure their Websites are as accessible as possible.  There
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:  &lt;img src="frank.gif"&gt; all it will be able
do is
announce that there's an image called "frank".  But if it sees this:
&lt;img src="frank.gif"  ALT="Picture of Frank Jones, our
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
to speed up access to pages!)

For a complex picture, or one that's difficult to describe in just a
words, the strategy is to use a link to a "description page";  the link
would look something like this:
    &lt;img src="frank.gif" ALT="see d-link for long description"&gt;
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
columns.  Imagine a table that is laid out in two columns, for example:


        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
cross card boating without or other proof or supervision qualification"

There are several accessible design strategies to help with this
First, try to make sure that each table element has one and only one
of text; it can also help to rearrange the table so that the headings
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
aggravation, because screen readers read all the content of a page --
when it's the same thing again and again and again.

The "fix" here is a means to skip through the content, bypassing
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
beyond the navigation tools.
4. Make sure context is universal.  Not everybody can click or scroll.
For example,
 Don't use
 &lt;a href="index.shtml"&gt; click here&lt;/a&gt; to jump back to our
 Instead, do use
 &lt;a href="index.shtml"&gt;jump back to our home page&lt;/a&gt;

Also, HTML 4.0 introduced two elements to deal with short forms.
can be contained within the ACRONYM element. Screen readers will read
value of the ACRONYM element instead of the acronym itself.
    Welcome to the &lt;ACRONYM title="Antarctic Council of

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

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
disabilities as well as their compatibility with various browsers.  If
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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:07 UTC