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.2, recommandation du W3C depuis le 5 octobre 2023 et norme ISO/IEC 40500:2025 depuis octobre 2025 (W3C). Les WCAG 2.2 ajoutent 9 critères aux WCAG 2.1 (2018) et retirent le critère 4.1.1. Un contenu conforme aux WCAG 2.2 l'est aussi aux WCAG 2.1.
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.
- Compréhensible : contenu et interface clairs
- Robuste : compatible avec les technologies d'assistance
Les 3 niveaux de conformité
- Niveau A : exigences minimales (31 critères en WCAG 2.2)
- Niveau AA : recommandé pour la plupart des sites (55 critères, inclut A)
- Niveau AAA : niveau maximal, difficile à atteindre (86 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 (1.3.1 - A)
- 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 (ils ne détectent qu'une partie 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
Situation au 26 septembre 2026 :
- Europe, secteur privé : l'European Accessibility Act (directive (UE) 2019/882) s'applique depuis le 28 juin 2025 à certains produits et services, dont les services bancaires aux consommateurs et le commerce électronique. Détail pour la banque : European Accessibility Act et services bancaires en ligne.
- Europe, secteur public : la directive (UE) 2016/2102 vise les sites et applications des organismes publics.
- Norme européenne : l'EN 301 549 v3.2.1 (WCAG 2.1 AA) reste la référence ; la v4.1.1, alignée sur les WCAG 2.2, n'est pas encore citée au Journal officiel de l'UE (AccessibleEU).
- France : le RGAA 4.1.2 (106 critères, fondé sur les WCAG 2.1) est la méthode d'évaluation de l'article 47 de la loi du 11 février 2005. Le RGAA 5, qui intégrera les WCAG 2.2, est annoncé pour fin 2026.
- Maroc : la charte interbancaire de 2023 engage les banques à auditer leurs services numériques au regard des WCAG. Voir accessibilité bancaire : charte Bank Al-Maghrib et WCAG 2.2.
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 : 1,3 milliard de personnes, soit 16 % de la population mondiale, vivent avec un handicap important (OMS)
- 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é 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.
Pour faire auditer votre site en WCAG 2.2 (RGAA 4.1.2 étendu aux critères WCAG 2.2), puis corriger avec la même équipe, voir notre offre d'audit d'accessibilité.
