Skip to main content Skip to navigation

How to use images accessibly

Keeping your content scannable

Once you understand that people scan-read online, you will see the importance of structuring your content properly.


Do not put text inside images

From now on, you should not use images which contain text. This is because it is not possible to resize the text in the image, and screen readers cannot read text which is part of an image.

Instead, you should format your image to have text 'on top'. This especially helps people who have poor vision, who magnify the page, or are colour blind.

Use Sitebuilder to add images with text: Go to 'Insert a', choose 'Image with text', and follow the guidance.

Read more about images with text from W3.org


When to use an alt tag or description

Over time, you will use different types of image online.

  • Examples of decorative images are someone smiling, or a beautiful view of campus to make a page look more lively.
  • Examples of informative images are when something is happening in the picture that is useful, like an event photograph of a speaker, or a chart or graph.

You should use alt tags when you have an informative image, but you should also think about adding a text description above or below the image.

That's because alt tags help people with screenreaders, but do not help people using screen magnifiers or who are not able to easily interpret visually information.

Learn more about the different types of images from W3.org


Use Font Awesome for icons

Do not create and upload images as icons of your own.

Instead, use Font Awesome to look up the code you want to use.

Then tweak the code to hide your icon from screenreaders by adding aria-hidden=“true” in the HTML as shown below:

<p><i class="fal fa-tree-christmas" aria-hidden="true"></i> Example of a Font Awesome Christmas tree code</p>

Example of a Font Awesome Christmas tree code

See how to use Font Awesome