Images: alt text and text alternatives

Designing your Moodle space with accessibility in mind benefits everyone.

What is alternative text?

ALT or alternative text is used within HTML code to describe or explain the function of an image on a web page. You may also have heard it referred to as "alt attributes", “alt descriptions" or "alt tags".

Why add alternative text to images?

Including alternative text, or Alt text, on your images is extremely useful for those using text to speech and screen reader software as it is designed to recognise alternative text and read it to the user. Alt text is not visible when viewing a webpage or Moodle space. Descriptive and informative alt text will provide the user with information about the image or explain its the function.

When should alternative text be used?

You do not need to add ALT text to every image on your Moodle space. Whether to add ALT text will be a matter for you to judge based on the content and context of the image. Adding ALT text where it is not needed provides extraneous and useless information to the participant.

When adding images you should consider:

is the image purely for decoration?
does the image perform a function? (e.g.
does the image contain relevant or important information the participant needs to understand?
is information about the image sufficiently detailed in the surrounding text?

If the image is purely for decoration, you do not need to enter ALT text.

The answer for 2 and 3 is slightly trickier and will require your judgement.

Consider the examples below:

Example 1

XX123: Renaissance Artists

In this module, you will explore the works of renaissance artists and how their work has influenced artists ever since.

In this example, the image does not contain any relevant or important information and is being used here for decoration. ALT text would provide information that the participant doesn't require.

Appropriate action: Do not add ALT Text.

Example 2

Boticelli's painting The birth of Venus

The artist has taken inspiration for this pose from classical statues. The compisition is similar to that of the Primavera.

In this example the image is accompanied by some information but it does not help the participant identify the image.

Appropriate action: Add ALT Text that, at minimum, identifies the image e.g. "Boticelli's painting The Birth of Venus"

Example 3

Boticelli's painting The birth of Venus

Botticelli's "Birth of Venus" shows the goddess of love and beauty arriving on land in a giant scallop shell. It is believed the painting was commissioned by the Medici family in the mid-15th century.

In this example the image is accompanied by important and useful contextual information that would help the participant to identify the content of the image itself.

Appropriate action: Do not add ALT Text.

You can find more examples on the WebAIM guidance on Alternative Text page.

Add alternative text to images in Moodle

You can add images to Moodle from the Atto text editor [add link to editor info]. When you add an image to Moodle, you are required to enter ALT text as part of the image properties. In Moodle the alternative text field is titled "Describe this image for someone who cannot see it".

If the image does not need alternative text, for example it's used purely for decoration, you should select the "Description not necessary" checkbox.

GET HELP

Filter by tool, task or content

Use H5P to create (interactive) content

Assessment design