[UACCESS-L] BlindNews: Writing effective ALT text for images, by Trenton Moss(fwd)

[Jennison Asuncion <asuncion@alcor.concordia.ca>]

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 <BlindNews@GeoffAndWen.com>
To: Blind News Mailing List <BlindNews@blindprogramming.com>
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: BlindNews@blindprogramming.com

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