Accessibility in E-learning with POUR Principles

Web Content Accessibility Guidelines (WCAG 2.2) 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 POUR principles when designing e-learning course or purchasing them from a company like Skillcast?

Key takeaways

• WCAG 2.2 stipulates that e-learning content must be perceivable, operable, understandable and robust (POUR).
• Perceivable includes images, how you structure pages and colour use.
• Operable: user interface components and navigation must work with other input methods.
• Understandable involves making your user interface clear and concise, where learners can explore content at their own pace.
• Robust: content can be interpreted reliably by a wide variety of assistive technologies.
• Creating a culture of compliance is more vital than ever, and inclusivity is one of five key challenges CCOs need to address.
  
  

POUR principles in action

1. Perceivable – available to one of the senses
2. Operable – works with inputs other than a mouse
3. Understandable – clear, concise content
4.  Make your e-learning robust
5. Tackling other compliance challenges

1. Perceivable - available to one of the senses

Information and user interface components must be presented to learners in a way they can perceive. This means content needs to be available to at least one of their senses, encompassing images, how you structure pages and your use of colour.

A. Non-text information

1. Informative images must be clearly explained in alt text
2. Decorative images must have no description - alt text should read ""
3. Images that serve as a link/button must have an alt description of what they do
4. Complex images need a longer textual description as they can be difficult to interpret
5. Only decorative images should go in CSS. Informative images must be in HTML.
6. Radio buttons/checkboxes must be associated with their labels, e.g. use a matching ID attribute in the source code

B. Video/animations

1. Must include synchronised captions, identify speakers and describe any relevant background
2. Must include a voice-over to explain what’s going on with the visuals
3. A transcript must be made available via a link or button
4. Auto-play should be avoided - let the learner control the action
5. Video controls must be keyword accessible, labelled and provide alt text (e.g. play, pause)
6. Avoid flashing content as it can cause distress or seizures
7. Learners must be able to hide/pause animations over 5 seconds using a button that is noticeable, labelled and keyboard accessible

C. Structure and presentation

1. Headings - all logical headings must be coded with <h1>, <h2>, <h3>
2. Lists – all logical headings must be coded with <ul>, <ol>, <li> (not - or * etc)
3. Tables – should be used for true tabular content, not positioning/layout on the screen
4. Frames - if <frame> or <iframe> are used they must be given clear, descriptive title attributes (not visible on screen)

D. Distinguishable information

1. Minimum colour contrast ratio: regular text 4.5:1 / large or bold text (18pt+/bold 14pt+) 3:1
2. Informational graphics (icons, charts etc.) – 3:1 contrast versus background/adjacent colours
3. Colours should still work when switched to high-contrast mode in their browser
4. Backgrounds may cause discomfort (e.g. dyslexic users) so provide a light tone or build for high-contrast
5. 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 trackpad, so your user interface components and navigation must work with other input methods.

2.1 Functionality

A. Keyboard accessibility - navigate/interact with the keyboard alone

1. Link/Button – reach with tab, activate with enter/spacebar
2. Radio button/checkbox - reach with tab, activate with spacebar (arrow key navigation within a set of radio buttons)

B. Keyboard focus - learners must be able to identify which item is in focus

1. Only interactive items must receive the keyboard focus (blocks of text must not)
2. Focus must be indicated by a visible border around links or a colour change in buttons
3. Unless new content is added to the page, the keyboard focus must not move unexpectedly

C. Dynamic page content - focus needs to be logical

1. Focus needs to be set to the start of the page when it first displays
2. Focus must be set to new content when it is added upon learners' interaction (e.g. pop-up)
3. If learners close a pop-up, the focus must return to the link or button that activated it

D. Content order

1. Content order as accessed by tab should be logical (usually the same as in the source code)

2.2 Navigation

A. Consistent navigation

1. Buttons should be sufficiently differentiated from non-interactive content (e.g. colour/shape)
2. Next/back buttons must appear in the same location, with the same appearance and label (visible and alt) on each page

B. Progress indication

1. Course duration provided should take into account that learners with a disability may take longer
2. Avoid displaying tight completion times that pressure the learner
3. Show a clear progress indicator at each point in the course, e.g. 'Page 3 of 20'
4. Avoid using colour alone to show progress or identify the completed sections

C. Size of navigation buttons

1. Buttons must be large enough and surrounded by empty space to select with ease using a mouse or finger (on touchscreens)

3. Understandable - clear, concise content

Information and operation of the user interface must be understandable. This means clear and concise, and learners can explore the content at their own pace.

A. Text formatting

1. Sans-serif fonts
2. Left-align (never justified) excepted labels that can be centred
3. Sparing use of capitalisation and italic
4. No text effects, e.g. shadow, reflection or glow

B. Images of text

1. All text must be native in HTML
2. No images with informative text (even with Alt) as they don’t work with high contrast and may dither with resizing

C. Resizing text

1. Content should remain available, maintain its layout and display legibly when enlarged 200% using zoom functionality in browsers

D. User instructions

1. Use the ‘select’ rather than ‘click’
2. Do not refer to items that learners need to interact with by their location or colour alone

E. Writing style

1. Use plain language - simple and clear wording (avoid jargon, and archaic words)
2. Reduce use of abbreviations and acronyms or display them in full extension when first used
3. Keep sentences short
4. Do not use double negatives
5. Give each section a clear and descriptive heading
6. Separate the content into paragraphs with a maximum of 4-5 lines
7. Place key information at the start of each paragraph
8. Use bullet points to bring out key points
9. Aim for a Flesch reading ease test score of 60 or higher

F. Required behaviours/actions

1. Use native HTML for links <a>, buttons <button> and radio buttons/checkboxes <input>
2. For custom interactive components (e.g. drag and 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 an image with alt – that they will open/appear in a new tab or result in a document download (provide the size)
3. Don’t use generic terms like “click here”, be descriptive and accurate (e.g. “Select to contact compliance officer”)

G. Multiple-choice questions

1. Make it clear how many choices need to be selected
2. Do not use colours or images alone to identify correct/incorrect choices
3. 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.

1. Test content with JAWS/other assistive technologies
2. Consider using hidden content (placed off-screen) to aid learners with certain difficulties
3. 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 it.

Tackling other compliance challenges

Compliance has always been an issue that affects companies, but events like the global financial crisis have raised the profile of governance in the finance industry and beyond.

Against this backdrop, creating a culture of compliance within your organisation is more crucial than ever. Inclusivity is one of five key challenges that we have identified that every chief compliance officer (CCO)needs to address. Read about the others in our free eBook.

POUR principles: FAQs

Why are the POUR principles important?

They help designers and developers ensure e-learning courses, websites, apps, online systems and digital documents are usable by all, regardless of ability, technology or device. They’re a valuable framework for building inclusivity by design.

How can you apply POUR in practice?

By training teams on accessibility basics, integrating the principles into design and quality assurance (QA), conducting audits and user testing, and documenting policies aligned with POUR.

What’s the simplest way to remember POUR?

Everyone can sense it (perceivable), use it (operable) and follow it (understandable), and it works for everyone, now and later (robust).

Looking for more compliance insights?

Our Essentials Library contains e-learning content designed to help organisations meet fundamental compliance requirements. If you’re looking for focused training, our training packages offer a complete solution for your compliance programme.

Our e-learning courses are designed to engage employees with our microlearning library, which was created to support knowledge retention.

Our Compliance Portal also features a range of tools to digitise and automate your compliance learning. These include our:

• Learning Management System (LMS)
• Policy Hub
• Compliance Register
• Compliance Surveys
• Compliance Declarations
• AI Digital Assistant (Aida)

If you’d like to access leading insights and compliance tips, you can browse our free resources by topic to find guides, modules, compliance bites and more.