Part IV — The Reach · Lesson 8.6
Accessibility Tools
In one lineAutomation finds about a third of real issues — know exactly which third, and cover the rest by hand.
Where you've seen itA perfect Lighthouse accessibility score on a checkout that traps keyboard users in a modal.
Diagram
COVERAGE MATRIX — the honest picture
issue type automated manual
─────────────────────────────────────────────────────
missing alt attribute ✓ ✓
colour contrast (static) ✓ ✓
missing form label ✓ ✓
invalid ARIA / bad roles ✓ ✓
duplicate ids, heading order ✓ ✓
─────────────────────────────────────────────────────
alt text that is WRONG ✗ ✓
tab order that makes no sense ✗ ✓
focus lost after an action ✗ ✓
live region never announces ✗ ✓
keyboard trap in a modal ✗ ✓
screen-reader flow is nonsense ✗ ✓
contrast over an image ✗ ✓
~30–40% automated · the remainder needs a humanTHE TOOLBOX — pick per stage
DESIGN Figma contrast plugins catch the palette early
DEV axe DevTools extension instant per-page audit
Chrome a11y tree panel see name/role/state
TEST jest-axe / axe-playwright fail the build (4.7)
Testing Library role queries a11y as a side effect (4.8)
CI Lighthouse CI score gate per route
MANUAL keyboard only 30 seconds, biggest payoff
VoiceOver (Cmd+F5) / NVDA the real experience
browser zoom to 200% reflow and truncationAUTOMATED CHECK IN A TEST — cheap, permanent
import { axe } from 'jest-axe';
test('has no automatic a11y violations', async () => {
const { container } = render(<Checkout />);
expect(await axe(container)).toHaveNoViolations();
});How it works
- Shift left: contrast in design, axe in the editor,
jest-axein unit tests, Lighthouse in CI. - Gate the build on automated violations so regressions can't merge (see 4.7 for the pattern).
- Do the keyboard pass manually on every new flow — thirty seconds, and it finds what automation structurally cannot.
- Learn one screen reader. VoiceOver on macOS with four commands is enough to catch most announcement bugs.
- Test at 200% zoom and 320px width — reflow failures are common and entirely invisible to automated checks.
Trade-offs
| Tool | Strength | Blind spot |
|---|---|---|
| axe / jest-axe | Fast, precise, CI-friendly | Semantics, order, flow |
| Lighthouse | One score, easy to track | Same limits, plus sampling |
| Screen reader | The real experience | Slow, needs practice |
| Keyboard pass | Highest value per minute | Doesn't cover announcements |
| User testing | Finds what all of the above miss | Cost and scheduling |
Interview angle
"Lighthouse gives us 100. Are we accessible?"
- No — automated tools cover roughly a third of the criteria, mostly static markup issues.
- They can't judge whether alt text is correct, whether tab order makes sense, or whether focus survives an action.
- Pair automation in CI with a manual keyboard and screen-reader pass on each new flow.
Recap
- Automation catches static markup issues; humans catch flow, order, and meaning.
- Keyboard-only testing is the highest-value 30 seconds in the whole discipline.
- Gate the automatable part in CI so it never regresses.