WCAG Web Accessibility: Practical Guide for Inclusive Websites

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

1. Préférez HTML natif : button > div[role="button"]
2. Ne surchargez pas : trop d'ARIA = confusion
3. 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.