Accessibility for Developers

Alt text is the alternative text given to images. It is probably one of the first accessibility related things that website developers learn about. Without adding alt text, assistive technologies such as screen reads would not be able to describe the image to users* and will just describe it as ‘an image’.

* sometimes screen readers will attempt to read the filename (such as DSC0001.jpg), and AI tools are starting to appear that can try and describe images

It is sometimes known as the alt description or alternative text.

The markup in HTML is very simple - just adding text to the alt property.

For example:

<img src="swan.jpg" alt="Swan in the water" />

Why the alt text is important

• Not everyone can see images. As well as blind people, but also those on very slow internet speeds. Some people may disable images to reduce internet data usage, and in those cases browsers will often show the alt text.
• If you do not give an alt text, screen readers will normally attempt to read the filename (as sometimes this can be a description - e.g. swan.jpg), but this is often not very useful.
• Writing good alt texts also has SEO benefits. One of the contributors for images showing up in Google Image search is its alt text (or other text nearby describing the image).

How to write good alt text

Writing good alt text is quite subjective. There are many views on how to write good alt text. The main consensus is:

alt text should be short and to the point

Alt text is to give users who cannot see the image an understanding of the image, so they can understand the rest of the page.

A short alt text is normally enough to give enough information so people can understand the content. But don’t make it too short.

For example if you had a website on how to plant seeds, with an image showing how/where to put seeds. A bad alt text might be just planting carrot seeds. A better alt text might be planting 6 carrot seeds 1cm deep, with 20cm between them.

Do not tell users it is an image - they know that already!

It should not include wording such as a picture of..., an image of... as screen readers will already describe it as an image. Just skip those first three words and go straight into what it is an image of.

Do not include copyright or credits

(don’t include the weather, how sunny it is, how many people are in the background). The alt text is to describe the image, not to add additional information. These probably belong in a <caption> tag near the image…

Don’t include information that isn’t important

If you had an article about baseball bats, and you had a photo of a baseball bat you might want to describe the baseball bat. But you can probably (don’t include the weather, how sunny it is, how many people are in the background) (don’t include the weather, how sunny it is, how many people are in the background).

This does mean that the same image could probably have completely different alt texts depending on where it is used. This is why using a CMS that lets you upload an image and set alt text is probably causing some issues - it depends on where and how the image is used that determines how you should decide on an alt text!

Remember that you can always add extra info - outside of an alt text attribute!

If there is a very critical image - for example a diagram - then you should probably describe it just in text outside of the alt text. It is likely that for complicated images that users need to understand the alt text would have to be too long. Just stick it as a paragraph outside of the <img> tag…

Describe what it is trying to convey

If you have icons that represent something, it is probably very important to include alt text for them.

But describe what information they’re trying to convey - an icon of Facebook’s logo should probably be described as Facebook logo, and not White F on blue background.

When you shouldn’t use alt text (hint: decorative images)

This is in my opinion almost as important as adding alt text… knowing when to not add alt text!

There are cases when you don’t want screen readers to read out the image. You might think that by just not including the alt property it would mean screen readers will skip it. But they will often try and guess the image by reading the filename (DSC1101.jpg). So to make screen readers skip reading an image out loud then just add alt="".

Don’t add alt text for decorative images

If you had an image between paragraphs (and let’s say you used <img> for this - not in CSS) that had squiggly lines. Is that important for screen readers? Very unlikely! It is just decorative.

Some things like squiggly lines are quite easy to tell that they’re decorative. But what about an article with some stock photo in it? Is that decorative? Would the article make sense even if you couldn’t see the image? Then it is probably decorative.

Don’t add alt text if there is already an alternative text elsewhere on the page

If a button or link has normal text, but also an image then the alt text might not be needed. For example <a href="/shop"><img src="i.png" alt="Go to our shop" /> Go to our shop</a> would mean screen readers read the same ‘go to our shop’ text twice. Just stick an empty alt text in there so screen readers will skip it - <a href="/shop"><img src="i.png" alt=""> Go to our shop</a>

Other tips when adding alt text

Pretend you were describing the page on a phone call…

A good tip when quickly deciding if you need to use an alt text is to imagine you were describing the page to someone on the phone.

Would you mention that there was a squiggly line (decoration image) between paragraphs? Probably not.

If you were on a page about a castle, would you describe that there was a picture of the castle, explaining what it looked like? Probably!

Aim for 125 characters as a maximum

Don’t aim to fill it up, but try to avoid going over 125 characters. This is generally what is advised both for SEO and accessibility reasons.

Read more about alt text and accessibility

Here are some more great resources on alt tags for accessibility:

• Big hack - how to write better alt text descriptions
• Moz - Alt Text: Why It’s Important For Accessibility & SEO