Skip to main content

30 steps to a more accessible website

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 <img> tag.

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 alt text.

Who benefits?

  1. Jackie benefits. JAWS reads the alt text. Without valid alt text, Jackie hears the filename instead, which sounds horrible.
  2. 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.
  3. 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.
  4. Lillian benefits. Internet Explorer displays the alt text as a tooltip (although you as a designer can suppress this).
  5. Google benefits. The Googlebot indexes alt text, 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. alt text 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"
  • Jeffrey Zeldman has a navigation bar of text-as-graphics; on rollover, each graphic puts a little tagline in the status bar with Javascript. Of course, blind users will miss this, so Zeldman also puts the same text in the alt text of each graphic. Slick.
  • 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".

Further reading

« Step 22: Using real lists (or faking them properly) | Contents| Step 24: Providing text equivalents for image maps »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1