Alt text - doing it right

12 November 2013

I’m of the opinion that there will never be enough articles about doing alt text correctly. I’m of that opinion because I see it done wrong so very much.

That’s because there’s some rather damaging myths about how you do alt text. Let’s knock some of those down now.

You cannot automatically generate alt text

I’ve been asked to review databases and scripts that offer images with automatically generated alt text. It seems like a real time saver! Just pick a picture, and the database or script grabs some text (sometimes from a human, sometimes a best guess with some natural language processing), and viola! Instant compliance.

Sure. Okay. Hey, I know, why don’t you let me write a script that will just automatically insert images into your website based a few search terms. No way that can go wrong, right? Except you know that it will go wrong. You’ve done image searches on Tumblr. You know how wrong the internet gets.

Don’t believe me? I searched for duck on Tumblr. I got this. That was one of the milder items. And from what I’ve seen, Tumblr results are starting to take over much of Google image search results.

Alt text is content. You shouldn’t automatically generate it. It has too much context to give use generic text. You’re going to have to give it some text that anchors it within the content of the page. Otherwise, why have it?

No, it’s not the title text

Title text and alt text are different. Title text shows up when you mouse over an image. Think webcomics. It’s the bit that pops up with the secret joke that means we have to go over the entire backlog and read all the alt text because we god-forbid we miss out on a joke on the Internet.

Alt text is read out by screen readers. They shouldn’t mirror each other, because why would you want to describe the image to a sighted person? And the title text probably won’t be descriptive enough for someone using a screen reader. If it was, well, that would just be weird. A sighted person mouses over the image and gets a description of what’s in the image? That makes no sense.

Not everything needs alt text

If someone glances over how to make an image accessible, they’ll often get stuck on the requirement that images have alt text. Not every image needs an alt text. You have to think about what images are bringing content to the user, and which are there for decoration or design.

For example, if you need a spacer gif for some reason (do people still use those? Are my design friends snickering at me?), it doesn’t need alt text. If you have decorative bullets or dividers, they don’t need alt text. If you just put up a cute picture of a dog because you thought your page could use something eye catching above the fold, it probably doesn’t need alt text.

Every time you add alt text to an image, think about whether you’re adding to a user’s experience, or detracting from it. If you were reading this page aloud, would you take thirty seconds to describe the puppy clip art you found through a Google image search? Or would you ignore it and move to the content?

Not every word has to be echoed

Another thing people tend to over-alt is images with words in them. You don’t always have to echo every word. Before you transcribe each word in a book title, check to make sure you haven’t echoed that text in your content. If a screen reader hits this image, is the user just going to have to listen to the same content twice?

Now, if the text isn’t echoed close to the image, go to town. Alt away. But ask yourself why the heck you’re putting text in a freaking image. It’s 2013. Get with it! Webfont that text!

Stop it with the verbal diarrhea

The amount of text should echo the amount of content you’re trying to convey to the user. If you’re just showing off an image of the damage to the tail of a 747, just describe the damage. Do not describe the weather conditions, the color of the paint on the undamaged part of the plane, or that cute dog in the background.

I mean, props for trying. I’d rather see too much alt text than not enough. But seriously, you don’t need to paint a picture with words. You just need to get the point across.

No, you can’t just use ‘image’ as the alt tag. Smart-ass.

Why do I still see this? Dear people who do this: You are all horrible.


Related tags: accessibility

Comments are closed.

Comments have been closed for this post.