Accessibility Checks
Reusable checklist applied across all accessibility reviews
Color contrast ≥ 4.5:1 for body text
1.4.3 (AA) · Color contrast
Body text contrast against background.
Example & fix
#94A3B8 text on white = 2.9:1 (fail)
→ Use #475569 or darker.
All interactive elements reachable by keyboard
2.1.1 (A) · Keyboard navigation
Every action must be operable via keyboard.
Example & fix
Custom dropdown only opens on click.
→ Add Enter/Space handlers and focus management.
Visible focus indicator
2.4.7 (AA) · Focus state
Focus state must be clearly visible.
Example & fix
Default outline removed without replacement.
→ Provide a 2px focus ring with 3:1 contrast.
Form fields have associated labels
3.3.2 (A) · Form labels
Every input has a programmatic label.
Example & fix
Placeholder used as label only.
→ Add <label htmlFor> or aria-label.
Touch targets ≥ 44×44px
2.5.5 (AAA) · Touch targets
Tap targets on touch devices.
Example & fix
Icon button is 24×24px.
→ Increase to 44×44 or add padding.
Images have meaningful alt text
1.1.1 (A) · Alternative text
Non-decorative images need alt.
Example & fix
Hero image with empty alt.
→ Describe the image's content/function.
Headings follow a logical hierarchy
1.3.1 (A) · Heading structure
No skipped heading levels.
Example & fix
h1 followed by h4.
→ Use sequential heading levels.
Errors identified in text, not just color
1.4.1 (A) · Error identification
Don't rely on color alone.
Example & fix
Red border with no icon or text.
→ Add icon and explicit message.