Create Accessible Content in Evolve

This articles details how you can get started when looking to create accessible course content in Evolve.

Determine your audience

When creating accessible content, your first step should be to find out as much about your audience’s needs as you can. That means talking to people — your or your clients’ HR departments, disability champions, internal QA teams — and most importantly, end-users!

There is no substitute for getting insight and feedback from accessible users. They can highlight what they find most frustrating, what works well, and more. The more you find out about your audience’s needs, the better you can suit your learning to fit them. This can involve setting up user groups to pilot your courses with, asking external organisations to audit your content, and carrying out accessibility testing yourselves.

Get started

Accessibility isn’t something that should be tacked on to a finished course. It should inform your course creation from the very beginning. When a course is being designed, accessibility needs should be as much of a consideration as learning objectives or any other aspect of the production process.

If you are creating complex interactions or learner journeys, consider how your accessible audience will navigate to gain as rich a learning experience as the rest of your audience. There are a number of ways Evolve can help you do this.

Let’s take a look at some simple considerations that can be part of your course creation.

Aria labels

There is nothing technical you have to do when creating course content in Evolve to make it work with a screen reader. Evolve content is designed to be navigated by a screen reader. However, aria labels are a crucial addition that can help screen reader users navigate through and interact with your courses successfully. Evolve is unique amongst authoring tools in that it allows you customise the content of aria labels throughout your course.

An aria label is a piece of text that is not visible in your finished course content but is detected and read by a screen reader. These labels can be used to describe how an interaction works for your learner. Every piece of content that’s displayed in Evolve has the option to add an aria label.

Consider this scenario: a screen reader user is navigating through your course, and arrives at a confidence slider. While every part of the slider can be accessed, read, and navigated by your user, unless there is a clear explanation of the component, it could be a confusing experience. An aria instruction can help your user understand what they are being asked to do.

Here’s a typical use of a confidence slider:

When a learner navigates through this component with a screen reader, they will hear the title, question, instruction text and then the labels at either end of the scale. They will then be advised by a default aria label that the arrow keys can be used to move the slider. They can then navigate to the Submit button and hear the button name read aloud. When the learner hears the labels read out in quick succession, there may not be enough context for the user to know exactly what’s being asked of them or how to respond.

Now let’s consider the same interaction with an up front aria label written in an example below:

“You are about to complete a confidence slider. You will be asked a question related to how confident you are feeling, and will then be told what the labels at either end of the slider scale represent. You can then use the arrow keys to move through the points on the scale, and choose the point relevant to how you are feeling. You can then tab to the Submit button, press Enter and hear feedback for your choice.”

With this aria label, your learner can feel confident in completing the component. This can be a real aid to navigating the course quickly and effectively. Nothing is going to disengage a learner from your content quicker than not understanding what they are supposed to do! At the same time, be wary of overloading your learners. Use the instructions only where necessary, and keep them as clear and concise as possible.

Alt text for images

When using images in a course, it is possible to tag them with alt text that works in the same way as aria labels. These are used to describe images to a screen reader user. Evolve allows you to add alt text to any image you use in a course.

Images in a course may be purely decorative or may be used to convey information your learner needs to know. An alt tag provides a text description. It is considered best practice to avoid adding alt text to illustrative images. If your course contains imagery of people in an office environment at a meeting, for example, there is no specific information that needs to be understood by the learner, so it can be left out. Excessive use of alt text on every purely illustrative image in your course can be considered additional "noise" to a screen reader user that slows their progress or distracts them unnecessarily. Diagrams or images with information the learner needs to know will need descriptive alt text.

Let’s look at an example:

An alt tag for the above image could read something like: “A Venn diagram illustrating that a banana is smooth and sweet, a lemon is sour and bumpy, but both have the properties of being yellow fruit.”

Note that the description is not a forensic examination of every element in the image (e.g. “An image of a blackboard with words and shapes written in coloured chalk. Two headings appear at the top left and top right of the image, in different coloured writing…”). Be practical and concise, and consider what the learner actually needs to know from the image.

If you are displaying complex diagrams that contain a lot of information, you may wish to consider presenting the information in an alternative way — perhaps a series of simpler images, breaking down the information into smaller pieces or linking to an alternate resource for screen reader users that describes the learning point in more detail, for example, an accessible PDF or alternate location in your course.

To note, additional details on accessible PDFs and linking to other pages in the Accessibility Guide: Working with Evolve path.

Check aria labels and alt text in Evolve Live Preview

One handy aspect of Evolve’s Live Preview is that you can check the aria labels and alt text that are associated with each piece of content. You do this via the Inspector tool, which can be accessed by selecting the arrow that appears at the bottom right of your preview. Once this Live Preview Toolbar is open, select the radio button with the target symbol - you can see it selected here:

When Inspector is enabled, you can click on any element of the page. Click the same Inspector target symbol for that element, select the tab labelled Aria Labels and view the details:

You can also select the Alt Texts tab to see what text is used to describe any images:

Keyboard operability

Keyboard operability, outside of screen reader use, is an important factor that works in Evolve by default. This means a learner with a motor function disability that stops them from using a mouse can navigate quickly and easily through the course just by using the keyboard.

The learner primarily uses the Tab key to navigate around the active elements on the screen, and the Enter key to activate buttons. The tabbing order around the screen elements is logical and intuitive. You can also use the directional arrow keys to scroll a page up and down.

There is an accessibility setting in Evolve’s Theme Editor (Appearance > Edit theme > Course > Accessibility > Course Focus Outline Colour) that allows you to add a visible focus outline and choose a colour for it so that users can see where they are on a screen at any given point. This fulfils WCAG 2.4.7 Focus Visible, which is a double A requirement.

Here you can see we have given the focus box a yellow outline and focus is currently on the Next button in this narrative component:

Color contrast

Not every learner with a visual impairment will need to use a screen reader. They may have color blindness, generally poor eyesight, or dyslexia. As a result, not having adequate color contrast in your course could make content unreadable.

By color contrast, we mean enough contrast between the background color and the text color that sits on top. A document such as the one you are reading, with black text on a white background, can obviously fulfill this requirement. But less obvious combinations can cause problems. There are a number of free tools available online that are easy to use and can quickly run an automated color contrast check.

Let’s take a look at one used to measure content in Evolve:

Here we have used the tool to measure the contrast between the black text and the grey background on the left of the screenshot. You can see on the analyzer tool that this contrast passes the test.

With Evolve’s Theme Editor, there is large scope to change the color combinations within your course. When choosing your color scheme, you can check with each choice that you are providing sufficient contrast between text and background color, and adjust your colors accordingly.

You can also use the extensive options for color in Evolve to create specific high contrast pieces of content, should you wish. Keep in mind, there is no greater contrast than black and white.

Use color contrast tools and talk to your learners to see what works best. Windows 10 and Mac computers both have their own high contrast modes that allow the user to select from a range of different options. Evolve content will be displayed in high contrast when these settings are enabled.

Web links

It is best practice to give any links to external sites a contextual name. A link would read "visit the Intellum website" rather than "click this link to visit the Intellum website."

The reason for this is if you include more than one link on a page that is just titled "link" or "click here," there is no context for the learner to differentiate between them. Screen readers have the function to jump between links, so if the links are all named "here" a learner could easily get confused and miss some vital information that is being linked to.

It’s also a good idea to warn learners that a link is going to open in a new window, so they have a clear sense that they will be navigating outside the course. This could be a clear warning at the start of a course, or an indication every time a link appears. It’s generally not a good idea to have links opening in the same window when in an eLearning course hosted on an LMS, as they can affect the course’s tracking.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.