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.
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.
- 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.
A British Sign Language translation of the consultation process for the Public Sector Bodies Accessibility Regulations.
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.
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.
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.
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.
There are many screen readers available. These are our preferred options for testing:
- JAWS screen reader
WebAIM: Using JAWS to Evaluate Web Accessibility
Deque University: JAWS keyboard shortcuts
You have to pay for a full licence for this software but you can test using the 40-minute demo mode for non commercial purposes. Please check the terms and conditions in the licence agreement to ensure that you comply.
This is the only screen reader currently compatible with Articulate Storyline resources.
- NVDA screen reader
WebAIM: Using NVDA to Evaluate Web Accessibility
Deque University: NVDA keyboard shortcuts
This is a free and open source screen reader which is rapidly becoming on of the most popular screen readers available.
- Poet Training Tool
Provides best practice guidelines and exercises that will help you grow your skills in writing effective alt text. This resource is particularly useful if you work in the education field.
- WebAIM: Alt text guidance
Good detailed guidance with practical examples.
- Diagram Center: Image description guidelines
Useful guidelines and examples.
- 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.
|Guideline||1.1 Text alternatives|
Provide text alternatives for any non-text content
|WCAG link||1.1.1 Non-text Content (Level A)|
|WCAG text||All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.|
Copyright © 2019 W3C ®
Help us to make this page better for everyone in the eLearning community. Contact us with your improvements, examples and suggestions.