One of the most common accessibility issues is missing or unhelpful alt texts. Text Alternatives is the very first guideline of WCAG:

1.1 Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

The requirement is relevant for any non-text content, but for simplicity we’ll have a look at images. The text alternative is supplied to the image with the alt attribute:

<img src="product-image.jpg" alt="A v-neck college sweatshirt with large yellow dots on a red background." />

Decorative images need an empty alt text

Before even considering the text alternative, consider the image itself. Images should be meaningful in their context and provide additional information. If that is not the case, reconsider the use of the image. If you still prefer to use it, consider if it should be regarded as a decorative image. A decorative image is there purely for aesthetics, and assistive technologies such as screen readers can ignore it without the user losing any information. Note that a properly implemented decorative image still has an alt attribute, but it’s empty.

<img src="purely-decorative.jpg" alt />

If you don’t provide an empty alt attribute for the decorative image, screen readers will still announce that an image is present, which is just audible clutter if there is no text description.

Some cases when an image may be considered decorative:

• The image is used as a part of the page design, with a purely decorative purpose.
• The image is part of a link that also has text, and the text better describes the link purpose. Often the image is displayed with a descriptive text alternative on the page that is being linked to.
• The image is displayed with a sufficient text description next to it.

How to write helpful text alternatives

So, if you’ve ascertained that you have an image which conveys meaning, how do you write a usable alt text? A common problem is alt texts that provide absolutely no information that isn’t already present in text on the page. For instance, in a web shop where the product name is the heading, one will often see the product name as the alt text for the image.

Instead: think. What does the image tell you as a sighted user? If you are selling a sweatshirt and the model is called MARY-LOU, perhaps your heading is MARY-LOU SWEATSHIRT. This is already on the page, so there is no need to repeat it. Instead, describe what the sweatshirt looks like!

Some pointers on writing alt texts:

• Try to give the same information in text as a sighted user will get from looking at the image.
• In many cases, a neutral and precise description is preferred. Sometimes the image tries to convey a feeling, in which case the text should do so as well.
• Provide enough details, but be concise. Use max 150 characters, preferably less.
• Avoid writing “An image of”. Assistive technologies will tell the user they are at an image.
• Don’t repeat what’s already in the text of the page.
• For icons, in many cases it’s better to describe what the icon is meant to signal rather than what it looks like. For example, for an icon signaling an error “Error” is probably a better text alternative than “red exclamation mark”. If “Error” is shown in text, the icon can be considered decorative and have empty alt text or aria-hidden.
• Use proper language and punctuation.
• Also consider SEO. Use important keywords if applicable.

Note: Alternative texts are not only for the visually impaired. For example, if a technical issue prevents an image from being shown, the user will see the alt text instead.

Takeaway: Image tags should always have an alt attribute. Always! But it can be empty for decorative images.