University of Reading cookie policy

We use cookies on reading.ac.uk to improve your experience, monitor site performance and tailor content to you.

Read our cookie policy to find out how to manage your cookie settings.

Accessible Images

"A picture says a thousand words" 

But what happens if you are not able to see the image or the image does not load?

This is why when we create accessible digital content we provide a text alternative for images. Providing alternative text also helps search engine crawlers to index the images properly - Search Engine Optimisation (SEO).

Microsoft Office products
Web pages
Writing alternative text
      Remember
      Do
      Do not
Some examples
Complex images
Images as links
Useful links

Microsoft Office products

After inserting an image, right click on it and select "Edit Alt Text...". Now you can provide a short description of the image if the image is there to convey meaning. Alternatively, you can tick the checkbox "Mark as decorative" if the image is for easthetic purspses only.

Microsoft office image right click menu showing View Alt Text option

Alt Text dialog

Add alternative text to a shape, picture, chart, SmartArt graphic, or other object

Web pages

In HTML, use the "alt" attribute to provide the alternative text. If the image is decorative indicate this with an empty alt attribute alt = "".

If you are using "image.jpg" the HTML code would something similar to what is shown below depending on the image's purpose on the page.

  • image contains useful information <img src="image.jpg" alt="useful image this is the alternative text">
  • image is decorative <img src="image.jpg" alt="">

In Sitecore, when you upload an image you have the option to add an alternative text description. When you insert a media item to a page, again you are given the option to add an alternative text as shown in the image. Note: If you have added an alternative text at the time of uploading the image, this description will be displayed in the Alternative text box. You still have the option to edit it.

Sitecore media insert dialog alternative text option

Writing alternative text

There are several things to remember when writing alternative text. 

Remember

  • Same image can have different alternative text depending on the context it is used. Look at this example from WebAIM tutorial about context.
  • As the author of the content you should decide how best to describe the image, making sure a person who is unable to see the image can still extract the message conveyed by the image.

Do

  • Provide text in an image as alternative text - for example, if it is a banner over an image give the banner text as alternative text.
  • Use consice language to describe the meaning of the image
  • As a rule of thumb try to use maximum of two sentences in the alternative text. If the image cannot be described this way, for example it is a complex image such as a graph or chart, describe the image using paragraph text in the document.

Do not

  • Do not say "image of". This is unnecessary because the assistive technology will indicate that it is an image. However, if it is important to indicate that it is a hand written note or a screenshot or similar you can provide this information.
  • Similarly if the image is used as a link, do not say "link" in the alternative text description because the assistive technology will inform the user that the image is used as a link.

Some examples

Example 1

A document header contains the University of Reading logo with the University's coat of arms to indicate that the document belongs to the University. In this instance, what would be a suitable alternative text for this image?

  1. University of Reading 
  2. University of Reading logo
  3. University of Reading logo with the University's coat of arms. On the lower portion of the shield is the Lancaster Rose that forms part of the arms of the Royal County of Berkshire and the three scallop shells on the upper part of the shield had been the arms of Reading Abbey, serves as a reminder that the first college was once part of the Abbey.

University of Reading logo

In this context an alternative text of "University of Reading" would suffice (answer 1). It is not necessary to say "University of Reading logo" because the meaning conveyed by the image is that the document belongs to University of Reading. Answer 3 gives too much details and it is not appropriate here. However, in a different context, for example in an article about the University of Reading's history, if the same image was considered, this may be suitable.

Example 2

The banner below is used in a Tweet. What would be a suitable alternative text for this image?

  1. Image of banner
  2. No alternative text needed - mark as decorative
  3. Global accessibility awareness day 18th May 2023

Global Accessibility Awareness Day 18th May 2023

In this instance answers 1 and 2 are not appropriate. Because the banner contains text we need to provide that information in the alternative text. Therefore, the most suitable answer would be 3. Global accessibility awareness day 18th May 2023.

Example 3

In a user tutorial describing how to create accessible tables the screenshot below is used. What would be a suitable alternative text for this image?

  1. Image of Word Table Design tab
  2. Microsoft Word Table Design tab with Table Style Options
  3. No alternative text needed - mark as decorative

Microsoft Word Table Design tab withTable Style Options

In this instance answers 1 and 3 are not appropriate. Answer 2. Microsoft Word Table Design tab withTable Style Options is the more suitable alterative text for this image.

Example 4

In webpages a series of logos for various services are used to give links to relevant pages. What would be a suitable alternative text for the Twitter logo image in this setting?

  1. Image of Twitter logo
  2. Link to Twitter
  3. Twitter

Twitter logo highlighted in get connected section

In this context, the most suitable alternative text for the Twitter logo would be answer 3. Twitter. Anser 2. Link to Twitter is repeating that it is a link which will be announced by the assistive technology. Answer 1. Image of Twitter logo is repeating that it is an image. Also it is not necessary in this context to say it is the Twitter logo.

Complex images

The images we looked at are fairly simple. However, what if you have to describe more complex image such as a graph or chart? There are companies such as textBox specialising in writing alternative text. You can view some free examples of described images from textBox

If you are describing a complex image or a graph, first describe the structural aspects of it. For example, what type of a graph is it, X and Y axes and their range, how many data points are there - these will give the non visual user information to create the structure for the described image. If you were given this information and a piece of paper can you draw the graph? Next provide the details of the graph.

Sometimes it is not possible to describe a complex image in two sentences. If this is the case you may want to provide a summary as the alternative text and describe the image in the content of the document or provide a link to more detailed description or provide the data table so that the person reading the document has access to the complete set of data.

Optimise solutions for individuals

In situations where the image is too complex to be described in few sentences, we could invite to contact the relevant person. This will help to empower the person to discuss the kind of support that works for them and may also help staff members not to waste time creating long written alternatives that may not be helpful for the specific user. Complex images in an educational context paper suggests to use wording similar to:

“[Image type] illustrating [data type] showing [reason for including image]. This is a complex image and may require specific support for visually impaired students – please contact [Name of designated person] if required”.

A worked example, The Global Carbon Cycle is shown in this resource.

More examples

This video tutorial What is alternative text? How do I write it for images, charts, and graphs? demonstrates some specific examples: line graphVenn diagram and flow chart.

Diagram Centre provides specific guidelines for different types of diagrams, some of the most useful are listed below. The full list of Diagram Centre guidance available to view.

Diagrams

Graphs

Maps

STEM

Images as links