Lesson 10 of 12
Structured learning draftTest keyboard, focus, contrast and reflow
Accessibility cannot be proven by markup alone. Combine automated checks with keyboard use, zoom, text resizing and assistive-technology inspection. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Complete the interface using only a keyboard.
- Provide visible, unobscured focus.
- Measure contrast and test reflow.
Test keyboard, focus, contrast and reflow
Test keyboard, focus, contrast and reflow: keyboard to focus indicator to contrast.
Complete the interface using only a keyboard.
Provide visible, unobscured focus.
Measure contrast and test reflow.
:where(a, button, input, textarea, select):focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
.skip-link { position: absolute; inset-block-start: -5rem; }
.skip-link:focus { inset-block-start: .5rem; }| Test | Evidence |
|---|---|
| Keyboard | Logical focus order; every action operable |
| Focus | Indicator visible and not covered |
| Zoom/reflow | No lost content or two-dimensional scrolling |
| Contrast | Measured text and component boundaries |
| Motion | Reduced-motion preference respected |
WCAG 2.2 is testable through success criteria, but conformance still requires judgement. Automated tools find only part of the problem space. Record browser, viewport, zoom, tool version, finding and remediation.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Treating an automated score as complete proof.
- Testing keyboard focus without activating controls.
- Using color alone to communicate state.
Practice activity
Apply the lesson
Audit the portfolio with keyboard-only navigation, 200% text, 400% zoom and a contrast analyser. Fix and record at least three findings. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
Why is an automated accessibility scan insufficient on its own?
Lesson summary
- Accessibility requires multiple test methods.
- Visible focus is essential interaction feedback.
- Keep reproducible evidence for every finding.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note