Writing alt text

Alt text is an important part of website accessibility. We use alternative text to help people using assistive technology to understand images, videos, and other visual content. Alt text describes the content and context of photos, illustrations, graphs, charts, and diagrams.

Website accessibility

An accessible website is one that everyone can use, irrespective of:

• where they are
• what device they are using
• what their emotional state is
• whether or not they can see the screen clearly or at all
• whether or not they can hear media presenting on the website
• whether or not they can see a full range of colours
• their disability or impairment

Our content should be available, readable, and understandable to every visitor. We have a legal obligation to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1). In addition, we must not discriminate against anyone who has a disability (Equality Act 2010).

There are over 10 million people in the UK who live with a disability – that’s one-in-six people. Around 8.1 million of those individuals have significant vision impairments, including two million people who are blind.

Alternative text helps people with visual impairments and blindness to understand your visual content. 

Alt text

Alt text is alternative text for images. Alternative text as a technique also applies to videos, tables, complex diagrams, icons, buttons, and other visual elements on a web page.

Some visitors to your web page can’t see your content due to a visual impairment or blindness. They need help understanding your visual content so they use assistive technology to help them. However, they rely on you to format your content in the right way. So we use alternative (alt) text to help people using assistive technology to understand images, videos, and other visual content.

The alt text describes the content and context of the image. Think of it as a (very) short story.

An alt attribute is added to an image to clearly and concisely describe what it depicts.

Assistive technology like a screen reader reads this text out loud:

Image. A bowl of tomato soup and a cheese sandwich

Adding alt text

Most websites will let you add alt text to an image after you have uploaded it, including this site and all Wordpress sites across the University.

Does your image need alt text?

Probably – most images require alt text. However, you can use this quick checklist if you’re not sure:

Requires alt text

• Your image contributes meaning to the current page
• Your image contains people or places that you're writing about in the content
• Your image is a diagram, graph, chart, or another complex piece of information
• Your image is used as a link or button
• Your image contains text (an icon or logo)

Does not require alt text

• Your image provides no additional meaning to the content
• Your image shows content that is redundant to the text nearby
• Your image is used in the background, possibly with text overlaid on top of it
• Your image is purely for decoration (in this case, the alt text is left empty which indicates the image is 'decorative')

Writing effective alt text

Here are some tips that will help you write effective alt text for your images:

Descriptiveness

• What’s in your image? Look at it carefully and describe what you see.
• It can help to close your eyes and picture what you saw in your mind.
• Imagine describing it to someone over the phone.

Structure

• Put the most important information at the beginning (the same principle applies to the structure of your page).
• Remember that screen readers will read the word “Image. ” before then reading out your alt text, word for word.
• So avoid starting with phrases like “This is an image of...”, “Photo of...”, "This photo contains..." unless the medium is particularly important.

Length

• Ensure your alt text isn’t too short or too long; just a sentence or two is usually fine.
• Most images cannot be accurately described in just three or four words; while it's good to be concise, ensure you have painted a picture of the contents of your image.
• Alt text can be made up of multiple sentences (but try to be as concise as possible).

Alternative text for complex images

If you need to present a complex image online, for example, a diagram or flowchart, you should describe the image in as much detail as possible. This description can be included in the content surrounding the image or as a block of text placed directly below the image.

You should use the image's alt text attribute to provide a brief summary of the image and inform the reader that you have described it fully in the content. For example, "Flowchart for postgraduate entry decision process. See below for full description."

Avoid using the alt text attribute to describe a complex image unless it can be described in one or two short sentences.

Other image accessibility tips

There is much more to image accessibility than just alt text – too much to cover here. Here are some essential things to know, beyond alt text:

• Avoid displaying text in your images if possible (logos containing text and some complex images are okay).
• Don’t rely on images their own – your text and image should work together to convey meaning.
• Avoid moving, flashing, or automatically animating images.

Examples of effective alt text

Here are some examples of good alt text. Below each image, you will find the corresponding alt text.