I’ve written about accessibility on the web before, but, somehow, I have yet to talk about alternative (or “alt”) text. If you have ever entered website content involving an image, then it’s vitally important that you understand alt text.

What is Alt Text?

Alt text represents an image in any situation where it can’t be seen or displayed.  To put it another way, this excellent WebAIM article, “Appropriate Use of Alternative Text”, states:

Alternative text provides a textual alternative to non-text content in web pages.

This includes:

• A person using a screen reader who can’t see the image.
• A search engine scanning a page’s content.
• An email client that has blocked the loading of images.
• A broken image.

The WebAIM article even goes further:

Adding alternative text for images is the first principle of web accessibility.

Alt text is usually made by adding an “alt” attribute to an image’s HTML tag like so:

https://gist.github.com/mrwweb/f6dfba11d9992c70ad9ec8ebd5fa449b

In most modern web programs, there is a field to add alt text to an image. You can see an example from WordPress at right.

There are only two contexts to leave the “Alt” field empty:

• When the information conveyed in the image is clearly communicated with text near the image (such as in a caption). ((Technically, the surrounding text then is “alternative text,” and you’re just omitting the HTML “alt” attribute which would be redundant if included.))
• When the image is purely decorative.

Examples of Alt Text

Though it’s easy to add alt text, it is deceptively challenging to write. I won’t cover every permutation of alt text, ((For a more-comprehensive overview of alt text, read the aforementioned WebAIM article. It’s very thorough.)) but I’ll give a few examples. The primary job of an alt text author is to consider the information that the image conveys to a sighted person and “translate” that into a clear and concise phrase or sentence.

An Image With Text

In most cases (use your judgement!) you can just use the text in the image:

A Simple Image

Pay attention to context. For my website, I’ve used a generic alt attribute, but if my website were about the scientific classification of insects, then I’d probably want to list the specific name of this insect (“Menot Knowhatitis”) and maybe even mention the type of leaf it’s on.

No Alt Text

Here, I omit the alt text because this image has no meaning on my site; it’s just a decorative blob. If it were an example of an art style or a Rorschach test it would need alt text.

Things to Avoid

Note that none of these contain redundant language like “An image of…” or “This picture shows…” A computer can see in the HTML (revisit the example above if you forget what that looks like) that the alt text represents an image. Repeating that is just clunky.

Non-Image Alternative Text

You may have noticed that the WebAIM definition mentions that alternative text applies to any “non-text content.” Video, audio, flash (*shudder*), and other visual or audio web technologies also require text alternatives. Alternative text in these cases might be closed-captioning on videos or a transcript of an audio file. These other uses make clear that alternative text assists people with other disAbilities (such as hearing-impairment).

Why Is Alt Text Important

Alt text is primarily important because, when missing, people with visual impairments can’t use the complete site. On sites with bad or missing alt text, people who rely on screen readers cannot learn, shop, or, yes, procrastinate. That’s not fair.

Recently, I attended Accessiblity Camp Seattle 2012 where I met many people making technology more accessible. It also gave me the chance to talk to some people with visual impairments who all mentioned that one of the primary reasons they couldn’t use certain websites was a lack of alt text. Not having it causes real problems for real people.

And, finally, if that’s not enough, all government websites and many websites tied to sources of federal funding are legally required to include alternative text on their site thanks to Section 508 of the Rehabilitation Act of 1973 ((If that date confuses you, the act was amended in 1998)).

As I’ve mentioned before, in most cases where you make a website more accessible to people with visual or hearing impairment, your site also benefits with search engines. This applies to all forms of alternative text including closed captioning on video and audio transcripts. Bing doesn’t know what your image shows, so you should tell it. If you do, then your search rankings may well improve.

ALT in a Days Work!

Along with headings, alt text is one of the easiest-to-implement accessibility features, and it doesn’t take that much time. If you build it into your workflow, then it takes almost no time. If you have skipped over it in the past, it will take a while to go back and enter it on each image, but it still won’t take long. And remember, for a little work, there’s a big payoff:

• Your website can reach more people.
• Your website communicates more effectively.
• Search engines understand your website better.

If you’re still confused about anything or think I got something wrong, head to the comments. If you’ve got some images without alt text, then get out of here and go make your site better!