Before and After: Accessible Course Design
A companion to POUR for Instructional Designers
Each example shows a common accessibility barrier in an Articulate Rise 360 lesson and the same block after it has been fixed. The examples use Rise, but the same barriers and fixes apply to any tool or format you build in. Wherever you work, use the tool's own alt text fields, heading styles, list styles, and caption options. Each one lists the related Web Content Accessibility Guidelines (WCAG) success criteria.
Some barriers involve more than one principle. Each one is grouped under the principle where it is easiest to remember, and every related success criterion is listed.
Perceivable
Learners can take in the content through at least one sense.
Alt text that describes the image
WCAG 1.1.1 Non-text Content (Level A)
Before: alt text is the file name
Rise image block
Learners completing each module
Alt text: chart_final_v2.png
A screen reader says: "chart final v2 dot png, image." The data is lost.
After: alt text describes the chart
Rise image block
Learners completing each module
Alt text: Bar chart of learners completing each module: Writing Alt Text, 92%; Captioning Video, 78%; Testing with a Keyboard, 54%.
A screen reader says: the same data a sighted learner sees.
Captions and a transcript for video
WCAG 1.2.2 Captions, Prerecorded (Level A); 1.2.1 Audio-only and Video-only (Level A)
Before: video with no captions or transcript
Rise video block
Four Principles of Accessible Courses
Problem: No captions and no transcript. Learners who are Deaf or hard of hearing, or who are watching without sound, miss the narration.
After: captions on, transcript linked
Rise video block
Four Principles of Accessible Courses
Fixed: Captions can be turned on, and a transcript is linked below the video.
Theme colors with enough contrast
WCAG 1.4.3 Contrast, Minimum (Level AA)
Before: light gray text and a gold button
Rise text block and button
Problem: Light gray text on white is about 2.9:1, and white on the gold button is about 3.1:1. Both are below the 4.5:1 minimum. The sample reads: "Submit your reflection by Friday to receive credit" and "Submit reflection."
After: dark text and a navy button
Rise text block and button
Submit your reflection by Friday to receive credit.
Submit reflectionFixed: Near-black text on white is about 16:1, and white on the navy button is about 15:1.
Live text instead of a text-heavy infographic
WCAG 1.4.5 Images of Text (Level AA); 1.1.1 Non-text Content (Level A)
Before: steps saved inside an image
Rise image block with an infographic
Alt text: infographic
Problem: The title and four steps are pixels, not text. Screen readers get one word, text blurs or gets cut off when zoomed, and learners cannot copy, translate, or restyle it. Long alt text would not fix this, because a learner cannot skim alt text or move between its steps.
After: steps as a live numbered list
Rise heading block and numbered list block
Writing alt text in 4 steps
- Look at the image in context. What does the learner need from it on this page?
- Name its purpose. Is it informative, functional, or decorative?
- Write one or two sentences. Lead with the key point. Skip "image of."
- Move details out of the image. Put data and steps in live text nearby.
Fixed: The same content is a heading and a numbered list. Screen readers announce "list, 4 items," and the text resizes and reflows with the page.
Feedback that does not rely on color
WCAG 1.4.1 Use of Color (Level A); 4.1.3 Status Messages (Level AA)
Before: results shown by color alone
Custom feedback in an embedded Storyline block
Which of these needs alt text?
Problem: Only a green or red border shows which answer is correct (green on the photo, red on the border). Learners with color vision deficiencies and screen reader users get no result.
After: results stated in text
Custom feedback in an embedded Storyline block
Which of these needs alt text?
Fixed: A text label states each result, the border style also differs, and the feedback is announced to screen readers.
Operable
Learners can navigate the course and complete every interaction, with or without a mouse.
A keyboard path for drag-and-drop
WCAG 2.1.1 Keyboard (Level A); 2.5.7 Dragging Movements (Level AA)
Before: cards move only by dragging
Rise sorting activity
Drag the card to a pile
Problem: Cards move only by dragging. Learners who use a keyboard, a switch, or voice control may not be able to finish the activity.
After: a knowledge check that works by keyboard
Rise multiple choice knowledge check
Which principle does "captions on a video" support?
Fixed: Learners reach each option with Tab or the arrow keys and choose it with Space.
Button and link labels that name the destination
WCAG 2.4.4 Link Purpose, In Context (Level A); 2.4.6 Headings and Labels (Level AA)
Before: “Click here” and “Learn more”
Rise button block and text block
Need a checklist for writing alt text?
Click hereWCAG 2.2 adds nine criteria. Learn more
A screen reader's link list: "Click here," "Learn more." Neither label says where it goes.
After: labels that name the destination
Rise button block and text block
Need a checklist for writing alt text?
Download the alt text checklist (PDF)WCAG 2.2 adds nine criteria. Read the W3C summary of what's new in WCAG 2.2
Fixed: Each label makes sense on its own and names the file type for downloads.
Real headings learners can navigate by
WCAG 1.3.1 Info and Relationships (Level A); 2.4.6 Headings and Labels (Level AA)
Before: bold paragraphs that look like headings
Rise paragraph blocks, some set to bold and enlarged
Writing useful captions
Captions should match the audio word for word.
Identifying speakers
Name each speaker when the voice changes.
Structure: every line is a paragraph (P). The titles look like headings but are missing from the headings list, so screen reader users cannot jump to them.
After: real Heading 2 and Heading 3 blocks
Rise heading, subheading, and paragraph blocks
Writing useful captions
Captions should match the audio word for word.
Identifying speakers
Name each speaker when the voice changes.
Structure: the section title is a Heading 2 and the subsection is a Heading 3, under the lesson title (Heading 1). A screen reader says "Heading level 2, Writing useful captions," and learners can jump between headings.
Understandable
Learners can understand the content and predict how the course behaves.
Quiz instructions that say what to do
WCAG 3.3.2 Labels or Instructions (Level A)
Before: no instruction on how many to pick
Rise multiple response knowledge check
Which items need alt text? Select.
Problem: Learners cannot tell whether to choose one answer or several.
After: the question says how many to pick
Rise multiple response knowledge check
Which items need alt text? Select all that apply. There are 2 correct answers.
Fixed: The question says how many answers to choose.
One label for the same action
WCAG 3.2.4 Consistent Identification (Level AA)
Before: three labels for the same button
Rise continue blocks after three sections of one lesson
Problem: Three labels for one action make learners stop and wonder whether each button does something different.
After: one label used every time
Rise continue blocks after three sections of one lesson
Fixed: The same action has the same label throughout the course.
Plain language in place of jargon
WCAG 3.1.5 Reading Level and 3.1.3 Unusual Words (Level AAA). Not required for AA, but plain language helps every learner.
Before: a long sentence full of jargon
Rise paragraph block
Leveraging synchronous and asynchronous modalities, learners will operationalize POUR heuristics to remediate non-conformant artifacts prior to deployment.
Problem: One long sentence with stacked jargon. Learners spend effort decoding the wording instead of the content.
After: short sentences in everyday words
Rise paragraph block
In this lesson, you will check your course files against the four POUR principles. Then you will fix any problems before you publish.
Fixed: Short sentences in active voice, with everyday words.
Robust
Assistive technology can read and interpret the content correctly.
A title on every embedded frame
WCAG 4.1.2 Name, Role, Value (Level A)
Before: an embed with no title
Rise embed block code
<iframe src="https://webaim.org/resources/contrastchecker/"></iframe>A screen reader says: "frame." Learners do not know what the embedded content is until they enter it.
After: an embed titled for its content
Rise embed block code
<iframe title="WebAIM contrast checker" src="https://webaim.org/resources/contrastchecker/"></iframe>A screen reader says: "WebAIM contrast checker, frame."
Rise settings to check
Rise turns some features on by default. Check these settings in every course, because the defaults can create accessibility barriers.
Turn off zoom on click
WCAG 1.1.1 Non-text Content (Level A) when the image is marked decorative; recommended practice for informative images
Rise turns on zoom for image blocks by default. But a working button makes the image functional. If the image is marked decorative, learners can open an image that has no text alternative, which fails 1.1.1. For informative images with alt text, the button passes but is redundant: screen reader users already get the alt text, and sighted learners can enlarge the page with browser zoom or a pinch. Each zoom button is one more stop for keyboard users to tab past.
Before: marked decorative, zoom left on
Rise image block: decorative banner photo
Alt text: none (marked decorative)
Problem: Keyboard and screen reader users reach a working zoom button, open the enlarged image, and get no description of what they are looking at.
After: zoom turned off
Rise image block: decorative banner photo
Fixed: No button. Decorative images are skipped by screen readers, and informative images are read by their alt text. Learners who want a closer look use browser or device zoom.
In Rise: Turn off zoom in the settings of every image block, whether it is decorative or informative. Check this again whenever you add or duplicate an image block, because zoom is on by default and copies keep the original's settings.
Choose a theme color that keeps focus visible
WCAG 2.4.7 Focus Visible (Level AA); 1.4.11 Non-text Contrast (Level AA)
Rise applies the accent color you pick in Theme settings to interactive elements across the course. A light accent can make the keyboard focus indicator hard or impossible to see against a white page. Keyboard users then lose track of where they are.
Before: light accent, faint focus outline
Rise continue button with keyboard focus
Problem: The pale gold outline is about 1.4:1 against white, well below the 3:1 minimum.
After: dark accent, clear focus outline
Rise continue button with keyboard focus
Fixed: The navy outline is about 15:1 against white and easy to follow from one control to the next.
In Rise: Before you build, check your accent color against white in a contrast checker and aim for at least 3:1. Then preview the course and press Tab through a lesson to confirm you can always see where focus is. Keep light brand colors for images and decoration.
Get expert feedback on your course
L'Etoile Education reviews online courses and e-Learning against WCAG 2.2 AA and shows your team how to fix what it finds.
Book a consultation with Dr. Nicole L'Etoile or email nletoile@letoile-education.com.