accessibility-checker

Accessibility Checker

Workflow en étapes

1. Audit automatisé — base de départ

Lancer les outils automatisés pour couvrir ~30-40 % des problèmes détectables :

# axe-core CLI (Node)
npx axe http://localhost:3000 --tags wcag2aa --reporter json > axe-report.json

# pa11y (CI-friendly)
npx pa11y http://localhost:3000 --standard WCAG2AA --reporter json

# Lighthouse (headless)
npx lighthouse http://localhost:3000 --only-categories=accessibility --output json --quiet

Critère de décision : score Lighthouse >= 90 ET zéro violation axe critical/serious avant merge.

2. Navigation clavier (manuelle, ~5 min)

Parcourir la page uniquement au clavier (Tab / Shift+Tab / Enter / Espace / Flèches).

Checklist :

• Focus visible sur chaque élément interactif (ne pas faire outline: none sans alternative)
• Ordre de tab logique — suit le flux visuel de gauche à droite, haut en bas
• Skip link présent et fonctionnel (<a href="#main-content" class="skip-link">Aller au contenu</a>)
• Aucun keyboard trap (modale fermable avec Echap, focus retourné à l'élément déclencheur)
• Composants custom (datepicker, slider) utilisables sans souris

/* Focus visible minimal — ne jamais supprimer sans remplacement */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

3. Sémantique HTML et landmarks

<!-- Structure minimale correcte -->
<header role="banner">…</header>
<nav aria-label="Navigation principale">…</nav>
<main id="main-content">
  <h1>Titre de la page</h1>   <!-- Un seul h1 par page -->
  …
</main>
<footer role="contentinfo">…</footer>

Pièges fréquents :

• Sauts de niveau de titre (h1 → h3) : interdit
• Plusieurs <main> sans hidden sur les inactifs
• <div> et <span> cliquables sans role ni tabindex

4. ARIA — règle d'or

Utiliser ARIA uniquement si le HTML natif ne peut pas exprimer le comportement.

<!-- MAL : ARIA redondant -->
<button role="button" aria-label="Envoyer">Envoyer</button>

<!-- BIEN : HTML natif seul -->
<button type="submit">Envoyer</button>

<!-- BIEN : ARIA nécessaire (état dynamique) -->
<button aria-expanded="false" aria-controls="menu-id">Menu</button>
<ul id="menu-id" hidden>…</ul>

<!-- Live region pour les notifications -->
<div role="status" aria-live="polite" aria-atomic="true">
  <!-- Injecté dynamiquement par JS après action utilisateur -->
</div>