Alternative text for images

What is an alternative text, or alt text for short, you might ask? It is a short, concise written description of an image used in HTML. The point of the alt text is to convey what is in the image when it can't be viewed. So this content is used by screen readers, but also if the image is broken for some reason, the alt text is shown in the place of the image.

Well-written alt text is very important for accessibility, but good alt texts also improve search engine optimization (SEO).

HTML Structure

Images must always have an alt attribute in the HTML. But for decorative images (the images that don't bring any value to the page content) should have an empty alt attribute because that way screen readers can skip that image. Try to imagine listening to some page content. Let's say for something like a recipe. First, you will hear the ingredients and maybe some instructions, and then suddenly in the middle of it you hear 'image, a beautiful sunset at the cabin'. And then the recipe instructions continue. What was the value of that image for a screen reader user? Nothing. So when the image is just to create some visual feel to the page, leave the alt text empty.

And please note that an empty/null alt attribute is not the same thing as a missing alt attribute. If the attribute is missing completely, the image will fail WCAG criterion 1.1.1. Also, when the alt attribute is missing, screen readers will read the image name, which can often be a quite horrible experience. Having an alt text in a decorative image is, at least in my opinion, better than having a missing alt attribute. Because unnecessary 'image, a beautiful sunset at the cabin' is much better than 'image, 0349fsdjfdhd.jpg'. Also, do also name your files more descriptively. First of all, you can recognize the images easier, and second, good image names can also improve your SEO. I have added an example about this on my accessibility info site, you can test the examples on my alt attribute demo page with a screen reader.

If the image is purely decorative, you can also add it with CSS as a background image if you don't want to worry about having the alt attribute present. But it's really important to remember that if you do this for any image that is conveying any sort of relevant information, you will fail the 1.1.1 criterion.

What is a good alt text?

The alt text should describe the image, not the page it is on, but the alt text of an image can vary depending on the context. The main point is that you should be able to know what is in the image by reading the alt text.

Avoid adding the words "Image of" or "Picture of". The screen readers will already tell the user that this is an image.

Some SEO experts might tell you to add a bunch of keywords into the alt text. Don't do this, it even has a name - keyword stuffing. Search engines can understand if you do this and they will punish you for it. You can, of course, use a good keyword if it fits the image description. It's even recommended.

You shouldn't add photographer info to the alt text, use the visible image caption for that information.

The alt text should only be a sentence or two, often only a few words are enough. Keep the alt text short, the recommendation is under 125 characters. If you need a much longer description, add it on the page instead and leave the image alt text empty. Also, if you have the same info on the page that you would add as the alt text, leave the alt text empty in that case. It will be an unpleasant and confusing experience for the screen reader users if they get the same info twice.

Now, what does the WCAG criterion 1.1.1 say?

I've only been talking about images here, but the criterion actually covers all non-text content. So make sure you take care of all of your non-text content. The criterion might sound like a lot of work, but when you start to think about the value your media brings to the page and how you can get that information available to everyone, writing good alt texts becomes much easier with a little bit of routine.

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

• Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
• Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
• Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
• Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
• CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
• Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

WCAG 1.1.1

There is also a lot of good content on the internet about writing good alt texts, so if you are unsure, I recommend checking out some site that has examples, like the Harward University's page on writing good alt text to describe images. They even provide you alt text examples with context.