Product & UX

The 45-Minute Accessibility Audit We Run Before Launch

Keyboard flows, focus order, contrast ratios, and screen reader spot checks — no expensive tooling required.

6 min read1.4k views

Accessibility is a launch gate, not a backlog item.

Inclusive design workshop with diverse participants
Inclusive design workshop with diverse participants

Our 45-minute audit covers keyboard-only navigation through primary flows, focus trap validation on modals, and axe-core on critical templates.

Handoff quality is a system property, not a handoff meeting outcome. Tokens, component APIs, and state matrices must be versioned like production code.

When three squads consume the same library, ambiguous variants become production bugs — constrain APIs early even if designers want infinite flexibility.

Contrast failures cluster in muted text and disabled states — fix tokens, not individual pages.

Design system components in Figma
Design system components in Figma

Screen reader spot checks catch unlabeled icon buttons that automated scans miss.

Responsive behavior should be specified as ranges and rules, not pixel-perfect frames for every breakpoint. Engineers extrapolate with the token scale.

Accessibility acceptance criteria belong in the same ticket as visual specs — retrofits cost more than designing focus order upfront.

We record a short screen capture of the keyboard path through checkout

Inclusive design workshop
Inclusive design workshop

or signup — it becomes training material for the next squad.

Storybook is the contract surface between design and engineering. If a state is not documented, it is not shipped.

Design QA on real data edge cases — empty lists, long names, error strings — catches issues static mocks hide.

WCAG AA is the floor.

Mobile app prototypes on a desk
Mobile app prototypes on a desk

AAA contrast on body text is worth it for fintech and healthcare clients.

Motion and loading states affect perceived quality as much as static layouts. Budget animation for low-end devices, not only flagship phones.

Cross-platform parity does not mean identical pixels — it means equivalent tasks complete with the same confidence on web and mobile.

File issues with severity and user impact, not WCAG clause numbers

Design system components in Figma
Design system components in Figma

alone — product owners prioritize faster that way.

Post-launch usability signals (support tickets, session replays) should feed back into the component backlog within two weeks.

Celebrate pattern reuse metrics, not page count — fewer bespoke screens means faster delivery and fewer regressions.

The table below summarizes the reference points we review with client stakeholders before sign-off. Use it as a shared vocabulary in sprint planning and release reviews.

Handoff artifact tracker

ArtifactOwnerStatus gateEvidence
Design tokensDesignBefore dev sprintFigma Variables export
Component statesDesign + EngBefore QAStorybook stories
Accessibility auditQAPre-launchaxe + keyboard pass
Storybook docsEngAt PR mergeChromatic snapshot
Responsive rulesDesignBefore buildBreakpoint matrix
Error flowsDesign + EngBefore QAEmpty/error screens

Run through this checklist in order — skipping steps because of deadline pressure is how regressions reach production. Assign an owner for each item before you schedule a launch window.

Pre-launch gates

  • Walk through keyboard-only flows on primary paths.
  • Verify contrast on muted and disabled UI states.
  • Capture hover, focus, and error states in Storybook.
  • Run screen reader spot checks on new components.
  • Test with longest realistic content strings and empty states.
  • Confirm loading and skeleton states on slow 3G throttling.

More in Product & UX