Auditing a React app: a 1-hour smoke test
Before you commission a full audit, run this one-hour pass. It surfaces ~60% of typical findings and gives you a defensible baseline.
# enabl — 1-Hour React Accessibility Smoke Test Pick one critical flow (sign-up, checkout, primary task). Run all four passes on it. ## Pass 1 — Automated (10 min) - [ ] Run axe DevTools / Lighthouse on every page in the flow. - [ ] Note serious + critical violations only. Ignore "incomplete". - [ ] Save the JSON report. ## Pass 2 — Keyboard only (15 min) - [ ] Unplug the mouse. Tab through every page. - [ ] Every interactive element must be reachable and have a visible focus indicator. - [ ] No keyboard trap. Esc closes modals. Enter/Space activate buttons. - [ ] Focus returns sensibly after closing a modal/menu. ## Pass 3 — Screen reader (20 min) - [ ] NVDA + Firefox (Windows) or VoiceOver + Safari (Mac). - [ ] Read each page top-to-bottom. Headings make sense out of context? …
Downloadable guide
Preview the asset.
Skim the structure, then grab a copy you can edit, share, or paste into your team's docs.
Before you spend on a full audit, you should know what's already on fire. This is the smoke test we run with new clients in our discovery call — about an hour, and it surfaces the majority of "critical" and "serious" findings.
What you'll need
- axe DevTools or Lighthouse (free)
- A screen reader: NVDA + Firefox on Windows, or VoiceOver + Safari on macOS
- A staging URL of one critical flow
The four passes
- 01Automated scan — captures contrast, ARIA validity, missing labels.
- 02Keyboard-only — surfaces focus, trap, and order issues.
- 03Screen reader — exposes semantic gaps and labeling problems.
- 04Reflow & zoom — catches the things designers shipped that QA missed.
Download the checklist below and run it on your most-trafficked flow this week.
Take it with you
smoke-test checklist
Free to use and share with attribution.