Thursday, September 10, 2009

Tutorial: Alternate Text

What is the difference between these two pictures? Take a good long look.

my kids posing for the camera in the kitchen

Give up?

The top photo shows two silly goombas posing for the camera in my black-and-yellow kitchen. The bottom picture shows the same thing. But to a person using a screen reader to read my blog the first photo might either be skipped entirely or say something like "photo number eleven-seventeen" whereas the bottom photo would say succinctly "my kids posing for the camera in the the kitchen". Why would it say that? Because I told it to using an alternate text tag when I wrote my post.

Having used screen readers on and off for years when my eyes get tired I can't tell you how aggravating it is to have the thing rattle off the number of the photo because that is all the information it has about a picture. It makes me wonder what the picture is about, how important it is to the story and why it was posted. Frustration immediately rises because a vital piece of the puzzle is completely missing. Of course, I have the luxury of going back later and looking at the photos, but a person who is blind, for instance, relies entirely on alternate text to understand what the photo in a post or article might be showing. It takes a mere ten seconds to type a quick description of a photo and ensure that someone using a screen reader can enjoy your blog because they know what the photos show.

Here's how to do it:

If you load the photos directly into blogger, type the description of your picture here between the quotation marks. It looks like this: alt="my kids posing for the camera in the kitchen"

screenshot of blogger editor with the alternate text tag circled in red

If you use photos uploaded to a different source, you can add it to your image source code like this:

screenshot of blogger editor showing html with alternate text added to an image

That's it!

It's such an easy little thing and most people don't know about it, let alone take the time to do it.

Hubby works for the University of Idaho and he told me the web programmers there recently held an "Alt Tagging Party" to ensure that every image on the immense UI website has an alt tag so it's more accessible to people using screen readers. Previously, about 80% of the 5,000 or so images on the site had been tagged, which is significantly better than a lot of sites. Still, I wanted to throw a celebration! It shows that the word is getting out there regarding web accessibility.


  1. I always try to add alt tags to my images having read it's good for SEO - I'd never considered it in terms of web accessibility before. COOL.

  2. Good to know! Thanks for educating us!

  3. I hadn't heard about alt tags before. Thank you so much for the tutorial!

  4. cool..who knew? Certainly not me!

    Thanks for the great tip!