The current Web Content Accessibility Guidelines (WCAG 2.0) stipulate that e-learning content must be Perceivable, Operable, Understandable and Robust (POUR).
But what do these terms mean in practice? And how can you apply these principles when purchasing or designing e-learning courses?
To help, we've created a simple but comprehensive checklist to help you make sure that your e-learning is accessible for all learners.
1. Perceivable - Available to one of their senses
Information and user interface components must be presented to learners in a way that they can perceive. This means that the content needs to be available to at least one of their senses.
This encompasses images, how you structure pages and your use of colour.
A. Non-text information:
- Informative images must be clearly explained in Alt text
- Decorative images must have no description - Alt text should read ""
- Images that serve as a link/button must have an Alt description of what it does
- Complex images need a longer textual description as they can be difficult to interpret
- Only decorative images should go in CSS. Informative images must be in HTML.
- Radio buttons/checkboxes must be associated with their labels, e.g. use matching ID attribute in the source code
- Must include a synchronised captions, identify speakers & describes any relevant background
- Must include a voice-over to explain what’s going on with the visuals
- A transcript must be made available via a link or button
- Auto-play should be avoided - let the learner control the action
- Video controls must be keyword accessible, labelled & provide alt text (e.g. Play, Pause)
- Avoid flashing content as it can cause distress or seizures
- Learners must be able to hide/pause animations over 5 seconds using a button that is noticeable, labelled and keyword accessible
C. Structure and presentation:
- Headings - all logical headings must be coded with <h1>, <h2>, <h3>
- Lists – all logical headings must be coded with <ul>, <ol>, <li> (not - or * etc)
- Tables – should be used for true tabular content, not positioning/layout on the screen
- Frames - if <frame> or <iframe> are used they must be given clear, descriptive title attributes (not visible on screen)
D. Distinguishable information:
- Minimum colour contrast ratio: Regular text 4.5:1 / Large or bold text (18pt+/bold 14pt+) 3:1
- Informational graphics (icons, charts etc.) – 3:1 contrast versus background/adjacent colours
- Colours should still work when switched to high-contrast mode in their browser
- Backgrounds may cause discomfort (e.g. dyslexic users) so provide a light tone or build for high-contrast
- Don't only use colours to convey meaning (e.g. pie chart) add patterns or text in charts, underline links and display important information in bold
2. Operable - Works with inputs other than a mouse
Not everyone uses a mouse or track-pad, so your user interface components and navigation must work with other input methods.
A. Keyboard accessibility - Navigate/interact with the keyboard alone
- Link/Button – Reach with Tab, activate with Enter/Spacebar
- Radio button/Checkbox - Reach with Tab, activate with Spacebar (arrow key navigation within set of radio buttons
B. Keyboard focus - Learners must be able to identify which item is in focus
- Only interactive items must receive the keyboard focus (blocks of text must not)
- Focus must be indicated by a visible border around links, colour change in buttons
- Unless new content is added to the page, the keyboard focus must not move unexpectedly
C. Dynamic page content - The focus needs to be logical
- Focus needs to be set to the start of the page when it first displays
- Focus must be set to new content when it is added upon learners interaction, (e.g. pop-up)
- If learners close a pop-up, the focus must return to the link or button that activated it
D. Content order
- Content order as accessed by Tab should be logical (usually the same as in the source code)
A. Consistent navigation
- Buttons should be sufficiently differentiated from non-interactive content (e.g. colour/shape)
- Next/Back buttons must appear in the same location, with the same appearance & label (visible and Alt) on each page
B. Progress indication
- Course duration provided should take account that learners with a disability may take longer
- Avoid displaying tight completion times that pressure the learner
- Show clear progress indicator at each point in the course eg “Page 3 of 20”
- Avoid using colour alone to show the progress or identify the completed sections
C. Size of navigation buttons
- Buttons must be large enough & surrounded by empty space to select with ease using a mouse or a finger (on touchscreens)
3. Understandable - Clear concise content
Information and the operation of user interface must be understandable. This means that it must be clear and concise, and learners can explore the content at their own pace.
A. Text formatting
- Sans-serif fonts
- Left-align (never justified) excepted labels that can be centred
- Sparing use of capitalisation and italic
- No text effects eg shadow, reflection, glow
B. Images of text
- All text must be native in HTML
- No images with informative text (even with Alt) as they don’t work with high contrast and may dither with resizing
C. Resizing text
- Content should remain available, maintain its layout and display legibly when enlarged 200% using Zoom functionality in browsers
D. User instructions
- Use the ‘Select’ rather than ‘Click’
- Do not refer to items that learners need to interact with by their location or colour alone
E. Writing style
- Use plain language - simple and clear wording (avoid jargon, archaic words)
- Reduce use of abbreviations & acronyms or display them in full extension when first used
- Keep sentences short
- Do not use double negatives
- Give each section a clear and descriptive heading
- Separate the content into paragraphs with a maximum of 4-5 lines
- Place key information at the start of each paragraph
- Use bullet points to bring out key points
- Aim for a Flesch Reading Ease test score of 60 or higher
F. Required behaviours/actions
- Use native HTML for links <a>, buttons <button> and radio buttons/checkboxes <input>
- For custom interactive components (e.g. drag & drops) use WAI-ARIA to answer the questions
- What is the item? What does it do? Links that open new tabs/windows/documents
- Reduce disorientation caused by warning users with text or image with Alt – that they will open/appear in a new tab or result in a document download (provide the size)
- Don’t use generic terms like “click here” be descriptive & accurate (e.g. “Select to contact compliance officer”)
G. Multiple choice questions
- Make it clear how many choices need to be selected
- Do not use colours or images alone to identify correct/incorrect choices
- Announce the explanation/feedback as soon as it appears
4. Make your e-learning robust
Your content must be robust enough that it can be interpreted reliably by a wide variety of assistive technologies. This means using good, well-tested coding practices.
- Test content with JAWS/other assistive technologies
- Consider using hidden content (placed off screen) to aid learners with certain difficulties
- Accessible PDF documents (linked from menu) can aid learners who struggle with navigating/interacting with the content. However, this should only be offered in addition to interactive content, not in place of.
Want to learn more about e-Learning & compliance?
As well as 30+ free training aids, we regularly publish e-Learning & compliance blogs. And, if you're looking for a compliance training solution with accessibility baked-in, why not visit our Compliance Essentials course library.
If you've any further questions or concerns, just leave us a comment below this blog. We are happy to help!