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 “
alttext”, specified in thealtattribute 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?
They all need appropriate alt text.
alt text. Without valid alt text, Jackie hears the filename instead, which sounds horrible.alt text. Without alt text, Lynx displays the filename, which looks as bad as JAWS sounds.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.alt text as a tooltip (although you as a designer can suppress this).alt text, which is used not only in matching keywords in normal searches, but also in image searches. (How did you think that worked?)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”.
As of last Monday (thanks Jake), Radio auto-generates appropriate alt text for the following standard icons. If you aren’t seeing these, update Radio.root and republish your site.
alt="Subscribe to <site name> in Radio UserLand."alt="Click to see the XML version of this web page."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:
alt="Permanent link: <%longDate%>".alt="Permanent link".alt="source".alt="enclosure".You could also add title="" to suppress tooltips in visual browsers.
Of course, regardless of your weblog 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.
alt textalt 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).alt text.alt textalt="Site logo: xin, the Chinese character for heart".alt="the historical present: hypermodernism has a posse".alt="Valid XHTML 1.0!"alt text of each graphic. Slick.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.§
I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)
§
© 2001–present Mark Pilgrim