Project 01 · Website accessibility
This case study follows a fictional community learning website from an inaccessible starting point through testing, documented findings, technical fixes, and a verified remediated experience. It shows both what changed and why those changes matter to people using the site.
Training note: This fictional page intentionally contains accessibility barriers for comparison and testing.
Open Path Learning was designed to let visitors review classes and subscribe for updates. In the original version, several controls and content relationships prevent people from completing those tasks reliably.
Open the inaccessible website| Severity | Barrier | WCAG | User impact | Recommended remediation and status |
|---|---|---|---|---|
| Critical | Keyboard access | 2.1.1 | Mouse-only controls blocked task completion. | Replace custom click targets with native controls and verify keyboard activation. Targeted retest: passed |
| Serious | Focus visible | 2.4.7 | Keyboard focus was not visually apparent. | Provide a persistent, high-contrast focus indicator with adequate offset. Targeted retest: passed |
| Serious | Accessible names | 4.1.2 | An icon control and email input lacked reliable names. | Use visible labels and confirm the computed name in the accessibility tree. Targeted retest: passed |
| Serious | Form errors | 3.3.1 | Errors depended on color and were not announced. | Associate specific error text with the field and move focus when submission fails. Targeted retest: passed |
| Moderate | Heading structure | 1.3.1 | Styled text did not expose a logical hierarchy. | Use a meaningful h1–h3 outline that reflects page relationships. Targeted retest: passed |
| Moderate | Color contrast | 1.4.3 | Muted text fell below the AA contrast requirement. | Adjust foreground and background tokens and retest each state. Targeted retest: passed |
| Moderate | Link purpose | 2.4.4 | Repeated “Learn more” links lacked context. | Name the destination or purpose within each link. Targeted retest: passed |
| Moderate | Status messages | 4.1.3 | Success confirmation was not announced. | Expose the update through a polite status region without moving focus. Targeted retest: passed |
The examples below begin with the user barrier, prefer native HTML, use ARIA only when needed, and end with functional verification.
WCAG 2.1.1 · 4.1.2
<div class="submit" onclick="send()">→</div><button type="submit">Subscribe to course updates</button>Why it matters: The native button supplies role, focusability, an accessible name, and expected Enter/Space behavior without recreating them with ARIA.
WCAG 3.3.1 · 3.3.2 · 4.1.2
<input placeholder="Email">
<p class="error">Required</p><label for="email">Email address</label>
<p id="hint">Example: name@example.com</p>
<input id="email" type="email"
aria-describedby="hint email-error"
aria-invalid="true">
<p id="email-error">Enter a valid email address.</p>Why it matters: The visible label creates a stable name. The description and error are programmatically connected, while aria-invalid exposes the current state.
WCAG 4.1.3
<p class="success">You are subscribed.</p><p role="status" aria-live="polite">
You are subscribed.
</p>Why it matters: A polite status region announces the update without unexpectedly moving keyboard focus. The live region must exist before its text changes.
WCAG 2.4.4
<a href="/course">Learn more</a><a href="/course">
Learn more about Digital essentials
</a>Why it matters: Specific link text remains understandable when a screen-reader user navigates by links or encounters several similar cards.
The corrected experience supports keyboard navigation, visible focus, understandable form errors, meaningful links, logical headings, sufficient contrast, and announced status updates.
Open the remediated websiteEach original task was repeated after remediation. All eight documented findings passed targeted retesting for the affected interaction or content pattern.
Automated checks supported discovery; manual evaluation determined whether the experience worked in context. This focused evaluation is not a full-product conformance certification.