How to Develop Visually-Accessible eLearning Content

The call to ensure all our eLearning content and courses are fully accessible is an important one because we don’t know who sits on the other side of the screen and learns from our content. We don’t know their specific needs. Instead, we develop with the assumption that every possible accommodation is needed. If you are looking for a practical guide on how to develop visually-accessible eLearning content, you’re in the right place.

Reality check

According to the World Health Organization (WHO), about 1 billion people globally have moderate to severe vision impairment, including blindness. While it is fun and creative to have colourful eLearning content with numerous graphics, it is more important to have fully accessible content. You can still have graphics, but ensure you include the features described in this article. 

Screen readers

There are different types of visual needs within the category of visual disability, from software requirements like JAWS, to creating accessible interfaces for people with colour-blindness. 

JAWS is a screen-reading software that translates the text on the screen to an audio format for the user to listen to. There are other screen readers such as NVDA, Apple Voice-Over and Dolphin to name a few. There are a few online interfaces that are not accessible to screen readers and the person can miss out on important information as a result of this. If you include certain features accessible to screen readers, then no one misses out. 

It’s important to remember that screen readers follow the natural reading sequence of top to bottom, left to right. This means you should make sure the information follows a logical order for the user to understand the content. For example, if you have a graphic first that provides an example, then a text explanation next to it, bear in mind the screen reader will convey the image text information first if it’s on the left of the page, and then the text on the right. 

Alternative text

Alternative text (also known as alt text) is one way of including text descriptions for screen readers to describe an image or feature for a person with visual disabilities. The purpose of writing alt text is to present the visual information in a textual form. You should write it as clearly and briefly as possible and only include the important information. Avoid starting the alt text with, “This image shows…”. Simply begin with the information. 

Let’s take a look at some examples of alt text. Consider the graph and accompanying alt text below:

‍

‍

It is not possible for a screen reader to pick up the text within an image or a graphic. You will need to convey the most important text in the alt text description. Below are examples of correct and incorrect alt text for the graph above.

‍

Example of correct alt text

“Twenty-five percent of school learners do not have access to a cellphone. Fifty percent do not have internet access at home, while twenty-five percent are able to use the Wi-Fi connection at school.” 

‍

Example of incorrect alt text

“This image shows a bar graph with three bars. The bars are green, blue and red. The green bar shows twenty-five percent of learners do not have access to a cellphone. The red bar shows fifty percent of learners do not have internet access at home. The third bar is blue and shows twenty-five percent of learners use the Wi-Fi connection at school.” 

Inserting alt text

Many online platforms have an option available for you to create alt text. For Google Suites, you can right-click on an item and select the alt text tab. 

For Articulate Rise, you can add an alt text by selecting the option on the “edit” section of the media item. 

Colourblind accessibility 

The Colorblind Accessible Manifesto provides a detailed account of the different ways we can create accessible content for 350 million users with colour blindness. There are different types of colour blindness, and the most common type is not being able to see the differences between red and green. Another type may not be able to see the difference between blue and green, or red and yellow. For this reason, we have to be considerate about how we present eLearning content in terms of colour and contrasts. 

The basic rule is to provide alternative forms of information to be interpreted easily without expecting the user to depend on the colours to understand the information. Let’s consider an example of graphical information and how it can be presented to include people with colour blindness. 

‍

‍

The graph above shows how much easier it is to distinguish between the different bars when different patterns are given as representations of information. For many colour blind people, a graph with different colours can be difficult to read when the colours look similar to each other. 

For icons or graphics that convey information or status, it is important to include a graphical indicator or text to clarify meaning, instead of only using colour. Here is an example of the difference between colour-only graphics and an inclusive graphic:

‍

Creating hyperlinks

For many colour blind web users, the hyperlinks can be difficult to spot because the traditional blue colour is not easily seen. It is more accessible to underline the hyperlink so it can be easily spotted and used. 

Colours and contrast

Being considerate of the colours used within any eLearning course is important to accommodate all visual needs. Make sure your colour pairings are compatible and provide high contrast. The graphic below illustrates how different colour pairings impact readability. 

‍

‍

If you are not sure whether your colours or your graphics meet the requirements for high contrast for visual accommodation, you can check with this online tool by WebAIM. It indicates whether the graphics you are testing pass the contrast requirements by generating a ratio. This colour contrast ratio is simply the ratio between the brightest and darkest shades. 

‍

‍

In general, it would be ideal to avoid the colours yellow, orange and red for textual colours as they make it difficult to read. 

Text sizes

A general rule of thumb for accessible text sizes is between 14 and 18 points. If possible, bold headings for easier identification between sections and important points. 

Avoid overlaying text on busy images or graphs. Rather separate the text and place it next to, above or under the image. It is easier to read if the graph’s text points are in the key and not on the graph itself. 

Going forward

By including all the recommendations in this article, you will step in the right direction of developing inclusive eLearning content and creation. To summarise, the following accommodations will ensure accessibility for visual needs:

• Include alt text for all images and graphics, written briefly and succinctly.
• Use shapes and patterns to indicate different information, instead of using only colour.
• Pair colours carefully to provide the best contrast for readability.
• Underline hyperlinks.
• Have larger text sizes, between 14 and 18 points, and bold headings and important information.
• Make sure all your graphics have easily-readable text that is not on top of an image.

References

World Health Organisation (2021). Blindness and visual impairment [online]. [accessed 28 May 2022].

Colorblind Accessibility Manifesto (2022). Colourblind Accessibility Manifesto [online].

[accessed 23 May 2022]. 

National Eye Institute (2019). Types of Color Blindness [online]. [accessed 24 May 2022].