Label Your Images

This tip has moved to its new home:

When many people think of blogs, they think of writing. Yet even blogs that aren't photoblogs often use images. These may be photographs posted in a blog entry, decorative images used in the template, or a banner image at the top of a blog. Images add visual sparkle to blogs.

However, imagine the following scenario. You're reading a blog post that starts with the words "You'll never believe what the lady next door did yesterday. I almost died." And then... silence. There's no end to the story. Or it starts out "Here is the most important research finding from our survey." Then nothing. How long would you stick around at a blog where you never find out what the blogger is saying?

This can be the effect for your visitors who can't see images - if you don't take a second or two to provide some extra information. Luckily, once you get the basic concept and know how to do it, adding that extra information is quick and easy. It may not look like it from the length of this post, but it's true.

So what do we do?

If you're using an image to tell a story or replace text, add a text label to let the visitor know what you're saying with the image. If you're using an image that's purely decorative, like a fancy list bullet, you need to add a blank label so it doesn't get in the way. The label is called an "alt attribute." If it has text, it's called "alt text." If it's a blank label, I'm going to call it a "blank alt attribute."

Why should I do this?

Blind users and users with low vision may be using screen reader software that reads your content to them. The screen reader can't look at an image and describe it to the user, so it relies on the label you supply. Without a label of any kind, at best, the user will hear nothing where the image should be. At worst, the screen reader user will hear the filename of the image, something like "img_20070916.jpg" or a web address if the image is a link. Yuck. Extra yuck if that's what the user hears for the images on the page that are just used to make it pretty.

Some users may choose to use a text-only browser or visit web sites with images turned off. This may be the way they browse due to a disability-related reason, or they may just have super-slow internet connections that make it too painful to wait for images to download. When images have alt text, these folks benefit because can see that instead of the image.

There are other benefits. Google can't see pictures, but it can see alt text. This might not matter if you're just using images to spice up your posts, but if you're featuring images of a product you're reviewing or a person you're writing about, you might want the extra traffic that properly tagged images can generate. Including alternate text for non-text content is also a draft best practice for the mobile web.

OK, I'm sold. How do I do this?

The label, which is called an alt attribute, is a part of the HTML code for your image. Depending on your blogging tool, you may need to add it in or just change the default code that is already created when you add an image. If you haven't ever looked behind the scenes at your blog's HTML code, don't get scared. Here's an example:


<img src="http://blogher.org/system/files?file=images/120x60going07_0.gif" alt="BlogHer '07 I'm
Going" />

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

How do I do this when I use an image in a post?

Here are instructions for editing the alt attribute for images placed in blog posts. You may not have the energy or time to go back and do this for your past posts, especially if your blog has been around for a while, but you can do it going forward.

If you're using Movable Type, 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. If you've installed the Better File Uploader plugin (which is awesome, by the way), you can configure it to ask for alt text during the upload process.
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, so find that and 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 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 automatically. 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, when you add an image to a post, there is a field called image description. Whatever you include there will show up as the alt text. If you don't include anything, an alt attribute will not be added, and that's no good. So if you want a blank alt attribute, just press the space bar once in the image description field. This will generate a blank alt attribute.
WordPress.com works the same as self-hosted WordPress.
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, so that's fine too.
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 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 already added to your photos, you can edit the field by going to your photos collection and clicking on the photo, then clicking Edit. If you don't add a title, 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 about all the images that aren't in my posts?

If you're using blogging software that allows you to edit your template, you also may want to check any images that are part of your template, since those show up on multiple pages of your blog. This may include your banner, a separator between posts, or images such as badges or logos that you pasted into the sidebar.

A quick way to check for these is to go to your home page and view the source code for your page.

Using IE, Firefox, Opera, or Safari, choose View from the browser menu and then choose Source or Page Source. Now you can see the code that makes up your blog's page. (This will probably make you even more grateful for your blog software than you were before, since it wrote all that code for you.) Search for the "word" <img. Any time you find one of those, you've found an image that needs an alt attribute. If it already has one, great! If not, write down what code surrounds the image so you can find it again when you are editing your template.

If the image(s) you found are automatically generated by a widget, plugin, or advertisement, you may not have any control over whether the people who built it included alt attributes. In that case, the best you can do is to make sure that there is text right above the image that states what it is, such as "Flickr Album" or "Amazon Wishlist."

Your blog's banner or other decorative elements that are part of your theme or style may not show up in your search. This is probably because they are background images. These are already silent, so you don't have to worry about them.

Once you have your list of images that need attention, here are some general guidelines for editing your template. What you need to do depends in part on what you found in your search. In general, I'm assuming that if you added an image to their template or sidebar, you generally know how to find it again in order to edit it. If that's not the case, leave a comment and I'll try to be more specific.

(p.s. Make a backup copy of your template first, even though editing alt attributes should be an insignificant change.)

If you're using Movable Type, you need to find the image and edit its alt attribute wherever it appears in your templates (or widgets if you're using Widget Manager).
If you have a basic TypePad account, you don't have any control over your template directly. However, you may be using a TypeList to display an image in your sidebar. If you add an image in this way, edit the code to include the alt attribute. (The instructions included in the TypePad help files under "Displaying Images and Code In Your Sidebar" do not include the alt attribute.)
If you have a TypePad Pro account and you have converted your templates to Advanced Template Sets, this may be where the image information is stored.
In Blogger Beta, you have two possibilities. You can edit your template by going to the Template tab, then clicking Edit HTML. You may also have added an image using the Page Elements screen under the Template Tab. If you add a photo, whatever you enter as the Title is used as the alt text. If you don't add a title, it generates a blank alt attribute.
In self-hosted WordPress, if you have customized your blog to include non-background images in a sidebar or elsewhere, you'll need to go back to the template area where you added those images in order to add alt attributes. This may vary by the theme you're using. The files will be listed in the administrative interface under Presentation > Theme Editor. You can use this to look through your templates to find the image(s). If you've made those files writeable, youmay be able to make changes directly in the administrative interface.
In WordPress.com, you don't have template editing privileges. The images used in themes and your custom image banner (if you've added one) are stored as background images, so they don't need alt attributes.
In basic LiveJournal, users can only add images to their posts, comments, and profile, so those can be given alt attributes as you go along. If you have customized your journal to include images in a sidebar or elsewhere, you'll need to go back to the area where you added those images in order to add alt attributes.
In Vox, it's similar to LiveJournal. Any images you use end up in your Photos list, where you can edit their titles.

How do I decide what to put in the alt attribute?

Since there are a lot of different ways you might use images on your blog, here are a few guidelines for deciding what to include in the alt attribute. Overall, keep in mind that if you're going to use alt text, you usually don't have to include words like image, photo, or picture.

If an image is being used to replace text, it needs alt text. If it's a photograph of a sign, or a logo, use text. You might have headers in your sidebar that are images instead of text, those need alt attributes that match (unless they're background images). Check your spelling, since screen readers will misread a word that is misspelled. Try to put the most important words first. People who use screen readers like to skip around just like anyone else, and if the first few syllables are key, they can decide whether to listen to the rest or not. "BlogHer I'm going" in the example above may sound a little funny, but it puts the name of the conference first.

If an image is being used to tell the reader part of a story, try for a short alt text that at least captures the basic point:

My daughter with new puppy.
Playstation 3 console.
Survey shows women are taller than men.

If what the image conveys is a little more complicated, consider using a blank alt attribute and describing the image in text above or below it. Things that crack me up #21 is a blog post that uses this strategy to great effect. Don't click to the post yet - first read what a visitor would get if they couldn't see the image:

It's just so mysterious.

Restroom signage somewhere in Orleans, France.

From Flickr by bananeman

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.

Visitors to this blog post can get the joke, whether or not they can see the image. Level of Anxiety During the Week is a blog post that could have used this strategy, since the graph it includes is described fully in the text that follows it.

If an image is being used for purely decorative purposes, you can leave the alt text empty. How do you decide what's a decorative image? There's really no hard and fast rule. If you're running a photoblog or posting a photo gallery, people who can't see images or don't turn them on while browsing are probably not your target audience. Just make sure your page says it’s a photo gallery or photoblog so these visitors know what’s there.

Be cautious before deciding something is purely decorative if it conveys emotion:

A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor [...]

A few carefully chosen words of alt text, or a few remarks about what the image is and why you like it, can bring people into the conversation even if they can't see the image.

If an image is a link to something (other than a bigger version of itself, such as if it's on Flickr), 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. For example, if your blog has a banner at the top that is a link to the Home page of your blog, the alt text should probably be "Home Page" or something similar.

What if I don't want to?

The accessibility police will come and shut down your blog. Just kidding. There are no accessibility police, unless your site is under a legal requirement to be accessible because it's part of a government website. Even then, I don't think there are police.

It's your blog, so it's your choice. Even if you don't do this, you can still do other things to make your blog more accessible. The lack of appropriate alt attributes is one of the biggest pains in the backside on the web, so it's a big deal, but it's still up to you.

Are all the tips going to be this hard?

No. Honestly, I probably could have started with something easier. Next week it will be super simple, I promise.

Questions? Feedback?

Please comment or send me an email. If you disagree or if I need to correct a mistake, or if there's a way I can improve this article, I'd like to know.

Further Reading

Want another take on all this? Try these sources:

Credit Where Credit is Due

The following sources were also used while I was learning about this topic, and I thank them all:

Categories:

Leave a comment

Advertisements

Recent Entries

Categories

Search