Article 8: ALT Tags
by Bernie Howe Copyright � 2004 by
Bernard Howe. All rights
reserved.
There seems to be a growing debate about
the correct use of ALT tags:
How much
text should be allowed;
What should be included in ALT tags;
Describing the graphic in ALT tags;
Listing the copyright in ALT tags;
Listing the width and height of images in ALT tags.
It would seem
that everyone now wants to make up their own rules
concerning the use of ALT tags. However, the reality
is that ALT tags are a replacement for the image if the
image cannot be seen. (This could involve those who
are blind, or those who browse with images turned off, or
those who use text-only viewers.)
What should the ALT tag really do?
ALT stands for alternative text, and here are some
guidelines on how to use ALT tags correctly:
ALT tags should be a text equivalent of the image. Keep it
short, as it is not to be a description of the image.
Descriptions are written using the LONGDESC or (d) links.
Long descriptions and (d) links are links to another
page where the explanation is located.
If graphic is used as a link, then state that in the ALT
tag. For example:
<img src="arrow.gif"
width="13px" height="10px" alt="link to Jim's car
repair">
Use text that
would make sense if you saw only the text and not the
graphic. A couple of examples: If the above code was read
in context it would look like this:
"To get your
car repaired go to Jim's Car Repair" "link to Jim's car
repair"
If the
description was for a 10-by-13 arrow graphic it would read
like this:
"To get your
car repaired go to Jim's Car Repair" "arrow graphic 10
x 13"
If you were
reading this, or having a screen reader read this page for
you, which would sound better?
The Bobby
accessibility tester says you need to have text in all ALT
tags. However, the opinion of many blind people and
accessibility consultants is that this is pure bunk. If you
leave the ALT tag blank, like this:
<alt="">
then screen
readers will skip over them, and text viewers would look
like this:
""
This technique
works well for page dividers, listing objects, directional
arrows, and page fillers and decorations for sighted
visitors.
Back to the top
ALT text
questions
The requirement
for alternative text also applies to images that carry no
information like "spacer.gif" (assuming the role of
spacer.gif is just to fill in some space). Write alt="" for
the alternative text to indicate that
an image contains no relevant information:
<img src="images/spacer.gif"
alt="">
This tells
assistive technologies, "Don't bother trying to get any
information about this image," and screen readers or text
browsers will completely ignore the image. If you do not
place alt="" for unimportant images, your site cannot pass
accessibility checks, and blind users may have to listen to
strings inserted by the assistive technology, such as:
IMAGE
cache.homeschool.com/@v=srRjq-h@/images/spacer.gif
Imagine how
awful a lot of those type announcements would sound. Why
clutter up your page with meaningless text when the graphic
is not meaningful?
If we are telling people that you can make good-looking
pages while making them accessible, then why make webmasters
take out all the little extra things that give them a sense
of building a site, which is a part of them? Many
times, filler graphics will add flavor to a web site. Good
graphics will enhance a web site, too, especially in
commercial sites that are selling items. They like to have
graphics of the products they are selling. Moreover,
people with screen readers and text viewers do not see the
picture to begin with, so why keep throwing this up to them?
To get a good idea of how your page would look without
graphics, take a look at it with a screen reader like the
one at Delorie.com:
http://www.delorie.com/web/lynxview.html
Just type in
your page address and it will convert your page to text.
You can also see how a screen reader would read your page.
Symbols are also read by screen readers; for example, "-" is
"dash," "#" is "pound sign," "/" is "forward slash," and so
on.
Back to the top
W3C
Recommendation for ALT tags
13.8 How to
specify alternate text
Attribute definitions
-
alt
=
text
[CS]
- For user
agents that cannot display images, forms, or
applets, this attribute specifies alternate text.
The language of the alternate text is specified by
the
lang
attribute.
Several non-textual
elements (IMG,
AREA,
APPLET,
and
INPUT)
let authors specify alternate text to serve as content when
the element cannot be rendered normally. Specifying
alternate text assists users without graphic display
terminals, users whose browsers don't support forms,
visually impaired users, those who use speech synthesizers,
those who have configured their graphical user agents not to
display images, etc.
The
alt
attribute must be specified for the
IMG
and
AREA
elements. It is optional for the
INPUT
and
APPLET
elements.
While alternate text may be
very helpful, it must be handled with care. Authors
should observe the following guidelines:
- Do not specify
irrelevant alternate text when including images intended
to format a page, for instance,
alt="red ball"
would be inappropriate for an image that adds a red ball
for decorating a heading or paragraph. In such
cases, the alternate text should be the empty string
(""). Authors are in any case advised to avoid
using images to format pages; style sheets should be
used instead.
- Do not specify
meaningless alternate text (e.g., "dummy text").
Not only will this frustrate users, it will slow down
user agents that must convert text to speech or braille
output.
(The above
section of text used by permission. Copyright �
1997-1999 World Wide Web
Consortium, (Massachusetts
Institute of Technology,
European Research Consortium for Informatics and Mathematics,
Keio University).
All Rights Reserved.
http://www.w3.org/TR/html4/struct/objects.html#h-13.8)
Back to the top
About
The Author
Bernie
Howe made his first
Web page in 1998, and has been involved with accessibility
and Web standards since then. He is owner/designer of
Keepsake Awards.
Professionally, Bernie has been in the construction trade
since 1969, and is a project engineer/CAD manager for a
construction firm that does maintenance for the high-tech
industry.
Bernie has
been married since 1966, and has 2 children and 3
grandchildren. He is also a cancer survivor, (he was
diagnosed with prostate cancer in 1999). He lives in the Sonoran
Desert of Arizona.
|