Accessibilité web WCAG : guide pratique pour des sites inclusifs

L'accessibilité web garantit que vos sites et applications sont utilisables par tous, y compris les personnes en situation de handicap (visuel, auditif, moteur, cognitif). Au-delà de l'éthique, c'est une obligation légale dans de nombreux pays et un facteur de SEO.

Les standards WCAG

Les Web Content Accessibility Guidelines (WCAG) définissent les règles d'accessibilité. Version actuelle : WCAG 2.1 (2018) et WCAG 2.2 (2023).

Les 4 principes POUR

Perceptible : l'information doit être présentable de différentes manières
Opérable : navigation et interaction possibles au clavier, à la voix, etc.
Understandable (Compréhensible) : contenu et interface clairs
Robuste : compatible avec les technologies d'assistance

Les 3 niveaux de conformité

Niveau A : exigences minimales (30 critères)
Niveau AA : recommandé pour la plupart des sites (50 critères, inclut A)
Niveau AAA : niveau maximal, difficile à atteindre (78 critères)

Objectif réaliste : viser AA pour la plupart des projets web.

Critères WCAG essentiels (niveau AA)

1. Alternatives textuelles (1.1.1 - A)

Attribut alt sur toutes les images
Alt vide (alt="") pour images décoratives
Descriptions longues pour graphiques complexes

2. Contraste de couleurs (1.4.3 - AA)

Ratio minimum 4.5:1 pour texte normal
Ratio minimum 3:1 pour texte large (18pt+ ou 14pt+ gras)
Outils : WebAIM Contrast Checker, Stark plugin Figma

3. Navigation au clavier (2.1.1 - A)

Toutes les fonctionnalités accessibles au clavier
Ordre de tabulation logique (tabindex si nécessaire)
Focus visible sur tous les éléments interactifs
Pas de piège clavier (on peut sortir des modals, dropdowns)

4. Formulaires accessibles (3.3.1, 3.3.2 - A)

Labels explicites pour chaque input (label + for/id)
Messages d'erreur clairs et liés aux champs (aria-describedby)
Instructions visibles avant la soumission
Autocomplete attributes pour faciliter le remplissage

5. Structure sémantique (1.3.1 - A)

Hiérarchie H1 > H2 > H3 cohérente
Balises HTML sémantiques (nav, main, aside, article, section)
Listes (ul, ol) pour contenus listés
Tableaux avec thead, tbody, th[scope]

6. Landmarks ARIA (4.1.3 - AA)

role="banner" (header)
role="navigation" (nav)
role="main" (main content)
role="complementary" (sidebar)
role="contentinfo" (footer)

7. Texte redimensionnable (1.4.4 - AA)

Texte zoomable jusqu'à 200% sans perte de contenu
Utiliser rem/em plutôt que px pour les tailles de police
Layout responsive et flexible

8. Ordre de focus cohérent (2.4.3 - A)

Ordre de tab suit l'ordre visuel
Éviter tabindex > 0 (perturbant)
Modals : focus trappé, retour à l'élément déclencheur à la fermeture

ARIA : quand et comment l'utiliser

ARIA (Accessible Rich Internet Applications) enrichit la sémantique HTML.

Règles d'or ARIA

Préférez HTML natif : button > div[role="button"]
Ne surchargez pas : trop d'ARIA = confusion
Testez avec lecteurs d'écran : NVDA, JAWS, VoiceOver

ARIA utiles

aria-label : label alternatif (icône sans texte)
aria-labelledby : référence un élément comme label
aria-describedby : description complémentaire
aria-live : annonce les changements dynamiques (notifications, erreurs)
aria-hidden="true" : masque aux lecteurs d'écran
aria-expanded : état ouvert/fermé (accordion, dropdown)
aria-current="page" : page active dans navigation

Outils de test

Tests automatisés (détectent ~30% des problèmes)

axe DevTools : extension Chrome/Firefox
Lighthouse : intégré dans Chrome DevTools
WAVE : extension et API
Pa11y : CLI pour CI/CD

Tests manuels (indispensables)

Navigation clavier : Tab, Shift+Tab, Enter, Espace, Échap
Lecteurs d'écran : NVDA (Windows gratuit), JAWS (Windows payant), VoiceOver (Mac/iOS gratuit)
Zoom navigateur : tester à 200%
Contraste : WebAIM Contrast Checker
Validation HTML : W3C Validator

Obligations légales

France : RGAA 4

Le Référentiel Général d'Amélioration de l'Accessibilité transpose les WCAG. Obligatoire pour :

Administrations publiques
Entreprises publiques
Entreprises privées > 250M€ CA

Sanctions : jusqu'à 20 000€ par site non conforme.

Europe : Directive européenne 2016/2102

Transposée dans chaque pays membre. Sites publics doivent être niveau AA.

USA : ADA et Section 508

Americans with Disabilities Act : sites commerciaux peuvent être poursuivis. Section 508 : obligatoire pour agences fédérales.

Bénéfices business

SEO : structure sémantique améliore le référencement
Audience élargie : 15% de la population mondiale en situation de handicap
Utilisabilité : un site accessible est plus facile pour tous
Image de marque : engagement RSE et inclusivité
Conformité légale : évite amendes et procès

Conclusion

L'accessibilité n'est pas un luxe, c'est un droit. Intégrez-la dès la conception (shift-left) plutôt qu'en correction tardive. Formez vos équipes, testez régulièrement et impliquez des utilisateurs en situation de handicap. Notre équipe peut auditer votre accessibilité et vous accompagner vers la conformité WCAG AA.