POUR Principles of Accessibility in eLearning

But what do these terms mean in practice? And how can you apply POUR principles when purchasing or designing e-learning courses?

To help, we've created a simple but comprehensive checklist to ensure that your e-learning is accessible for all learners. Conscious to practice what we preach, if you prefer, you can download a checklist in PDF or fully editable Word format rather than read on...

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

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 it does
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 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 keyword 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 track-pad, 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, colour change in buttons
3. 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

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 & label (visible and Alt) on each page

B. Progress indication

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

C. Size of navigation buttons

1. 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

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, 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, archaic words)
2. Reduce use of abbreviations & 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 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 & 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 needs to address. Read about the others in our free eBook.

Looking to learn more about e-learning & compliance?

If you'd like to stay up to date with best practices, industry insights and key trends across regulatory compliance, digital learning, EdTech and RegTech news subscribe to Skillcast Compliance Bulletin.

To help you navigate the compliance landscape we have collated searchable glossaries of key terms and definitions across complex topics including GDPR, Equality and Financial Crime.

You can follow our ongoing YouGov research into compliance issues, attitudes and risk perceptions in the UK workplace through our Compliance Insights blogs.

And last but not least, we have 60+ free compliance training aids, including assessments, best practice guides, checklists, desk-aids, eBooks, games, handouts, posters, training presentations and even e-learning modules!