Day 23: Providing text equivalents for images

This is the most important day of the series, so pay attention:

Every single image on every single page of your site should have a text equivalent, so-called "alt text", 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?

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 alt text as a tooltip (although you as a designer can suppress this).
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

The default Movable Type template doesn't include any <img> tags. If you are using a graphical "Powered by Movable Type" image, you should make sure the <img> tag includes the attribute alt="Powered by Movable Type".

The default Greymatter template includes only one image, generated by the {{gmicon}} template variable. This generates an <img> tag which includes appropriate alt text, "Powered by Greymatter".

Radio auto-generates appropriate alt text for the following standard icons:

XML coffee mug: alt="Subscribe to <site name> in Radio UserLand."
XML icon: alt="Click to see the XML version of this web page."
Mailto icon: alt="Click here to send an email to the editor of this weblog."

However, Radio users will need to manually specify alt text for customized images. Go to Prefs, then Customized Images (under Templates), and add these alt attributes:

Day-level permalink: alt="Permanent link: <%longDate%>".
Item-level permalink: alt="Permanent link".
Source link icon: alt="source".
Enclosure link icon: alt="enclosure".

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". This doesn't get us anywhere. What is the graphic's function? We don't care what it's called.
alt="alt text". Inserted by some HTML editors as a reminder, and left there by clueless designers.
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).
More examples of bad alt text.

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".
Leslie Harpold has a graphical page banner that includes the site name, "The Historical Present", and a tagline, "Hypermodernism has a posse". alt="the historical present: hypermodernism has a posse".
Simon Willison has a "W3C XHTML 1.0" sticker. alt="Valid XHTML 1.0!"
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.
Dean Allen has a graphic in his page banner that includes the name of the site and a tagline. His alt text is on the long side and includes a different tagline (a bit confusing), but Dean is cool enough to get away with it. alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie". Note: you are probably not cool enough to get away with this. Keep it simple.

Dive Into Accessibility