| |
Tips for accessibility
1. Provide text equivalent for audio and visual contents
such as images, graphical contents, image maps, animation, pre-recorded
audio and video contents. Various assistive tools can make use of
the text equivalent to present the contents to the users.
Pure graphical contents are not accessible to users who are
vision impaired. Pure auditory contents are not accessible to
users who cannot hear. Alternatives should be provided.
Suggestions -
For images, add the text label or explanation with the use
of the HTML parameters 'alt' and 'longdesc'. 'longdesc' caters for
very long descriptions which could be put under a separate html
file indexed by the 'longdesc' parameter. It is important that when
information is kept on separate HTML pages, any update to its graphic
counterpart may require synchronized update of the equivalent text
pages. Asymmetrical contents cause users to pick up outdated or
incorrect information.
e.g. a text label could be added to an image as -
- Add a short description -
- <img src="icon.gif" alt="Go to the next page">
(Technique used in Example 1.1)
- Add a long description which is put under a separate
HTML page -
- <img src="graph.gif" alt="graph of the hit
counts" longdesc="gragh_desc.html">
- The HTML page "graph_desc.html" contains a full
description of the statistics presented in the graph.
- For assistive tools that may not be able to render
the 'longdesc' parameter, an explicit text link can be used
- <img src="graph.gif" alt="graph of the hit
counts" longdesc="gragh_desc.html">
<a href="graph_desc.html" title="Hit count of the web
site in Oct 2005">[Text-version]</a>
(Technique used in Example 5.1)
If for a given type of multimedia content which conveys important
or useful information and the use of 'alt' or 'longdesc' is not
possible, an alternative text page could be provided. The following
examples show how some of these graphical / multimedia contents
could be made more accessible.
- ICONS and buttons -
Illustration of the effect of adding 'alt' labels to graphics
e.g. buttons
Example 1.1 - This button has ALT label
When the mouse pointer is placed over it, the text description
"Go to the next page" appears. The description can be read aloud
or transformed into braille patterns by assistive tools.
Example 1.2 - This button does not have ALT label
For some assistive tools, the URL address of the given
link may be rendered e.g. the button may be rendered as 'Link
http://www.abcd.com/A12lbl.html' which is meaningless to the user.
Other assistive tools may not be able to render the link
at all. Thus, the user cannot detect any associated description
and he/she cannot use the associated link to go to the next page.
Meaningful descriptions should be used to maximize the
benefit of the text label. e.g. an 'alt' label of 'Go to the next
section' or 'Go to the next page' may be more informative than
just 'Next'.
Similar techniques can be applied to other types of graphics
elements mentioned below.
[ Top
]
- Headings and captions -
It is better to use text headings instead of graphic headings.
If graphic heading / caption is required, an 'alt' text label
should be coded with the heading description. The example below
is an extract of a FAQ page. If no 'alt' label is given, the user
would not know what the question is:
Example 2.1
Answer:
Two types of digital certificates are suitable.
- digital certificate for signature;
- and digital certificate for encryption.
[ Top
]
- Decorative graphics -
An 'alt' description of the graphic is good enough if the graphic
itself is for decorative purpose and with little / no additional
information conveyed. Put the mouse pointer over the images below
to see the 'alt' descriptions.
[ Top
]
- Image maps with embedded links -
Similar to buttons, if an image map contains links to other web
pages, the links must be accessible e.g. through the use of 'alt'
labels or otherwise the transfer function of the given image map
will be entirely useless to vision impaired users. Alternatively,
a list of text links can be placed at the bottom of the image
to facilitate navigation.
[ Top
]
- Graph and pie charts with statistical data
-
The graphic can be labeled with ALT text but with a long text
description in another HTML page to describe the detail information
conveyed by the graphics. In the following example, both the use
of 'longdesc' parameter and explicit link are illustrated.
Example 5.1
[ Text version
]
Chart of hit counts of ABCD web site on 5 October 2005
[ Top
]
- Pre-recorded video / audio -
If the content is mainly for decorative purpose without much additional
information conveyed, a simple description of the video could
be given. However, if useful information is conveyed through these
contents, an alternate presentation could help to make it more
accessible. The following additional features could be provided.
- An audio clip can be provided with the video so that
the contents can be heard by users.
- Subtitles / descriptive texts can be provided in
the video so that hearing impaired users can read what is
presented.
- An alternate text page indexed by a short text link
can also be provided for maximum accessibility (e.g. provide
a [text contents] link to the text description page)
Example 6.1
the above clip has a sound track, subtitles and a pure text
description page.
Please Download RealPlayer 
to view the above video clip.
[ Top
]
- Flash animation -
Basically this is similar to the treatment of pre-recorded video
above. However, such animation is not only used for visual presentation,
it could also be used in -
- Home page of a web site with entry links to site contents
- If the given interface is the only interface available to
enter a site, users with disabilities may not be able to get access
to or enter the site at all. A solution will be to provide alternate
entry points e.g. Entry points for Animated and Static versions.
Furthermore, a 'Skip' link could also be provided at the animated
version in case the user does not want to wait for the playing
of the entire animation clip.
- Flash animation used at sitemaps or for menu selection
- an alternative, e.g. a text only sitemap, should be provided.
- Flash animation used with interactive response from
the user, e.g. simulation, games etc - an alternative text version
should be provided to convey the same message to the users.
[ Top
]
- Other types of animation -
e.g. Banners using Javascript - Such animation could be used for
decorative purpose or as entry links to hot topics e.g. hot news
banners. Ensure that the addressed items in the banner can also
be accessed somewhere else in the site, e.g. at the text only
sitemap or at other sections such as "What's new", otherwise a
text equivalent should be provided.
[ Top
]
- Documents and download files -
These include documents such as consultation papers, brochures,
application forms or contract documents. The common practice is
to provide such files in PDF format or in image format (by scanning
the document). Image format is not accessible by the visually
impaired at all. For PDF files that are generated from text-based
documents, the vendor's product provides accessibility plug-in
that can work with screen reading software to render the text portion
of PDF documents. Both text-based PDF documents in English and
Chinese can be rendered with the help of the plug-in. Text-based
contents of PDF documents can be identified as these contents
can be selected, copied and be pasted onto a text editor or word
processing editor and be visible as normal text under the editor
software. Some web sites also provide free translation of English
PDF files to other accessible formats. Note that the image elements
of PDF are still not accessible. For image-based documents, an
alternate document in text format could greatly improve the accessibility.
Word processing documents can also be used but to avoid the different
brands and versions of the product used by various users, a file
in RTF format is preferred. For application forms, where the use
of text or RTF format is not desirable, the use of online
application form could address the problem.
[ Top
]
- Online forms -
Forms with text input box, radio buttons, pull down list, submit
buttons and error message dialog can be rendered by assistive
tools. The following is an example of an online form.
Example 10.1
When the SUBMIT button is pressed without the input of the NAME
field, a dialog box will come up. All such features can be rendered
by assistive tools. Online forms, together with the use of security
features, can be a very effective means to make services accessible
to vision impaired users.
[ Top
]
- List and bullets -
Such features provide formatting for an item list and help
ordinary users recognize the structure and nesting. However,
for visually impaired users, they will just be treated as individual
sentences and may be hard for the users to realize the list or
nesting structure. More descriptive information could be added,
e.g. label each listed item with numbers.
Lastly, if it is not sure whether a given graphics / multimedia element
is accessible or not and information is disseminated using this medium,
a text equivalent of the given element would greatly improve the accessibility.
|
|