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.
- 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:
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!
7 thoughts on “It’s ALT Good: Alternative Text & Accessibility”
This is a very good post about Alternative Text. I am curios though, how would one go about integrating a transcript of an audio file which is playable from an embedded player?
Great question. In this post, I focus on the “alt” attribute of image tags, but “alternative text” can come in other forms. With videos, they might have closed captions. On images, a caption immediately following the image is a valid way to provide alternative text. For an audio file with an embedded player, providing a text transcript is the best way to allow access to it for those who can’t hear it for technical or physical reasons. (And as a bonus, this means search engines have the ability to index the transcript.)
If you found this post helpful, make sure to check out the Alt Text Decision Tree: https://mrwweb.com/alt-text-decision-tree/
Interesting! So would providing a download link to the text transcript version of an audio file with an embedded player meet ADA accessibility guidelines? Instead of displaying such text on the same page as the embedded player?
I think you could store the transcript on a different web page linked to from immediately after the audio player but I’m less sure about a downloadable file. (If you do use a downloadable file, you’ll need to make sure that that file is accessible!)
And as an extra accessibility reminder, make sure that the audio player is accessible to keyboard navigation.
Good advice. Thanks so much for all that you do Mark! Also, the Alt Text Decision Tree is a wonderful guide.
will it hurt my seo to add alt text that has underscores_like_this ? I have been copy and pasting from the image name into my alt text field. do I NEED to write each word out with a space?
Good question, Rebecca.
First, remember that alt text is also used by screen readers. For those users, I believe that alt text will be read as “word underscore word underscore word.” Removing those spaces then will greatly improve their experience on your site.
Additionally, copying and pasting probably doesn’t assure that the alt attribute will actually contain appropriate alt text. Check out this alt text decision tree to make sure you’re writing good alt text.
As for SEO, at least Google has historically treated underscores as a unique character while dashes/hyphens were more like spaces. (The story I’ve heard is that they wanted to allow people to search for code which commonly includes underscores.)
So I’m not sure about the SEO impact (search engines are pretty smart these days), but it seems that for both accessibility and SEO, you’re best to remove them.