Title:

Writing Effective ALT Text For Images

Word Count:
946

Summary:
Simply inserting ALT text isn't necessarily enough to ensure accessible images -
the text must also be effectively written. Find out how to achieve this...

Keywords:
usability, accessibility, web usability, web credibility, web accessibility, css,
website, accessible web design

Article Body:
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:

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.