Guide

Writing alt text

Updated on 23 April 2022

How to write effective alt text that helps visitors who rely on assistive technologies like screen readers.

On this page

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. 

Did you know?

Everyone benefits from an accessible website. Accessible content is easier to access and read for everyone.

Alternative text is seen by a wider audience than you might think. Many people rely on video captions when not able to play sound on a device (on the train or out in public, for example). And image alt text is read by the bots used by search engines like Google to understand and rank your 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.

Code showing how alt text works with a fictional example

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.

Screenshot of a User Interview for uploading an image and adding alt text

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')
Screenshot of the university website showing background images that do not require alternative text

The images in this screenshot are decorative. The alt text is left blank (alt="").

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).

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 (but logos are fine).
  • 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.

A man sitting in a Covid testing centre holding a syringe

Alt text: A man sitting in a Covid testing centre holding a syringe

A female student speaking to a male lecturer in a studio environment with small electronic components and a laptop on the table in front of them.

Alt text: A female student speaking to a male lecturer in a studio environment with small electronic components and a laptop on the table in front of them.

The main entrance of the Life Sciences building on the university campus at dusk

Alt text: The main entrance of the Life Sciences building on the university campus at dusk

A women helps another women to use a gym's bench press. In the foreground, there is a sports bottle with a special band created as part of a student project called Mygym.

Alt text: A women helps another women who is using a bench press in a gym. In the foreground, there is a sports bottle with a special band created as part of a student project called Mygym.

Enquiries

Steve Burrows

Web Design Manager

website-accessibility@dundee.ac.uk