Ref card: with html examples

There is no formatting in this plain text version. The headings are not
consistent with the later, shorter versions of the reference cards because
I have not worked on this version since 11th August. This draft Basic Guide
was presented to the Washington D.C. Webmasters two weeks ago, in
conjunction with another paper of mine, "Top Ten Hazards of Accessible Web
Design": both papers were received well.

Title: Basic Guide to Accessible Web Design
Author: Stella O'Brien, KO2
Contact: smo-brien@lioness.demon.co.uk
Version: 2
Status: Draft
Date last modified: 11 August 1998
Audience: general; html aware; concerned with issue of accessibility but
not aware
Purpose: overview of typical access problems; suggests techniques to
address problems

Contents

1 Introduction
2 Use meaningful alt text for pictures
3 Use alt text with applets and plug-ins
4 Provide keyboard access
5 Make text easy to read
6 Keep text stable to read
7 Provide easy navigation and links
8 Using frames and tables
9 Provide access to audiovisual media
10 Get more information

1 Introduction

You have valuable information to share about yourself or your organisation.
Why fail to reach interested customers when a few simple tips can make your
site
so much faster and easier to use for people with portable web devices, anyone
with low bandwidth connections, or people with disabilities?
Graphics, sounds, and moving images are all powerful information tools. Use
them, but in such a way that your web site communicates effectively even when
they are turned off. Following these simple and cost-effective guidelines
can help
you to achieve this.

2 Use meaningful alt text for pictures

Good visuals are very powerful, but not everybody can
see them. Text can be spoken or converted into Braille.
Make the graphics on your pages accessible. Write a concise description of the
picture and include it in the alt part of the <img src> tag.  (If you have
specified
height and width for your image placeholder,  please make sure that it does
not
hide the alt text). alt is used like this:

<img src="cake.gif" alt="John's football-shaped birthday cake">

A version which does this

<img src="cake.gif" alt="photo">

is accurate, but it is useless to anyone who can not see the photo.

If you need to present important information in the form of a diagram,
graph, pie
chart etc., then remember that these can not be seen by some users. The
complexity of this information might mean that you will need to provide a
longer
description as a suitable alternative, and this would not fit comfortably
in an alt
tag. Use the "rel" tag and the "d-link" so that the user can easily move to
a more
in-depth description  by selecting the "D" link. For example, if you wanted to
provide more details about John's birthday cake, put them in the file
"cake.html"
and do the following:

<img src="cake.gif" alt="John's football-shaped birthday cake">
<a href="cake.html" rel=next title="Description of John's birthday cake">D</a>

Selecting D takes the user to the fuller description. At the end of the
description provide a Return link to take the user back to the image.

3 Use alt text with applets  and plug-ins

Some browsers don't support Java applets. Some users switch off Java or
plug-ins
to speed up download times or to avoid security risks. So, it is important
to use
alt tags and a "d-link" if you use Java or plug-ins to present important
information (see above for use of "d-link").

<applet code=plantfood alt="[Animation: Plant food trial results]">

The text in the applet alt will be displayed  in Java-enabled browsers if
users
have Java turned off. Browsers which do not support Java will ignore any
<applet>
tags, and their users would not know that there is anything there. You can
fix this by
providing a quick explanation and description as html text within the <applet
tag>.

<applet code=plantfood alt="[Animation: Plant food trial results]">Our
plant food trials demonstrated that in controlled conditions plants which
received our food are less prone to disease and carry up to 60 per cent more
blossoms.
</applet>

A  browser which supports Java, but has it turned off, will only display
the text
"[Animation: plant food trial results]". A browser which does not support
Java will
display the html content, "Our plant food trials demonstrated that in
controlled
conditions plants which received our food are less prone to disease and
carry up
to 60 per cent more blossoms".

In both cases, the d-link will give easy access to a fuller description of
the trial results.

If an applet gathers information for a database then the author needs to
provide
alternative ways for the user to provide information such as an accessible
form, or
contact details.

4 Design for keyboard and voice access

Not everybody can use a mouse or tracker ball. Many people find it faster
to tab between form fields than to select each one by mouse. Make it
possible to tab up, down and across the screen, using directional
arrows, 'enter', and other keys to control the cursor. Some people can not
use your forms or database, so always include an email address and
further contact information for users.

Not everybody can see your imagemap. Even when an imagemap is well-
designed and striking to look at, many people find it quicker to follow the
links
with keyboard shortcuts rather than clicking on specific regions of it.
Depending
on the number of links, the user-friendly author can
provide
a) alt text in the area tags;
b) a list of text links just below the image; or
c) a link to a full list of links which is
arranged in an alphabetical, or easily understandable way.

<img src="welcome.gif" alt="Library resources list"
usemap="#map1">
<map name="map1"> <area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference">
<area shape="rect" coords="34,34,100,100" href="media.html"
alt="Audio Visual Lab"></map>

People who use voice control systems need clear, distinctive link names and
navigation aides to enable them to interact with a page successfully. If
the names of links sound similar then it will be easier for the speech
system to confuse the words and bring up the wrong links.

5 Make text easy to read

Be clear in what you say and how you say it. Even for sighted people with big
screens, it takes longer to read online text than print. Users scan text,
picking out
keywords and sentences and ignoring those areas which do not interest them.
Many users find it difficult to manipulate long, scrolling pages. They want
the
text to be clear, short, and relevant. Provide summaries so that users know
if they
want to follow links or to read a document in greater detail.

It is harder for blind users or people with small display screens to scan for
interesting material. Visual scanning  allows users to process various
sources of information at the same time. Users of speech browsers or screen
readers scan a speech
stream to listen for cues to relevant information. Synthesised speech
output constricts scanning for points of interest to listening to a linear,
monotone output in which information is presented serially, a piece at a
time.

 The author can help by using proper HTML markup to emphasise the structure
of the page. Use <H1> for the top level heading; <H2> for the titles of the
main body of text; <H3> and beyond for finer divisions of information. Use
list tags to create lists and bullet points.

Complex background images and colours obscure text and make it
difficult to read for people with vision impairments or print disabilities.
So do poor colour contrasts; white text on a pale grey background is
difficult to read and to print.

Some people need large fonts or a zoom facility to read a page more
comfortably. Use relative sizing and positioning (e.g., a percentage of the
default size) rather than absolute sizes or positions (e.g., pixels or points)
for both fonts and graphics.

6 Keep text stable to read

Screen readers can not read moving text. People with cognitive disabilities
or vision impairments struggle to read moving text. Auto-updating of a page
is dis-
orienting for some people who use screen-readers. It is a mystery to users
who have cognitive disabilities and do not understand why the page has
changed when they did not request the action.

Allow users to freeze movement. Request users' permission before refreshing
a page.

7 Provide easy navigation and links

Write brief, descriptive page title which reflects the name and hierarchy
of the
web site. For example.

<title>acme | web design | access guide<title>

In this way users always have an idea of where they are which is useful if
they
did not enter the site through the home page. Well written titles also make it
easier to recognise pages in a history list or collection of bookmarks.

Navigation is easier if every page links to the home page. The home page
should
offer users a choice of overviews of the site's structure and contents.
Navigation
aides should  be consistent in name, style, and position throughout the site.

Knowing that a navigation icon is a 'button link' can not help the user to do
anything useful without further information as to what it does.
For example

<img src="pen.gif" alt="button">
<img src="openbook.gif" alt="button">

just tells the user that there is a button. If you tell the user what the
button is for,
then the link is meaningful.

<img src="pen.gif" alt="signup">
<img src="openbook.gif" alt="place an order">

Some authors write unhelpful text links such as

<a href="x">this</a>
<a href="y">Click here</a>

which read as "this" or "click here" and do not make sense out of context
or when
scanning quickly. Use meaningful link phrases: for example

If you have any comments you can email us by clicking <a
href="mailto:admin1@business.com">here</a>

which gives the link "here". It is more informative and useful to write

If you have any comments <a href="mailto:admin1@business.com">send
email to John at admin1@business.com</a>

for which the link reads "send email to John at admin1@business.com".

8 Using frames and tables

Frames are difficult to design, navigate, or print effectively. Use frames
sparingly, and only if you understand them very well, but otherwise
do not use them. The source of a frame should always be an HTML file. If an
image file or Java file is the source then there is  no means to attach alt
text or other useful
alternatives which some users will need.  Provide and regularly update a
<noframes> option for browsers that do not support frames.

Provide a title for each frame so that it is easier to understand the contents
or purpose of each one.

<frame src="nav.html" title="Navigation bar">

Bookmarking frames can be a problem. Keep the URL's correct by using
target in your link.
For example

<a href=results.html target="_top">

forces the browser to replace the entire window with a new frameset, not
just the currently selected frame. This reload means that the URL is
now correct and that navigation actions behave appropriately.

Do not use tables to manipulate page layout or to create multiple columns
because these will not make sense when displayed in some browsers, or
when interpreted by screen readers used by blind people or users with some
forms of dyslexia.

Use tables for data. If the tables are complex then you will need to provide
a link to an accessible page where the data are presented in a linear
manner, and which is updated every time there is a modification to the
data on the inaccessible page.  If complex data are to be presented then
provide text alternatives which summarise the data, explain the
interpretation, and allow access to the raw data. These alternative
versions may also assist people with cognitive disabilities who need data
to be presented to them in a different manner.


9 Provide access to audiovisual media

Audio is a rich medium which is not available to deaf people, users in a
noisy environment, or those who have the sound turned off. Provide a text
version of sound or speech clips which stand alone, or which accompany a
visual presentation. Include a description of all relevant sounds.

Provide both audio and text descriptions of dynamic visuals such as movies,
or animations. Use audio and text to make visual cues explicit. Draw
attention to, and describe, significant action. Important auditory and
visual information is now available to users who have partial or no access
to the original material.

10  Get more information

For further information, more detailed guidelines, examples, and
techniques, see the WAI Page Authoring Guidelines at
http://www.w3.org/TR/WD-WAI-PAGEAUTH

This document is a working draft.   It contains some basic tips based on
current best practice and the 80:20 principle of cost and benefit. The
recommendations change on a regular basis and vary according to the
responsibilities of the web author. If you are mandated to design or
maintain an accessible web site then contact an appropriate adviser.

Stella O'Brien, KO2
email: smo-brien@lioness.demon.co.uk

Received on Thursday, 27 August 1998 13:24:26 UTC