Label Your Images

It almost seems contradictory, doesn't it? Text labels for images?

Here's the deal. People with blindness or low vision may be using software that reads your page to them. The screen reader can't look at an image and describe it, so it relies on the label you supply.

Without a label of any kind, at best, your visitor will hear nothing where the image should be. At worst, without a text label, their software will read the filename of the image, something like "img_20070916.jpg" or a web address if the image is linked to something else. Yuck.

Google can't see pictures either, but it can see the text labels. This might not matter if you're just using images to make your posts look pretty. However, if you're featuring images of a product you're reviewing, or your images reinforce the topic of your posts, you might want the extra traffic that properly labeled images can generate. Including alternate text for non-text content is also a draft best practice for the mobile web.

What Labels Look Like

The label, which is called an alt attribute, is a part of the HTML code for your image. The text that goes in it is called alt text. (Or if you're using an image that's purely decorative, you can add a blank label so it doesn't get in the way. If it's a blank label, it's called a blank alt attribute.)

Before we focus in on how to make your specific blogging software do this, it's helpful to see an example:

The text in between the quotation marks, after the alt= part, is what a screen reader will use. If it's words, like "BlogHer '07 I'm going" in this example, it will read those words. If it's a blank space, it will do nothing, which is good for images that are just there for decoration. You may see more items inside the brackets than you see in this example, such as height and width or border, and that's fine. The alt attribute just needs to be included somewhere.

How To Add Labels, a.k.a. Alt Text

Here are instructions for editing the alt attribute for images in various types of blogging software:

In Blogger Beta, upload your image into your post as you normally would. If you don't need alt text for this image, you're done, because Blogger adds a blank alt attribute by default. If you want to add text, switch to the Edit HTML tab. Find the alt attribute and fill in your text between the quotes. You can then switch back to the Compose Post tab and finish writing your post.

In self-hosted WordPress 2.5, and on WordPress.com, when you add an image to a post, there is a field called image description. It has a helpful note under it that says "alternate text." Whatever you include there will show up as the alt text. If you don't include anything, an alt attribute will not be added. So if you want a blank alt attribute, you have to press the space bar once in the image description field.
NOTE: Older and alternate versions of WordPress, such as WordPress MU, may instead use the information included in the Title field during upload. They may also use the image's filename as the alt text by default if you don't include anything. When in doubt, check the code in the Code tab.

In TypePad, upload your image into your post as you normally would. Then switch into the Edit HTML tab. The alt attribute will be there already, filled in with the photo's filename. Replace it with your alt attribute (text or blank). You can then switch back to the Compose Post tab and finish writing your post.

In Movable Type 3.x, there isn't a prompt in the default File Upload process for the alt attribute. Edit it once the image is placed in your post. In Movable Type 4.x, using the asset manager, whatever you include in the Name field becomes the alt text. Leaving the Name field blank produces a blank alt attribute, but then the asset manager uses the filename as the asset's name. If this doesn't work for you, you can give it a name during upload and then remove that text from the alt attribute once you're done.
NOTE: If you've installed the Better File Uploader plugin (which is awesome), you can configure it to ask for alt text during the upload process. It will still fill in the image's filename by default, but you can replace it or press space for a blank alt attribute.

In LiveJournal, when you add an image to a post, there is a field called Short Description or Alternative Text. Whatever you include there will show up as the alt text. If you leave it blank, a blank alt attribute is generated.

In Vox, whatever you use for the title of the image (the first field you see when you're editing the image under Photos) will be used as the alt text. If you're adding the image to your Vox blog by uploading it from your computer or the web directly into your blog post, you can edit this field after uploading by holding your mouse over the image and then clicking on the little pencil that appears. If you're using a photo that you previously uploaded, first edit the title field by going to your photos collection and clicking on the photo, then clicking Edit. If you don't add a title before adding the image to your post, it will use the filename for the alt text. As far as I can tell, there is no way to generate a blank alt attribute.

What to put in the alt attribute

Since there are a lot of different ways you might use images in your blog posts, here are a few guidelines for deciding what to include in the alt attribute:

• If an image is being used for purely decorative purposes, you can leave the alt text blank.
• If an image is being used to replace text, it needs alt text that says the same thing or as close to it as possible.
• If an image is being used to tell the reader part of a story, try for short alt text that captures the basic point.
• If an image is a link to something, then alt text should be included that tells what the image links to. You don't have to include the word link, because the screen reader will say it's a link.
• Try to put the most important words first. People who use screen readers like to skim web pages just like anyone else, and they appreciate it when the first few syllables get the point across.
• Check your spelling, since screen readers will misread a word that is misspelled.

If the image conveys something a little more complicated, and you're not sure how to use alt text, consider using a blank alt attribute and instead describe the image in text above or below the image.

Things that crack me up #21 is a post that uses this strategy to great effect. Here is what a visitor would get if they couldn't see the image:

It's just so mysterious.

Restroom signage somewhere in Orleans, France.

Visual description: It's a simple drawing of a woman in a manual wheelchair at right and a washroom sink at left. There's a giant green arrow leading from the sink and pointing to the woman. I suppose this is somehow meant to indicate the sink is accessible, but there are no accompanying words, and really, it looks like you're supposed to douse the woman with water or pry the fixture loose and whack her with it. Or something.

Readers can get the joke, whether or not they can see the image.

Final Thoughts

At the end of the day, the most important thing with labeling your images is to make the effort. Blank alt attributes are better than none, and even awkward alt text is better than being left out of the conversation.

Sources and Further Reading