The Modern Manual Audit (A Hands-On Lab)
This is a one-page, interactive course designed to bridge the gap between "lived experience" and "professional auditor" by focusing on hands-on diagnosis and prescription.
A Note on Tools
This course presupposes you are using a screen reader like **JAWS**. The goal is to learn the *process*, not to memorize a specific tool's commands.
Module 1: The Core Philosophy & "Cheat Sheet"
Key Insight: Concepts Over Numbers
The most effective auditors don't memorize numbers; they understand the *concepts*. This mental model, P.O.U.R., is the official WCAG structure.
1.1: The P.O.U.R. Mnemonic
- (P) Perceivable: Can the user perceive the content?
- (O) Operable: Can the user operate the interface?
- (U) Understandable: Can the user understand the content?
- (R) Robust: Can assistive technology understand it?
1.2: The Auditor's "Hotlist"
| Symptom (What you hear) | Diagnosis (The "Why") |
|---|---|
| "image, spacer.gif" | 1.1.1 (Non-text Content) |
| "My headings list is empty" | 1.3.1 (Info and Relationships) |
| "This form field just says 'edit text'" | 1.3.1 (Info and Relationships) |
| "My screen reader just says 'button'" | 4.1.2 (Name, Role, Value) |
| "I clicked 'Add to Cart' and heard nothing" | 4.1.3 (Status Messages) |
Module 1 Check
Which P.O.U.R. principle is violated if an icon button is missing its name?
Module 2: The Non-Visual Auditor's Toolkit
2.1: The 3-Step Audit Process
- Screen Reader First: Establish "lived experience" authority.
- Tools as Cross-Check: Use ANDI or Dev Tools second.
Key Insight: The "Inspect" Method
On the live page, navigate to the element, press your Context Menu key, and select "Inspect" to jump directly to the code.
Module 2 Check
What is the "magic combo" for ANDI to find the accessible name?
Module 3: Audit Lab 1 - The "Bad" Page
Based on the WAI Inaccessible Demo Page.
- Focus Blur Bug: The JavaScript
onFocus="blur();"actively removes focus from links. - Fake Links: Interactive images missing
<a>tags are not in the tab order.
Module 3 Check
Why are the "News" and "Facts" links inoperable?
Module 4: ARIA Crash Course Lab
Lab 4.1: Naming the "Nameless" (4.1.2)
Bad Code: <button>X</button>
Lab 4.2: Announcing State (4.1.2)
This button must toggle aria-expanded.
Lab 4.3: Announcing Updates (4.1.3)
Lab 4.4: Describingby vs Labelledby
- aria-labelledby: Replaces the Name (Analogy: Title).
- aria-describedby: Adds a Description (Analogy: Footnote).
Module 5: Audit Lab 2 - The "Final Exam"
Auditing the W3C Modal Dialog Example.
Key Bug: Heading Hierarchy
The <h2> ("Page Contents") appears before the <h1> in the code, a real 1.3.1 failure.
Module 6: Professional Polish
"My expertise isn't just from taking the course; it's from being one of its original architects".
- Lead with JAWS findings first to show lived experience authority.
- Use plain English (e.g., "Link Purpose Failure") if you forget the WCAG number.
Module 7: Appendices
- (P) Perceivable: Alt text, Contrast, Layout.
- (O) Operable: Keyboard, Skip Links, Link Purpose.
- (R) Robust: ARIA Name, Role, State, and Value.