Alt Text

Although the guidance in this section applies to any non-text media, we’re going to concentrate on alt text for images where most of the issues lie.

The purpose of alt text

Alt text provides a description of non-text content on the web. At the moment, computers and screen readers can’t automatically determine the meaning of an image or its function. This means we have to add information in so all users get a full sense of the page when the image itself can’t be accessed.

Alt text can be found in two places:

•   Added to the code as an ‘alt attribute’
•   Next to or near the image on the page. This doesn’t mean we don’t need an ‘alt attribute’ in the code though. Alt attributes are always necessary, even if they’re empty.

Benefits of alt text

• Screen reader users – the description will be read aloud, allowing users with visual or cognitive disabilities to access them
• Speech input software users – the focus can be placed onto a button or linked image with a single voice command
• Incomplete page loads – the description will be displayed as text when the image file doesn’t load, this might be because of a bad connection or through the user’s choice
• Search engines – Images become indexable by search engines

How to write alt text

The first step in writing alt text is to decide what sort of image you’ve got and then decide what type of alt text your images needs, if any.

What type of image do I have?

Ask yourself: is this image trying to communicate any information? If you removed it, would there be any impact on the meaning of the page?

If you answer NO, you probably have a decorative image.

If your answer is YES, then you may have one of these types of images which all need alt text: functional, images of text, complex, informative or groups of images.

Decorative images

Decorative images are used purely to decorate and improve the visual appearance of the page, they aren’t trying to communicate any useful information.  Types of decorative image include:

• Visual styling (borders, spacers, corners)
• Images displayed with link text, to either improve how it looks or to increase the clickable area
• Images which are described by the surrounding text.

Purpose:

Used purely to decorate the page, they aren’t trying to communicate any information. If you were to remove it, it would have no impact on the meaning of the page. Examples are:

• Visual styling (borders, spacers, corners)
• Images displayed with link text, to either improve how it looks or to increase the clickable area
• Images which are described by the surrounding text.

How to write alt text for decorative images

Decorative images do not need alt text. Adding a description for a decorative image would be distracting and create audible clutter. Screen readers will skip over images without alt text as there is nothing to read out, in the same way someone may visually skim over a decorative image when viewing a page.

From a content production point of view, this means leaving the “alternative text description” field empty or blank when adding images to a page. Your CMS should permit you to do this as long as the code for the decorative image is output as described below.

In code, this means the “alt” attribute for the decorative image can be empty or null e.g. alt=””, but the attribute itself must always be present.

The alt attribute should always be present on images (even if it is left empty), because leaving it out may cause a screen reader to read out the file name of the image instead.

Example alt text for decorative images

Alt text: Empty alt text

Alt text: Empty alt text

Functional images

Purpose:

To convey an action rather than information, for example, buttons, links and other interactive elements.

How to write alt text for functional images

The alt text should describe the purpose of the image rather than a description. For example, an icon of a printer might be ‘print this page’, rather than ‘image of a printer’. It’s critical there aren’t missing or empty alt values for these sorts of images because screen reader users will miss out on essential functionality and actions with the page.

Images of text

Purpose:

Text that’s presented in an image that is intended to be read. Please note, we avoid this as far as possible unless it’s on a logo.

How to write alt text for images of text

If an image contains text, the alt text should contain exactly the same words as in the image. You don’t need to worry about including information about the style of the image and other visual elements like shadows aren’t mentioned usually unless they are key to the understanding of the image.

Example alt text for images of text

Alt text: Current Account Switch Guarantee logo

If this image is positioned next to text which mentions the Current Account Switch Guarantee, the alt text for this image can be empty because the information contained in the image is available elsewhere on the page. Providing the same alt text description may create audible clutter and maybe distracting more than it is helpful.

Complex images

Purpose:

To convey substantial information, for example:

• graphs and charts
• diagrams and illustrations that enable users to understand information on the page
• maps.

How to write alt text for complex images

These need two sets of alt text:

1. A short description to identify the image and location of the longer description.
2. A long description that includes the essential information the image conveys. Try to look to the editorial intent behind the image to help with this.

Informative images

Purpose:

To communicate information and concepts. It’s not always easy to distinguish between a decorative and an informative image – in this case we need to look to the reason for including using the image.

How to write alt text for Informative images

Should be a short description conveying the essential information presented by the image. Typically this isn’t a literal description of the image, rather what the key information, message or concept is. Like complex images, try to convey the editorial intent behind the image.

Examples of alt text for informative images

Alt text: Photograph of two students chatting.

Alt text: Photograph of Charlie, Nationwide member since 2016, and Harrison, member since 2016.

Groups of images

Purpose:

This could be one of two things:

1. More than one image grouped together to communicate a single piece of information, for example a 4 star review
2. A group of related images that form a collection, for example a selection of different interpretations of the same artwork

How to write alt text for groups of images

The rules are different for each of the two sorts of groups:

1. More than one image grouped to communicate a single piece of information: only one of the images needs a text alternative to describe the entire collection, while the other images have a null (empty) alt attribute so that they are ignored by assistive technology.
2. A group of related images that form a collection: The <figure> and <figcaption> elements are used to provide a caption for each image in a collection. The <figure> element can be nested, which is used in the example to provide a caption for the entire collection of images. The WAI-ARIA attribute role with the value of group is used to indicate this grouping to assistive technologies, aria-labelledby makes sure that the figcaption elements are used as labels for the individual groups.

Note: The web browser and assistive technology support vary for this particular WAI-ARIA attribute and value.

Examples of alt text for groups of images

Alt text: There would be alt text assigned to the image but it would be empty. The reasoning is that there is text that will sit underneath this illustration and it will mention “the Current Account Switch Guarantee”.

Writing effective alt text

A useful method to help with writing an alt text description is to ask yourself: How would I explain this image to someone over the phone to help them understand it? Here are some other things it’s useful to remember:

• Consider the context
  The alternative text for one image may be vastly different based depending on where it is and what it’s next to.
• Be succinct
  Typically no more than a few words are necessary, although on some occasions a few short sentences may be appropriate.
• Don’t repeat
  Alt text is redundant if it contains the same information as text within the context of the image or text that’s nearby.
• Emotions and moods
  What emotion or mood does the image convey? Descriptive text helps us to convey this emotional content.
• Actors and action
  Who are they and what is happening?
• Words and phrases to avoid
  Don’t use phrases like: “image of …”, “picture of”, or “graphic of …”. That’s because it’s unlikely the user will be unaware it’s an image. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this.
• Identify the type of image
  Alt text should specify if the image is a painting/illustration/photograph
• Links
  Any link information must be contained in the alt attribute. This should be descriptive, not simply say ‘link to’ or ‘click to’.