Five golden rules for compliant alt text

Posted on 7th February 2022

Written by Mark Walker, Head of Marketing, AbilityNet

Are you using alt text properly?

Inconsistent use of alt text is one of the most common problems found in our web audits. These golden rules make your alt tags more useful to your site visitors and mean your site is more likely to be legally compliant. These rules are aimed at content editors but may also be useful for anyone producing content on the web.

Rule 1: Every <img> must have an alt= attribute
Rule 2: Describe the information, not the picture
Rule 3: Active images require descriptive alt text.
Rule 4: Images that contain information require descriptive alt text.
Rule 5: Decorative images should have empty alt text.

What is “alt text”?

Alt text is a text alternative defined for images. The typical image is coded in HTML in the following form:

<img alt=”text alternative”>

You might never actually see the code of the page when you are editing your web site or when you are adding new content, instead you will probably use a CMS (Content Management System) of some kind. Whatever you are using to add content to your web site, when you add an image you should get asked for “alt text” or a text alternative (it may be called slightly differently, but you should be asked for some kind of name for the image, chances are this is the alt text).

What is the reason for alt text?

Not all users can see the images. Disabled visitors to your site may be using assistive technology like screen readers or other text to speech software which reads the page out loud, and this software will read the alt text instead of the image. There are other situations when the alt text is used too, e.g. if a user has images turned off (e.g. because they use a very slow internet connection – still happens occasionally!) then they will see the alt text instead of the image.

There are other ways how images can be implemented, e.g. it is possible to use CSS styles to add background images, but this is usually done by the front-end developers and not by content editors, and will therefore not be covered as part of this article. We will concentrate on alt text of traditional <img> images here.

So what do you need to do?

Every image must have the alt attribute included:

Rule 1: Every <img>must have an alt= attribute

There is no exception to this. The <img> element must always contain the alt= attribute. It doesn’t matter what the image is used for, or what it shows, or even how small it is.

What text you should use for the alt attribute depends on the type of image and is explained below, but you always include either alt=”” (empty alt text) or alt=”descriptive text” (descriptive alt text).

And another mistake I’ve seen a few times on web sites:

Rule 2: Describe the information, not the picture

In other words, you almost never describe what the picture looks like, instead you explain the information the picture contains.

Example: Twitter

The alt text for this image should be alt=”Twitter” or similar (depending on the context and how the image is used), but it should not be “blue bird” or anything similar. Sounds obvious? I have seen several sites that did include descriptions of what the image shows in the alt text of an image, usually on sites that had made an effort to improve accessibility but misunderstood the requirement.

Types of images

So what exactly should the alt text be? Well, it depends on the image…

Luckily, there are only 3 fundamental types of images you need to consider:

Type 1: “Active” images, i.e. images that perform an action (links, buttons etc.)
Type 2: Images that contain information
Type 3: Images that are purely for decoration

When deciding how to make an image accessible, first you need to choose which type of image it is from the above list.

Type 1: Active images

What is an Active image?

It is quite easy to check if an image is active or not: An “active” image is an image that performs an action or has some functionality. The most common example is a link image, i.e. where an image is the only content of a link.

Note: When a single link contains an image as well as text then this doesn’t count as an active image here.

How to implement it?

Rule 3: Active images require descriptive alt text.

The alt text for an active image should describe the action the image performs. So if you have a link image then the alt text should tell the user what the link does. If it’s a link to another page then it could be the name of that page, if the link performs an action on that page then name that action (e.g. “expand” if it expands a section, “Email this page” if it’s an email link, etc.)

Type 2: Images that contain information

If the image is not an active image (type 1 above), then you need to check if it contains information or not.

Sometimes this is easy, e.g. a chart or graph will contain some information, or an image of text contains information. Unfortunately this is not always straight forward, in some cases you will need to use your judgment to decide if an image contains information or not. The essential question is, would the user miss something if you remove the image? If the user would miss out on some information without the image, then it is a “type 2” image. If the image is just for decoration, or if the same information is already in the text somewhere, then it is a decorative image (type 3).

How to implement it?

Rule 4: Images that contain information require descriptive alt text.

If an image contains information, then you need to offer this information to the user in an alternative format. If the user can’t see the image, they need to get the information in another way. The alt text should be a brief description of the information.

There are some special cases for images containing information that are worth pointing out:

Images of text

Try to avoid using images of text. In the vast majority of cases where I come across images of text there is no need to use images, instead the page could just use normal text with some basic formatting applied. Reason? Some users increase the text size, images don’t resize in the same way as text. If zooming into a page, images of text get blurred, normal text usually doesn’t. There are many other reasons…

If you do need to use images of text, then in almost all cases the alt text will be the text shown in the image. After all, that’s usually the information the image contains!

Charts, Graphs, etc

Graphs and charts usually contain a lot of information, too much to include as part of the alt text, as the alt text should be kept very brief. There will be a separate article here that looks at complex images.

Type 3: Images that are for decoration

If the image is not an active image (type 1), and if it doesn’t contain information (type 2), then it is a decorative image. Images that are only for decoration should not have any (descriptive) alt text, instead you should use the empty string as alt text.

How to implement it?

Rule 5: Decorative images should have empty alt text.

The alt text should be the empty (null) string, i.e. alt=””. The code for your image should look like this:

<img alt=””>

Even if the image is for decoration, it still must have the alt attribute (remember rule 1!), but it doesn’t contain any text. If you read somewhere that certain images should have no alt text, what is meant is that the alt text should be empty. To repeat: Never define any <img> without the alt= attribute!

Reason:

If the alt attribute contains no text (alt=””) this tells screen readers to ignore the image. Screen reader users don’t need to know about decorative images, it would just add to “audio clutter” on the page, so by assigning an empty alt text to an image the screen reader is told to ignore it.