@accessibility-auditorAudit WCAG 2.2 AA avec fixes concrets

Le problème qu'il résout

Ton CEO te dit "il faut être accessible pour le marché EU" (ou tu as un client qui exige WCAG AA). Tu ne sais pas par où commencer : sémantique ? ARIA ? Contraste ? Tu pourrais lancer axe-core ou Lighthouse, mais ils donnent des findings techniques sans recommandation de fix.

@accessibility-auditor te donne des findings actionables, par sévérité, avec critère WCAG cité et patch ready-to-paste.

Comment il bosse

1. Glob les fichiers UI (HTML, JSX, Vue, Svelte, PHP templates).
2. Identifie les archetypes présents (forms, modals, nav, combobox, tabs, etc.).
3. Pour chaque archetype, applique la checklist WCAG correspondante.
4. Mappe chaque finding à un critère WCAG par numéro ET titre exact.
5. Classe en BLOCKER / CRITICAL / SERIOUS / MODERATE / MINOR.
6. Propose un fix concret avec snippet de code prêt à coller.

Exemple concret

Tu tapes

›@accessibility-auditor audit src/pages/Signup.tsx contre WCAG 2.2 AA.
Fixes concrets, pas de blabla.

Tu obtiens

## CRITICAL (2)
1. **Signup.tsx:34** — Input email sans label
   WCAG 1.3.1 Info and Relationships + 4.1.2 Name Role Value
   → bloque les screen readers.
   Fix:
   <label htmlFor="email">Email</label>
   <input id="email" type="email" autoComplete="email" />

2. **Signup.tsx:88** — Bouton "X" sans nom accessible
   WCAG 4.1.2 — screen reader dit "bouton" sans contexte.
   Fix: <button aria-label="Fermer la modal">X</button>

## HIGH (3)
3. **Signup.tsx:42** — Focus indicator outline:none sans remplaçant
   WCAG 2.4.13 Focus Appearance (NEW in 2.2)
   Fix: ajouter focus-visible:ring-2 focus-visible:ring-indigo-500

Pourquoi tu vas l'aimer

Quand l'utiliser

Combine avec ces agents

Questions fréquentes