Step 23: Providing text equivalents for images
This is the most important part of the series:
Every single image on every single page of your website should have a text equivalent, called alt text (short for alternative) specified in the
alt attribute of the
Screen readers read it, text-only browsers display it, Google indexes it and visual browsers can display it as a tooltip or on the status line (although you as the designer can override this). We've already seen how to specify empty alt text for spacer images, and several ways to create accessible lists with image bullets. What's left?
- Permalink icons
- "Powered by" icons
- Mail-to icons
- XML icons
- Small graphics floated within your item posts
- Any other images you've added to your template
They all need appropriate
- Jackie benefits. JAWS reads the alt text. Without valid alt text, Jackie hears the filename instead, which sounds horrible.
- Marcus benefits. Lynx, as a text-only browser, doesn't display any images, only alt text. Without alt text, Lynx displays the filename, which looks as bad as JAWS sounds.
- Michael benefits. Links, as a text-only browser, doesn't display any images, only alt text. Without alt text, Links does not display anything for an image (unless the image is a link, in which case Links simply displays "[IMG]"). When browsing with Opera with images turned off, Michael sees the alt text in place of the image.
- Lillian benefits. Internet Explorer displays the
alttext as a tooltip (although you as a designer can suppress this).
- Google benefits. The Googlebot indexes
alttext, which is used not only in matching keywords in normal searches, but also in image searches. (How did you think that worked?)
How to do it
You could also add
title="" to suppress tooltips in visual browsers.
Of course, regardless of your publishing tool, if you've added your own images to your template, or if you have small graphics floated in your item posts, they each need appropriate alt text. Since I learn best by example, here are some examples. More general principles and examples are listed in the "further reading" section.
Examples of bad alt text
- Any HTML markup.
alttext can only contain plain text and entities, no tags.
alt="filename.jpg"doesn't get us anywhere. What is the graphic's function? We don't care what it's called.
alt="alt text"is sometimes inserted by HTML editors as a reminder, and left there.
alt="Click here!"serves no useful purpose (unless of course it's on a graphic that says "Click here!").
alt="Turn images on!"This is like being asked by a blind person what time the clock says, and responding, "Just open your eyes!" Images may be off for a reason (Michael's low bandwidth), they may be unavailable (Marcus's text-only browser), or they may not even be off at all (Jackie's screen reader, which displays images but reads alt text aloud).
Examples of good alt text
- Jonathon Delacour has a graphic in his page banner of a Chinese symbol.
alt="Site logo: xin, the Chinese character for heart"
- A List Apart has a large logotype spanning the full width of the page. On sub-pages, the logotype is partially obscured. Throughout the website they use consistent
alt="A List Apart".
- Using ALT attributes on IMG elements
- Mini FAQ about the alternate text of images
- WebAIM How to Create Accessible Graphics.
- On accessible advertising
- What is meant by a text equivalent?