The 2019 WebAIM Million analysis found that missing alt-text was the second most common accessibility failing. So why, given its importance, is alt-text often so badly implemented?

From a technical perspective, alt-text is simple to add for anyone familiar with a content management system. But knowing how to write a description which is actually useful can be a little harder.

This guidance is aimed at content editors, authors and managers but will be useful to anyone who publishes to social media. Twitter, Facebook and Instagram users can now add alt-text to posts to improve accessibility.

What is alt-text?

Alt-text stands for alternative text. It’s also known as “alt attributes,” “alt descriptions” and often wrongly referred to as “alt tags”. It can be added to HTML code and functions as an invisible description for any image presented on a web page.

It looks like this: <img alt=”text alternative”>

Alt-text does not affect how an image is displayed but provides the content in an alternative text-based format. A screen reader will read this aloud and the person using the device is given context and meaning about how the image relates to the rest of the page.

Why is it alt-text so important?

Not everyone visiting your website will be able to see the images. Certain disabled, visually impaired and blind users may rely on assistive technology like screen readers or text-to-speech software to process web pages for them.

If no alt-text is provided, a screenreader will simply say “Image” or, depending on the device may read the file name (for example “078GUU.jpeg”) aloud.

Any image that contains critical information or information that improves understanding in the context of the document must have alt-text. If not, that information becomes inaccessible to those users.

Writing effective alt-text offers Search Engine Optimisation (SEO) benefits too if written well.

(Alt-text is also shown when images do not load on a web page. Some users may also have images turned off in areas with slow internet access.)

My golden retriever dog, Scully posing for a photo in my living room
An example of bad alt-text for this image would be “dog”. Good alt-text for this image could be “My golden retriever dog, Scully, posing for a photo in the living room”

 

Writing bad alt-text

The cost of writing misleading, unhelpful or irrelevant alt-text is at the user’s expense. Well-written alt-text can broaden a person’s understanding. Poor alt-text can mislead, confuse and alienate people who rely on assistive technology.

 

Tips for writing better, more useful alternative text:

1. Be specific and succinct

Stick to as fewer words as possible. Is the colour of the object relevant? Is the weather in the background relevant? Does it matter what person’s hair colour is? Content authors have to make a judgement as to whether this information adds or detracts from their message.

Plate of fish and chips, a popular British dish, with a pint of beer on the side.
A bad alt-text description for this image would be “food on a plate”. A useful alt-tag, depending on the context of the webpage, could be “Plate of battered fish and chips, a popular British dish, with a pint of beer on the side”

The general recommendation for alt-text length is 125 characters. A short sentence or two should be the largest amount needed to convey your message.

 

2. Describe information, not aesthetics

Try not to describe what the picture looks like, i.e. “a graphic of bright blue bird”. Describe what the image content is and what it does, such as “Twitter icon.”

Twitter bird icon
Alt text that reads “a bright blue bird” is ambiguous and unhelpful here.

 

3. Think about the function of the image

Content authors add images to web pages for a reason. Ask yourself, why am I including this? What message am I trying to convey by including it? What further information and meaning will be missed if I don’t include this description?

Tip: Imagine you are explaining an image to someone over the phone.

 

4. Use normal punctuation

Normal punctuation like commas and full stops can make the text easier for screen readers (and therefore the end-user) to understand.

 

5. Leave alt-text empty for decorative images

The internet is filled with decorative images, used to help break up long pages of text, or just to enhance the feel of the content. These are particularly prevalent in technical, scientific or corporate sites which publish content.

Screen reader users generally agree that mood, feel and aesthetic of a web page are extraneous. They should not impede the accessibility of important content.

As the content author, you need to decide for yourself whether the image is informative or decorative. This may change based on the context. If the image is decorative, a null or empty alt-value can be used, written as: alt=””

The sea with the colours of the sunset reflecting in the calm water
For example, if this image featured in an article about mindfulness, this would be an example of a decorative image which should have an empty alt-tag. If this image appears on the photographer’s website, providing an alt-text description would be useful.

 

6. Don’t include copyright information or photo credits

There is no need to include the name of the photographer, creative commons licences, or any extra copyright information in the alt-text. It wastes valuable words which are better suited for a caption beneath the image.

 

7. Don’t start with “a photo of” or “an image of”

People who use screenreaders every day will be aware that they have reached an image because of the semantics of the img element. This information is unnecessary and wastes valuable descriptive words.

The only exception is when a distinction needs to be made between the medium. For example, an art gallery website will likely need to distinguish between a “photo” and a “painting” for example. This should be referenced in the alt-text.

Painting of Anne Boleyn in the Tower of London, resting her head on her crying maid's lap, shortly after her arrest
An example of bad alt-text for this image would be “Painting of lady crying” whereas useful alt-text might read “Painting of Anne Boleyn in the Tower of London, resting her head on her crying maid’s lap, shortly after her arrest”

 

8. For complex images, provide further explanation elsewhere

In certain contexts, you may find that 125 characters are not enough to convey all the information being communicated in an image. Images like maths equations, elaborate infographics or flowcharts may require you to include alt-text which refers screenreader users to a text-based description somewhere else on the page or website.

Read Penn State University’s guidance on writing alt-text for complex images

 

When is alt-text not needed?

When an image is decorative, i.e. it adds no further context or meaning to the rest of the information being displayed on the page.

Other examples include:

  • When an image is used in a link, but the image is not needed to understand the purpose of the link
  • An icon that already has a text label
  • A diagram or chart where the important information is already communicated effectively in the body text

Other resources:

Read WebAIM’s guidance on alternative text

W3’s alt-decision tree for writing alternative text

University of Leicester’s guide to writing effective alt-text