Accessibility Audit

Demo

Click to play with sound.

---
name: Accessibility Audit
description: Audit and fix UI against WCAG 2.2.
---

# Accessibility Audit

Make interfaces usable by keyboard, screen reader, and low-vision users.

## Audit process

1. Tab through the entire page using only the keyboard. Everything interactive must be reachable and operable.
2. Run an automated pass (axe) to catch the ~30% it can detect.
3. Test with a screen reader (VoiceOver/NVDA) for the rest.
4. Check at 200% zoom and 400% reflow.

## Semantic HTML first

- Use native elements: `<button>`, `<a href>`, `<nav>`, `<main>`, `<label>`. They come with built-in roles and keyboard behavior.
- Reach for ARIA only when no native element fits. The first rule of ARIA: don't use ARIA.

## Keyboard and focus

- Visible focus indicator on every focusable element — never `outline: none` without a replacement.
- Logical tab order following the visual order; avoid positive `tabindex`.… install to load the full skill