Creating WCAG-compliant eLearning

The Web Content Accessibility Guidelines 2.1 defines what developers and designers should follow when creating online content – including eLearning courses

Are your eLearning courses available to everyone? Or are some elements difficult – or impossible – to access for people with different abilities?

The good news is that creating accessible eLearning is easy to do. And, in most cases, can be the default approach to designing and developing online learning materials.

The Web Content Accessibility Guidelines (WCAG) 2.1 defines the approaches that developers and designers should follow when creating online content – including eLearning courses.

In this article, we’ll explore an overview of the guidelines and how they relate specifically to the content and materials you provide to learners.

• Why is accessibility important?
• WCAG 2.1 - an overview
• Inclusive design
• WCAG 2.1 – key issues and how to resolve them
• Creating accessible eLearning: five key takeaways
• Accessible eLearning
  
  

Why is accessibility important?

Making eLearning accessible is the right thing to do, from an ethical standpoint. After all, you wouldn’t construct a new office that couldn’t be accessed by some of your employees – so why would you create learning that was off-limits for some?

Beyond the fundamental need to make learning available to all of your colleagues, there are clear economic and legal reasons for incorporating accessibility principles into all of your learning.

A single source of knowledge

From a financial perspective, it makes sense to create a single eLearning resource that can be accessed by all colleagues. The other option is to create an alternative version of the course at a later date – and effectively duplicate the effort and expense.

Compliance gaps

If any of your eLearning is inaccessible, then you may find colleagues aren’t receiving the training they need. This can have catastrophic ramifications if the learning has any connection to health and safety, risk or compliance issues. Employers have an obligation to provide adequate training on topics such as these. Failure can (and does) lead to fines and prosecutions.

WCAG 2.1 – an overview

The Web Content Accessibility Guidelines 2.1 build on version 2.0, with the addition of success criteria designed to support:

• Mobile accessibility
• People with low vision
• People with cognitive and learning disabilities

The accessibility guidelines encourage the use of clear, consistent approaches to formatting content and the use of things like images, lists, tables and links. These approaches are, for the most part, good web design practices, but they are vitally important for people with access needs. Web content that doesn’t adhere to the WCAG guidelines can be completely unreadable and unusable for many people.

The WCAG guidelines are categorised into four groups. Web content should be:

• Perceivable
• Operable
• Understandable
• Robust
  
  

Perceivable

Is all of your content perceivable to everyone? Can all of your learners consume all of your content? You may need to provide alternative text or resources so that a person who is deaf, colour blind, low vision or blind can learn effectively.

Operable

Can all users interact with all of your content? You may need to rethink some of your interactive content, carousels, forms, quizzes, buttons, links and menus to ensure they work with assistive technologies such as screen readers, voice browsers and Braille displays.

Understandable

The layout and navigation of your digital content must be clearly labelled and organised so users can understand their options and the implications of their choices. For example, it’s essential that users can scan content before choosing their next step, and can confidently predict where links and menu items lead.

Robust

Your eLearning should be designed for a range of users on a range of devices, ensuring that everyone gets the same high-quality experience.

Inclusive design

The need for accessible eLearning can be treated in three ways:

• Do the least work to ensure your content passes the basic requirements for accessibility
• Create one non-accessible version of your eLearning, and then create a second version that meets accessibility guidelines
• Bake accessibility into everything you do, by default

There are clearly advantages to making accessibility your default way of working. By making sure that everyone understands the issues and how to resolve them, you can create a single learning solution that meets the needs of all learners from day one.

This ensures your learning resources are always accessible, and reduces the overheads of creating, managing and maintaining two parallel learning solutions.

How screen readers turn web pages into synthetic speech

The short video below gives you a glimpse of how screen readers work – and the reality for people who rely on this technology to browse the web and consume learning materials.

Alternative eLearning formats for accessibility

All learners appreciate variety. It’s good practice, for any eLearning project, to offer students a variety of ways to learn. This can make learning more stimulating, and stop students from getting bored, but it’s also useful because different content suits different learning styles.

From an accessibility perspective, alternative content formats can be crucial for helping learners consume information. For example, a podcast could be a useful alternative to long explanatory texts. On the other hand, a workbook might be helpful for people who can’t watch an important video.

Video content should always include closed captions with subtitles and audio descriptions. The content should also be available as downloadable text transcriptions.

WCAG 2.1 – key issues and how to resolve them

The Web Content Accessibility Guidelines 2.1 may look complicated, but the essence of their message is simple: digital content should be easy to perceive, understand and operate for everyone. The guidelines define the different ways that content creators can support people with different needs

We’ll explore all of these factors in more detail, but here’s the long list of accessibility issues that your eLearning will need to address:

• Keyboard navigation
• Images
• Text size and customisation
• Headings
• Lists
• Links
• Forms
• HTML
• Design
• Content
• JavaScript and AJAX
  
  

Keyboard navigation for people who can’t use a mouse

People with sight loss and physical impairments may use their keyboard to navigate through your learning content. Instead of looking at the options and clicking links, they may listen to a readout of your content before choosing what to click. Or they may simply tab through the menus, links and headings before moving on.

Key considerations

• Offer a ‘Skip to main content’ option so people can skip past your navigation links
• Ensure there are no dead-ends or unreachable links when tabbing through content
• Keyboard focus is crucial – this is an outline around the active link to show users where the ‘cursor’ is located. Make sure your eLearning leaves the keyboard focus visible
• Forms and buttons must also be accessible using the tab key
  
  

Images require alternative text

Some of your learners will use screen readers to convert the text on the screen to audible speech or to braille. Screen readers cannot interpret images, which is one reason why the HTML code for images includes the option to add ‘alternative text’ or alt text. This is your chance to describe an image so that anyone using a screen reader will understand what the image includes.

Key considerations

• Informative images need informative ALT text, so that no user misses out on vital details
• Decorative images have null ALT text or are set as background images
• Text should never be embedded within images
• Links should never be embedded purely within decorative images
  
  

Text size should be customisable

The way we see text is a very personal thing. Some people are happy to read small font sizes, but many other people like to increase font sizes when reading on a screen. And for others, the contrast between the text colour and the background makes a big difference when reading text.

Key considerations

• Text should be re-sizable
• Text must remain legible and visible when resized
• Text should be at least 8pt in size
  
  

Headings must be clearly labelled

Unsurprisingly, many people who use screen readers like to skip around a page to see what it contains before deciding where to start. While eLearning is more likely to be consumed in a linear format, from start to finish, there are many content styles that require learners to skip back and forth through content.

This means headings and subheadings are just as important for users with accessibility needs. The appearance and inclusion of headings and subheadings is not the only consideration: headings must also be correctly labelled with HTML and properly nested.

Key considerations

• Every page must have a heading one <h1>
• Day heading one should clearly describe the contents of the page
• Every page section should have its own heading
• Headings should stand out from regular text (at least two points larger than regular text)
  
  

Lists – labelled accurately and clearly

Labelling lists is important for clarity – and it’s just good practice in general web design terms.

Key considerations

• Lists must be labelled as either ordered (numbered) or unordered (bullet points)
• Lists should not be broken up or interrupted by other content
  
  

Links should tell users about the destination

Do all of your links explain what happens when it’s clicked? Generic link text like ‘more information’ or ‘click here’ is best avoided – and replaced with clear information like ‘Accessible eLearning – read more’.

Key considerations

• Links should make sense out of context
• Avoid using the same text for a series of links (eg ‘Next page’ or ‘Click here’)
• Link text should be front-loaded so the most important keywords are at the start of the link text
• Links should stand out visually
• Users should be informed when links open a new window
  
  

Forms must be labelled properly

There are a few simple steps to take to create forms that are compatible with assistive technologies.

Key considerations

• All form fields should be labelled clearly, with the label before the field (not with the label inside the field)
• Fieldsets and legends can be used to break up long forms
• Long lists in dropdown menus can be grouped using the <optgroup> tag
  
  

HTML code must be correctly marked up

HTML code provides a simple way to communicate information online. Anyone using a web browser relies on the quality of the mark-up to make sense of the information in front of them.

This is equally true for people with access needs. Properly marked-up HTML code ensures that screen readers and other accessibility aids can interpret the information for all audiences.

Key considerations

• All content should be contained within structural HTML tags (paragraphs, headings, list items, labels and blockquotes)
• Content should be organised and ordered logically
• Give learners the option to skip to the main content
• Tables must clearly define the headings – and should only be used for data tables (not for layout)
  
  

Design: the considerations for eLearning

While the design of your eLearning is usually dictated by your brand guidelines and the needs of your audience, there are some subtle changes you can make to ensure your content is accessible to everyone.

Key considerations

• Use sufficient contrast between colours. Google’s Developer Tools, included in their Chrome browser, provides information about the contrast levels on any web page
• Avoid placing text on background images with changing or fading colours
• Don’t use red and green alone to differentiate items on a page
• Keep related items close to each other
  
  

Crafting content for eLearning

The requirements for accessibility are not dissimilar to the requirements of clear, concise web content. In short, your content should be descriptive, well organised and easy to control and navigate.

Key considerations

• Page titles should be descriptive – and never shared by multiple pages
• Sub-headings should be used to divide long passages of text
• Users should have options to control sliders and carousels
• Instructions should not rely on visual clues
  
  

Making JavaScript and AJAX accessible

These two technologies enable different kinds of functionality and interaction online, but they don’t usually work well with adaptive technologies. There are some simple workarounds to ensure you can use JavaScript or AJAX without frustrating any of your learners.

Key considerations

• All functions must work without AJAX or JavaScript. If they cannot work, consider hiding the element completely
• Ensure on-the-page changes happen below the action (not above or to the right)
• JavaScript and AJAX features should not be mouse-dependent, but also controllable with keyboard controls
  
  

Creating accessible eLearning: five key takeaways

If you only remember five things from this overview of accessibility for eLearning, we hope you’ll hang on to these gems:

1. Keyboard controls are vital
2. Accessible content is clear and easy to use for all users
3. Creating accessible eLearning by default makes good business sense
4. Providing alternative content to suit different user needs is useful for accessibility – and for different learning styles
5. Your eLearning should be perceivable, understandable, operable and robust for all learners

Accessible eLearning

Are you looking for an eLearning solution that will work for all of your learners? We currently offer two options for our clients:

• Our accessible eLearning system. This is a fully accessible, simplified eLearning tool. Courses are constructed using plain text. This means that for users, the experience of using our eLearning is the same as using an accessible website
• Our eLearning + alternative formats. For clients that want an interactive course, we now provide alternative formats by default. A spoken-word audio version is produced in the style of a podcast, giving users a portable and convenient way to learn on their own terms. And a workbook version is downloadable, printable, and compatible with all devices and screen readers

eLearning content: Delivered by Ciphr, powered by Marshalls

Request a free trial

And check how we help you deliver training to a wider audience

Contact us

This content was initially published on Marshallelearning.com (June 2019) and has been uploaded to and lightly amended on Ciphr.com as part of the brand amalgamation in August 2024