Provide text description (alternative text, or alt text) for every visual element in your eLearning resource which adds meaning, or helps the learner navigate.


How do I comply?

  • Add alt text for all images which add meaning to your eLearning resource.
  • Add alt text for complex images such as diagrams, charts or maps.
  • Add alt text for embedded multimedia assets e.g. audio tracks or videos. This is so that when a screen reader gets to the multimedia (before it starts playing), it tells the screen reader user that there is a multimedia asset embedded in the page.
  • Add alt text for navigation controls which are not automatically recognised by a screen reader. The alt text should be a description of what the navigation control does e.g. Submit. You often need to do this if your authoring tool allows you to add customised navigation buttons to your eLearning resource.
  • You do not need to add full alt text for images which are part of a test. You can provide a simple description instead of a detailed description in the alt text, so that it does not give the learner the answer.
  • Stop a screen reader from reading alt text for images which do not add meaning to your eLearning resource. This could be if they are only for decoration or for spacing.

Note
There are exceptions to this standard, but they are unlikely to apply to eLearning resources. One of the exceptions, however, is CAPTCHAS which may apply. We haven’t come across any examples, although we have, seen NEXTCHAS 🙂
Please contact us if you have any examples of CAPTCHAS which we can include.


Why?

  • You need to provide alt text so that someone who is blind or has low vision can get the same information as a sighted learner.
  • Different assistive technologies will convert the alt text into different formats depending on the needs of the learner. For example, a screen reader will read out the text for a learner who is blind or has low vision. A refreshable braille display will convert the text into braille for someone who is deafblind.
  • In the future, alt text could also be translated into a simpler form of the same language or sign language. Due to a very different grammatical structure, some British Sign Language (BSL) users have difficulties with written English and would need a BSL equivalent. If you’re unfamiliar with BSL this is an example from the Government Digital Service.

(No audio)
Video shows:
A British Sign Language translation of the consultation process for the Public Sector Bodies Accessibility Regulations.


eLaHub examples

1. Add alt text to an image

Add alt text to any image which adds meaning to your learning resource. The following is a great example because the Alt Text field is mandatory. There is also an information icon showing that more information about alt text is available.

Image block with a mandatory alt text field.

CourseArc add alt text

2. Add alt text to a complex image

Add alt text to any image which contains complex information. The alt text needs to explain whatever key points you want the learner to understand by using the image, chart, map or diagram etc. If your authoring tool has a character limit for alt text, e.g. Lectora, you can add the alt text to a text box on the page and then hide it from sighted learners. Alternatively you can add the description on another page and then add a trigger which links to this page.

CourseArc and NVDA
Alt text added to explain a bar chart

Some authoring tools will help you to add alt text to complex images. For example, when you create a graph in CourseArc, the data you enter to create the graph is automatically added as a transcript. This transcript then acts as the alt text which explains the graph for someone who cannot see it.

Pie chart with alt text transcript which gives the statistics used in the pie chart in a table format.

CourseArc
Automatically generated alt text for complex image

3. Add alt text to multimedia assets

Add alt text to multimedia assets e.g audio tracks or videos, to tell a screen reader user that they are embedded in your eLearning resource before they start to play. If you check your resource with a screen reader, you will be able to find out if your authoring tool adds this information automatically, or whether you need to add this yourself.

Storyline and JAWS
Alt text to multimedia assets

4. Add alt text to navigation controls

If you use inbuilt navigation controls e.g. forward and back buttons, they will normally have alt text automatically. If your authoring tool allows you to add customised navigation controls, however, you need to add your own alt text to these controls. If you use pre-built controls e.g. buttons you need to check with a screen reader to find out what will be read. In our experience, we have had issues adding alt text to some pre-built buttons with states e.g. in Storyline. There is a work around for this, but we tend to avoid any problems by only adding our own custom built buttons.

Storyline and JAWS
Alt text for navigation controls

5. Remove alt text from a decorative image

You need to stop a screen reader recognising, or reading any alt text for images which do not add any meaning. This is because they will be distracting for screen reader users. How to do this will vary depending on the authoring tool you are using.

Authoring tool properties tab showing an Empty ALT Tag field.

Lectora
Remove alt text


How can I test?

  • Use a screen reader to read all of the content in your eLearning resource. Check that the alt text allows you to have an equivalent learning experience to a sighted learner.
  • Check that you haven’t forgotten to stop the screen reader from reading the description, or file name of any images which are only used for decoration, spacing etc.

Further information

Useful links

Screen Readers
There are many screen readers available.  These are our preferred options for testing:

Alt text

Tips

Alt text

  • Present the same content or function as the image.
  • Keep it concise.
  • Don’t add “image of” or “screenshot of” to the alt text, because a screen reader will read out that it is a graphic or image.
  • Don’t provide information in the alt text that is already in the surrounding text.

WCAG information

CategoryPerceivable
Guideline1.1 Text alternatives
Provide text alternatives for any non-text content
WCAG link
1.1.1 Non-text Content (Level A)
WCAG textAll non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

Copyright © 2019 W3C ®


Beta page
Help us to make this page better for everyone in the eLearning community. Contact us with your improvements, examples and suggestions.