Accessibility Auditor

Guide for auditing e-learning content against WCAG 2.1 AA standards.

Quick Audit Checklist

Critical Issues (Must Fix)

• Images have alt text - All informative images have descriptive alt text
• Videos have captions - All video content has synchronized captions
• Keyboard accessible - All interactive elements work with keyboard only
• Color contrast - Text meets 4.5:1 ratio (3:1 for large text)
• Focus visible - Keyboard focus indicator is clearly visible
• No auto-play - Audio/video doesn't play automatically

High Priority (Should Fix)

• Headings structured - Proper heading hierarchy (H1→H2→H3)
• Links descriptive - Link text describes destination
• Forms labeled - All form fields have visible labels
• Error messages clear - Errors identify field and suggest fix
• Audio has transcript - All audio-only content has text alternative
• No flashing - Content doesn't flash more than 3 times/second

Best Practices (Recommended)

• Reading level - Content at 8th grade level where possible
• Consistent navigation - Same elements in same location
• Timeout warnings - Users warned before session timeout
• Skip links - Skip to main content link provided
• Language set - Page language declared in HTML

Audit Report Template

# Accessibility Audit Report

**Course:** [Course Name]
**Date:** [Audit Date]
**Auditor:** [Name]
**Standard:** WCAG 2.1 AA

## Executive Summary

**Overall Status:** [Pass / Fail / Conditional Pass]
**Critical Issues:** [Count]
**High Priority Issues:** [Count]
**Recommendations:** [Count]

## Findings by Category

### 1. Perceivable

#### 1.1 Text Alternatives
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|
| [Issue] | [Page/Screen] | Critical/High/Medium | [Fix] |

#### 1.2 Time-based Media
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

#### 1.3 Adaptable
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

#### 1.4 Distinguishable
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

### 2. Operable

#### 2.1 Keyboard Accessible
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

#### 2.4 Navigable
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

### 3. Understandable

#### 3.1 Readable
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

#### 3.3 Input Assistance
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

### 4. Robust

#### 4.1 Compatible
| Issue | Location | Severity | Recommendation |
|-------|----------|----------|----------------|

## Remediation Priority

### Critical (Fix Immediately)
1. [Issue and location]
2. [Issue and location]

### High (Fix Before Launch)
1. [Issue and location]
2. [Issue and location]

### Medium (Fix in Next Update)
1. [Issue and location]
2. [Issue and location]

## Sign-off

| Role | Name | Date |
|------|------|------|
| Auditor | | |
| Remediation Lead | | |
| Approver | | |

Common Issues and Fixes

Images

Issue: Missing alt text

<!-- Bad -->
<img src="diagram.png">

<!-- Good -->
<img src="diagram.png" alt="Sales process flowchart showing 5 steps from lead to close">

Issue: Decorative image not marked

<!-- Bad -->
<img src="decorative-line.png" alt="decorative line">

<!-- Good -->
<img src="decorative-line.png" alt="" role="presentation">

Color Contrast

Issue: Low contrast text

/* Bad - 2.5:1 ratio */
color: #999999;
background-color: #ffffff;

/* Good - 4.5:1 ratio */
color: #595959;
background-color: #ffffff;

Issue: Color-only indication

<!-- Bad -->
<p style="color: red;">Error in field above</p>

<!-- Good -->
<p style="color: red;"><span aria-hidden="true">⚠</span> Error: Please enter a valid email</p>

Keyboard Navigation

Issue: Mouse-only interaction

<!-- Bad -->
<div onclick="showMore()">Show more</div>

<!-- Good -->
<button onclick="showMore()">Show more</button>

<!-- Or if div is required -->
<div role="button" tabindex="0" onclick="showMore()" onkeypress="if(event.key==='Enter')showMore()">
  Show more
</div>

Issue: Hidden focus indicator

/* Bad */
:focus { outline: none; }

/* Good */
:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Forms

Issue: Missing labels

<!-- Bad -->
<input type="text" placeholder="Email">

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="name@example.com">

Issue: Error not associated with field

<!-- Bad -->
<input type="email" id="email">
<span style="color:red">Invalid email</span>

<!-- Good -->
<input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
<span id="email-error" role="alert">Please enter a valid email address</span>

Headings

Issue: Skipped heading levels

<!-- Bad -->
<h1>Course Title</h1>
<h3>First Topic</h3>  <!-- Skipped H2 -->

<!-- Good -->
<h1>Course Title</h1>
<h2>Module 1</h2>
<h3>First Topic</h3>

Video/Audio

Issue: Missing captions

<!-- Bad -->
<video src="training.mp4" controls></video>

<!-- Good -->
<video src="training.mp4" controls>
  <track kind="captions" src="training-captions.vtt" srclang="en" label="English" default>
</video>

Testing Tools

Automated Testing

Manual Testing

Screen Reader Testing Commands

NVDA (Windows):

• Insert + Down Arrow - Read all
• H - Next heading
• Tab - Next focusable element
• Insert + F7 - Elements list

VoiceOver (Mac):

• VO + A - Read all
• VO + Command + H - Next heading
• Tab - Next focusable element
• VO + U - Rotor (elements list)

Severity Definitions

WCAG Success Criteria Reference

Level A (Minimum)

• 1.1.1 Non-text Content
• 1.2.1 Audio-only and Video-only
• 1.3.1 Info and Relationships
• 1.4.1 Use of Color
• 2.1.1 Keyboard
• 2.4.1 Bypass Blocks
• 3.1.1 Language of Page
• 4.1.1 Parsing

Level AA (Target)

• 1.2.4 Captions (Live)
• 1.2.5 Audio Description
• 1.4.3 Contrast (Minimum)
• 1.4.4 Resize Text
• 2.4.5 Multiple Ways
• 2.4.6 Headings and Labels
• 3.2.3 Consistent Navigation
• 3.2.4 Consistent Identification

File Output

Save reports to: course-template/04-evaluation/reports/

Naming: accessibility-audit-[date].md