Accessibility Before and After

ProTraining Solutions sample course

Screen 1 of 1

Accessibility sample

Before and after: fixing a training slide

Many training courses were built before accessibility was part of the checklist. They look fine to most learners but lock out people who use a keyboard, a screen reader, captions, or who have low vision or color blindness.

This sample takes one typical eLearning slide, a Daily Equipment Check, and walks through seven common problems we find in audits. For each one, you'll see what was wrong, who it affects, the WCAG 2.1 success criterion it fails, and the fix, working live on the page.

About WCAG 2.1 AA: the Web Content Accessibility Guidelines are the standard the U.S. Department of Justice adopted for state and local government web content under ADA Title II. Level AA is the conformance level required.

Before

The original slide

Here is the slide as it was built. The numbers mark the seven problems. A full text description follows the picture.

Original Daily Equipment Check slide, with seven numbered problems A training slide with a pale gray title and pale gray instructions, marked 1. A photo of a machine with no description, marked 2. Two status dots, one red and one green, with no labels, marked 3. A drag-and-drop area for putting steps in order, marked 4. A video player with no caption button, marked 5. A text box that only says Name inside it, marked 6. A Submit button, marked 7, which shows no outline when selected with the keyboard. Daily Equipment Check Watch the video, check the lights, then drag the steps into order. Drag steps here Name Submit 1 2 3 4 5 6 7
The original slide. Problems are numbered 1 to 7 and described below.

What the audit found

  1. Low-contrast text. The title and instructions are pale gray on white.
  2. No alternative text. The machine photo has no description for screen reader users.
  3. Color-only meaning. Red and green dots show machine status with no text or shape.
  4. Mouse-only activity. The ordering activity only works by dragging with a mouse.
  5. No captions. The video has no captions or transcript.
  6. Unlabeled field. The text box relies on placeholder text that disappears when you type.
  7. No visible focus. Keyboard users can't see which button is selected.

Problem 1 of 7

Low-contrast text

WCAG 2.1 SC 1.4.3 Contrast (Minimum), Level AA

Before

Light gray text on white, about 2.2 to 1. Hard to read for learners with low vision, older learners, and anyone on a phone in bright light.

After

Dark slate text on white, about 11.7 to 1. Body text needs at least 4.5 to 1, and large text needs at least 3 to 1.

The colors compared

Before: light gray #B0B0B0
Contrast 2.2 to 1, fails
After: dark slate #2F3A40
Contrast 11.7 to 1, passes

Problem 2 of 7

No alternative text

WCAG 2.1 SC 1.1.1 Non-text Content, Level A

Before

The image had no alt text, so a screen reader announced only "image" or the file name, and blind learners missed what the slide was about.

After

The image has alt text that says what a learner needs to know from it, not just what it looks like.

Its alt text: "Packaging machine with its clear safety guard closed and the green Running light on."
Tip: Purely decorative images should be hidden from screen readers instead, so learners don't hear clutter.

Problem 3 of 7

Color-only meaning

WCAG 2.1 SC 1.4.1 Use of Color, Level A

Before

A red dot meant "stopped" and a green dot meant "running." About 1 in 12 men has some form of color vision deficiency, and red and green are the hardest pair to tell apart.

After

Each status has a text label and a different shape, so color is a bonus, not the only clue.

Machine status

Problem 4 of 7

Mouse-only activity

WCAG 2.1 SC 2.1.1 Keyboard, Level A

Before

Learners had to drag steps into order with a mouse. Keyboard users, screen reader users, and many people with motor disabilities couldn't complete it.

After

Each step gets a position chosen from a list. It works with a keyboard, mouse, touch, voice control, or screen reader.

Try it: put the daily check steps in order

Problem 5 of 7

No captions or transcript

WCAG 2.1 SC 1.2.2 Captions (Prerecorded), Level A

Before

The demonstration video had no captions. Deaf and hard-of-hearing learners, and anyone in a noisy plant or a quiet office without headphones, missed the spoken steps.

After

The video has accurate, synchronized captions with speaker and sound cues, plus a full text transcript.

A transcript also helps learners who want to review quickly or search for one step. Here is the one for this lesson's video:

Show the video transcript

Narrator: Before each shift, complete the daily equipment check. First, walk around the machine and look for damage, leaks, or loose parts.

Narrator: Next, confirm the clear safety guard is fully closed. The machine won't start with the guard open.

[Machine starts]

Narrator: Start the machine and confirm the status light shows Running. Finally, record your check on the daily log.

Note: Automatic captions are a starting point, not a finish line. They need human review for accuracy, technical terms, and punctuation.

Problem 6 of 7

Unlabeled form field

WCAG 2.1 SC 1.3.1 Info and Relationships and SC 3.3.2 Labels or Instructions

Before

The only label was gray placeholder text inside the box. It vanished as soon as learners typed, and screen readers often didn't announce it.

After

A visible label sits above the field and is linked to it in code. Errors are explained in text, not just a red outline.

Try it

Problem 7 of 7

No visible focus

WCAG 2.1 SC 2.4.7 Focus Visible, Level AA

Before

The course style removed the focus outline. Keyboard users pressing Tab couldn't tell which button was selected.

After

Every button, link, and field shows a thick, high-contrast outline when it has keyboard focus.

Try it

Press the Tab key to move through these buttons and watch the outline.

After

The rebuilt slide

All seven fixes together. It looks cleaner for everyone, and it now works for every learner.

Daily Equipment Check

Complete these checks before every shift. Review the steps, then check the machine status.

Steps

  1. Look for damage, leaks, or loose parts.
  2. Confirm the safety guard is closed.
  3. Start the machine and confirm Running status.
  4. Record the check on the daily log.
  • Running

Check your understanding

Quick check

Answer all four questions. You need 3 of 4 correct to pass, and each answer is final once checked.

1. What is the minimum contrast ratio for regular-size body text at WCAG 2.1 Level AA?
2. A course uses only red and green dots to show pass and fail. Which fix meets WCAG?
3. Why isn't placeholder text inside a box a good label?
4. A drag-and-drop activity has no other way to complete it. Who is most affected?

Results

Your results

Want your courses to look like the "after"?

ProTraining Solutions audits and fixes eLearning courses, videos, and documents to WCAG 2.1 AA, with a checklist and QA report for each item. Start with a free sample audit.

Request a free sample audit