Create Accessible Content in Evolve

Who is my audience?

When creating accessible content, your first step should be to find out as much about your audience’s needs as you possibly can. That means talking to people - your or your clients’ HR departments, disability champions, internal QA teams - and most importantly, learners! There is no substitute for getting insight and feedback from learners with specific requirements. They can highlight what they find most frustrating, what works well, etc. The more you can find out about your audience’s needs, the better you can suit your learning to fit them. This could involve setting up user groups to pilot your courses with, asking external organizations to audit your content, and carrying out accessibility testing yourselves.

How do I start?

Accessibility isn’t something that should be ‘tacked on’ to a finished course. It should inform your course creation from the very start. 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, you need to consider how your accessible audience will navigate these to gain as rich a learning experience as the rest of your audience. There are several 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 - Most of the Components and Extensions can be navigated by a screen reader (filter the component pick list or refer to the icon indicators to verify accessibility compatibility). However, aria labels are a crucial addition that can help screen reader users navigate through and interact with your courses successfully.

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

Consider this scenario - a learner using assistive technologies is navigating through your course and arrives at a confidence slider. Whilst every part of the slider can be accessed, read, and navigated through by your learner, unless there is some upfront explanation of the Component, it could be a confusing experience. A Component level aria-label (located at the bottom of the General tab in every Component) can help your user understand what they are being asked to do. It is the first thing they will hear when arriving at the Component.

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 tab to the Submit button and hear the button name read out. 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 upfront aria-label:

“This interaction asks a question related to how confident you are feeling. You will then be told what the labels at either end of the slider scale represent. Use the arrow keys to move through the points on the scale, and make your selection. You can then tab to the Submit button, press Enter, and hear feedback for your choice.”

Aria labels can be a real aid to navigating the course quickly and effectively. However, it is important to only use them when necessary and to keep them as clear and concise as possible. You do not want to be bombarding learners with overly verbose or unnecessary instructions. Simple interactions will not need specific aria instructions. Pilot test with learners and reviewers to strike the right balance.

Alt text for images

When using images in a course, it is possible to tag them with alt text that works much 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 every image in your course - purely illustrative images do not need alt text. 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 can be left out. Leaving the alt tag field blank for an image means it will be ignored by assistive technologies. Excessive use of alt text on purely illustrative images in your course will 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 colored chalk. Two headings appear at the top left and top right of the image, in different colored 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 chunks, 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 (we will go into more detail on accessible pdfs and linking to other pages later in this document), but note that the preferable option will always be to not direct learners elsewhere to alternatives, but rather ensure your course is an inclusive experience for all.

Check Labels with Live Preview

A great feature of Evolve’s Live Preview is that you can review all the aria labels and alt text that are present in your course by making them visible (and see which images do not have an alt tag). You do this via the More Actions menu, which can be accessed by selecting the three dots in the center of the Live Preview toolbar.

Keyboard operability

Keyboard operability, outside of assistive technology use, is an important factor that works in Evolve by default. This means a learner can navigate quickly and easily through the course just by using the keyboard, with no need for a mouse. The learner primarily uses the arrow and tab keys to navigate through the Course, and the Enter key to activate interactive elements. The navigation order around the course content is logical and intuitive.

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 two-color visible focus outline so that users can see where the focus is on a screen at any given point. (This fulfills WCAG 2.4.7 Focus Visible, which is a double A requirement). Here you can see a single color focus on an Accordion Component item.

Color contrast

Not every learner with a visual requirement will necessarily need to use assistive technologies. They may have color blindness, generally poor eyesight, or dyslexia - not having adequate color contrast in your course could make content unreadable. By color contrast, we mean enough contrast between a 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 fulfill this requirement. But less obvious combinations can cause problems. There are several 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:

Here we have used the tool to measure the contrast between the black text and the gray background in 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 huge scope to change the color combinations within your course - so 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 to. Use color contrast tools and talk to your learners to see what works best. Windows 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

Any links to external sites or internal locations require a contextual name. So a link would read ‘visit the intellum website’ rather than ‘select 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 an external link is going to open in a new window, so they have a clear sense that they will be navigating outside the course. It’s 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.