An old but excellent article can be found at:
http://www.htmlhelp.org/feature/art3.htm
--
Johnnie Apple Seed
----- Original Message -----
From: "Jennison Asuncion" <[log in to unmask]>
To: <[log in to unmask]>; <[log in to unmask]>;
<[log in to unmask]>
Sent: Tuesday, April 05, 2005 5:02 AM
Subject: BlindNews: Writing effective ALT text for images, by Trenton Moss
(fwd)


Hello,

I thought some here might find this article (from the BlindNews e-mail
list) of interest.

Jennison

---------- Forwarded message ----------
Date: Tue, 05 Apr 2005 03:39:17 -0500
From: Leon Gilbert <[log in to unmask]>
To: Blind News Mailing List <[log in to unmask]>
Subject: BlindNews: Writing effective ALT text for images, by Trenton Moss

W3reports.com
Tuesday, April 05, 2005

Writing effective ALT text for images, by Trenton Moss

Anyone who knows anything about web accessibility knows that images need
alternative, or ALT, text assigned to them. This is because screen readers
can't understand images, but rather read aloud the alternative text assigned
to them. In Internet Explorer we can see this ALT text, simply by mousing
over the image and looking at the yellow tooltip that appears. Other
browsers (correctly) don't do this. The HTML for inserting ALT text is:

img src="filename.gif" alt="Alternative description goes here"

But surely there can't be a skill to writing ALT text for images? You just
pop a description in there and you're good to go, right? Well, kind of.
Sure, it's not rocket science, but there are a few guidelines you need to
follow...

Spacer images and missing ALT text

Spacer images should always be assigned null ALT text, or alt="" . This way
most screen readers will completely ignore the image and won't even announce
its presence. Spacer images are invisible images that pretty most websites
use. The purpose of them is, as the name suggests, to create space on the
page. Sometimes it's not possible to create the visual display you need, so
you can stick an image in (specifying its height and width) and volià, you
have the extra space you need.

Not everyone uses this null ALT text for spacer images. Some websites stick
in alt="spacer image". Imagine how annoying this can be for a screen reader
user, especially when you have ten of them in a row. A screen reader would
say, "Image, spacer image" ten times in a row (screen readers usually say
the word, "Image", before reading out its ALT text) - now that isn't
helpful!

Other web developers simply leave out the ALT attribute for spacer images
(and perhaps other images). In this case, most screen readers will read out
the filename, which could be 'newsite/images/onepixelspacer.gif'. A screen
reader would announce this image as "Image, newsite slash images slash one
pixel spacer dot gif". Imagine what this would sound like if there were ten
of these in a row!

Bullets and icons

Bullets and icons should be treated in much the same way as spacer images,
so should be assigned null alternative text, or alt="". Think about a list
of items with a fancy bullet proceeding each item. If the ALT text, 'Bullet'
is assigned to each image then, "Image, bullet" will be read aloud by screen
readers before each list item, making it take that bit longer to work
through the list.

Icons, usually used to complement links, should also be assigned alt="".
Many websites, which place the icon next to the link text, use the link text
as the ALT text of the icon. Screen readers would first announce this ALT
text, and then the link text, so would then say the link twice, which
obviously isn't necessary.

(Ideally, bullets and icons should be called up as background images through
the CSS document - this would remove them from the HTML document completely
and therefore remove the need for any ALT description.)

Decorative images

Decorative images too should be assigned null alternative text, or alt="".
If an image is pure eye candy then there's no need for a screen reader user
to even know it's there and being informed of its presence simply adds to
the noise pollution.

Conversely, you could argue that the images on your site create a brand
identity and by hiding them from screen reader users you're denying this
group of users the same experience. Accessibility experts tend to favour the
former argument, but there certainly is a valid case for the latter too.

Navigation & text embedded within images

Navigation menus that require fancy text have no choice but to embed the
text within an image. In this situation, the ALT text shouldn't be used to
expand on the image. Under no circumstances should the ALT text say, 'Read
all about our fantastic services, designed to help you in everything you
do'. If the menu item says, 'Services' then the ALT text should also say
'Services'. ALT text should always describe the content of the image and
should repeat the text word-for-word. If you want to expand on the
navigation, such as in this example, you can use the title attribute.

The same applies for any other text embedded within an image. The ALT text
should simply repeat, word-for-word, the text contained within that image.

(Unless the font being used is especially unique it's often unnecessary to
embed text within images - advanced navigation and background effects can
now be achieved with CSS.)

Company logo

Websites tend to vary in how they apply ALT text to logos. Some say,
'Company name', others 'Company name logo', and other describe the function
of the image (usually a link back to the homepage), 'Back to home'.
Remember, ALT text should always describe the content of the image so the
first example, alt="Company name", is probably the best. If the logo is a
link back to the homepage then this can be effectively communicated through
the title tag.

Conclusion

Writing effective ALT text isn't too difficult. If it's a decorative image
then null alternative text, or alt="" should usually be used - never, ever
omit the ALT attribute. If the image contains text then the ALT text should
simply repeat this text, word-for-word. Remember, ALT text should describe
the content of the image and nothing more.

Do also be sure also to keep ALT text as short and succinct as possible.
Listening to a web page with a screen reader takes a lot longer than
traditional methods, so don't make the surfing experience painful for screen
reader users with bloated and unnecessary ALT text.

This article was written by Trenton Moss, founder of Webcredible, a web
usability and accessibility consultancy. He's extremely good at usability
testing and running CSS training courses.

http://www.w3reports.com/?itemid=846




--
BlindNews mailing list

Archived at: http://GeoffAndWen.com/blind/
Address message to list by sending mail to: [log in to unmask]

Access your subscription info at:
http://blindprogramming.com/mailman/listinfo/blindnews_blindprogramming.com


---------------------------------------------------------------------
To unsubscribe, e-mail: [log in to unmask]
For additional commands, e-mail: [log in to unmask]