Back to Audits
Accessibility & Inclusion
Can everyone use this?
Review keyboard navigation, screen reader support, and visual clarity. Ensure your app works for users with diverse abilities.
Stage expectations
POC
Light check
Awareness of major barriers
No egregious keyboard traps
Basic semantic HTML
MVP
Light check
Core flows keyboard accessible
Main headings structured
Focus visible on interactive elements
MMP
Full check
WCAG 2.1 AA on primary paths
Screen reader tested
Color contrast validated
PROD
Complete check
Full WCAG 2.1 AA compliance
Tested with assistive tech
Accessibility statement published
Tab Order
MVP+- Tab order follows logical reading order (left-to-right, top-to-bottom)
- Tab order matches visual layout (no unexpected jumps)
- Tabbing moves through all interactive elements in sequence
- Reverse tab (Shift+Tab) works correctly
- Focus does not jump to hidden or off-screen elements
- Modal dialogs trap focus within until dismissed
Focus Indicators
MVP+- All interactive elements have visible focus state
- Focus indicator has sufficient contrast (3:1 against background)
- Focus indicator is not just a color change
- Focus style is consistent across the application
- Focus is not removed with outline: none without replacement
- Focus-visible used for keyboard-only focus styles (optional enhancement)
Keyboard Navigation
MMP+- All functionality available via keyboard alone
- Skip link provided to bypass navigation
- Skip link is first focusable element on page
- Arrow keys work in expected places (menus, tabs, sliders)
- Escape closes modals, dropdowns, and overlays
- Space activates buttons and checkboxes
- Enter activates links and buttons
No Keyboard Traps
MVP+- User can always tab away from any component
- Modals can be closed with Escape key
- Third-party widgets do not trap focus
- Infinite scroll does not prevent keyboard navigation
- Auto-playing content can be paused/stopped
- Video players are keyboard accessible
Common Issues & Quick Fixes
Custom buttons using <div> instead of <button>: Use semantic <button> or add role="button" with keyboard handlers
Focus indicator removed for aesthetics: Implement custom focus-visible styles instead of removing
Modal does not trap focus: Use focus-trap library or implement focus trap with refs
Skip link not visible: Show skip link on focus (sr-only with :focus-visible override)
Dropdown menu items not keyboard accessible: Add arrow key navigation with roving tabindex pattern
Tools & Resources
Automated Testing
- axe DevTools — Browser extension for accessibility testing
- Lighthouse — Chrome built-in accessibility audits
- WAVE — Web accessibility evaluation tool
- Pa11y — Automated accessibility testing CLI
Manual Testing
- VoiceOver — macOS/iOS screen reader
- NVDA — Free Windows screen reader
- JAWS — Windows screen reader
- Accessibility Insights — Microsoft testing tools
Contrast & Color
- WebAIM Contrast Checker — Check color contrast ratios
- Stark — Accessibility design toolkit
- Colorblind Web Page Filter — Simulate color blindness
- Who Can Use — Color contrast with context
References
- WCAG 2.1 — Web Content Accessibility Guidelines
- A11y Project Checklist — Practical accessibility checklist
- MDN Accessibility — Web accessibility docs
- Inclusive Components — Accessible component patterns
AI Agent Commands
Use these prompts with your AI coding agent to check accessibility:
Run the Accessibility audit at MVP levelCheck all images for alt textVerify heading hierarchy across pagesFind form inputs without labelsCheck for missing aria-labels on icon buttons