Les WCAG (Web Content Accessibility Guidelines) sont le référentiel publié par le W3C qui définit comment rendre un site web accessible aux personnes en situation de handicap — visuel (malvoyance, daltonisme), moteur (navigation clavier uniquement), cognitif, auditif. Trois niveaux de conformité : A (minimum), AA (standard cible), AAA (très strict, rarement atteignable intégralement). La version actuelle est WCAG 2.2 (2023), avec la 3.0 en consultation. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est l'adaptation officielle, alignée sur WCAG 2.1 niveau AA.
Côté légal, c'est devenu sérieux. La directive européenne EN 301 549 et l'European Accessibility Act (EAA, applicable depuis juin 2025) imposent l'accessibilité aux sites publics, aux secteurs régulés (banque, transport, télécoms, santé) et à tout e-commerce dépassant 10M€ de CA ou 10 salariés sur le marché européen. La sanction française peut monter à 25 000 € par manquement. Pour le privé hors-régulé, ce n'est pas obligatoire — mais ça reste une bonne pratique : un site WCAG AA est aussi mieux référencé (Google valorise la sémantique HTML), plus utilisable, et touche 15-20 % de visiteurs en plus.
En pratique, viser AA demande de la rigueur sur 4 axes : perceptible (contraste texte/fond ≥ 4.5:1, alt text sur les images, sous-titres vidéo), utilisable (navigation clavier complète, pas de piège focus, taille tactile ≥ 24x24 px en 2.2), compréhensible (langue déclarée, libellés de formulaire clairs, messages d'erreur exploitables), robuste (HTML sémantique, ARIA correctement utilisé). Avec Tailwind CSS + Next.js + des composants shadcn/ui, on est AA par défaut sur 80 % des cas. On finalise pendant un audit gratuit ou en chantier dédié sur site sur-mesure.
Les essentiels WCAG AA à respecter
- Contrastes : ≥ 4.5:1 pour le texte normal, ≥ 3:1 pour le texte large et les composants UI/icônes informatives.
- Navigation clavier : tout est accessible au Tab, focus toujours visible (`focus-visible`), pas de piège.
- Sémantique HTML : `<button>` pour les boutons (pas `<div onClick>`), `<nav>`, `<main>`, hiérarchie de titres correcte.
- Formulaires : `<label>` associé à chaque input, messages d'erreur reliés via `aria-describedby`, indication des champs requis.
