Accessibilité web (WCAG)

Pourquoi rendre son site accessible ?

Près de 20% de la population est concernée par un handicap temporaire ou permanent impactant l’utilisation du web. Un site non accessible exclut ces utilisateurs, ce qui représente une perte commerciale directe. Mais l’accessibilité va bien au-delà :

• Obligation légale — en France, le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) impose l’accessibilité aux sites publics, aux grandes entreprises (CA > 250M€) et aux services d’intérêt général. L’AADA (Accessibility Act) étend ces obligations à davantage de secteurs en 2025.
• Meilleur SEO — les pratiques d’accessibilité (attributs alt, structure sémantique, contrastes) améliorent directement le référencement Google. Un site accessible est un site mieux compris par les moteurs de recherche.
• Meilleure UX pour tous — les sous-titres profitent à ceux qui regardent une vidéo sans son. Un contraste élevé aide aussi en plein soleil. Une navigation au clavier profite aux power users.
• Image de marque — un site inclusif témoigne de valeurs responsables et d’un souci de la qualité.

Les 4 principes des WCAG

• Perceptible — l’information et les composants de l’interface doivent être présentés d’une manière perceptible par tous : texte alternatif sur les images, sous-titres sur les vidéos, contrastes suffisants, adaptabilité à différents affichages.
• Utilisable — les composants de l’interface doivent être utilisables : navigation au clavier, temps suffisant pour lire, pas de contenu qui flashe (risque d’épilepsie), navigation facile avec des titres et points de repère.
• Compréhensible — le contenu et le fonctionnement doivent être compréhensibles : langue identifiée, comportement prévisible, aide à la saisie dans les formulaires.
• Robuste — le contenu doit être interprétable de façon fiable par une grande diversité d’agents utilisateurs, y compris les technologies d’assistance (lecteurs d’écran comme JAWS ou NVDA).

Les bonnes pratiques concrètes

• Attributs alt sur les images — chaque image doit avoir une description textuelle qui explique son contenu. Les lecteurs d’écran lisent cet attribut aux utilisateurs malvoyants. L’alt est aussi utile pour le SEO.
• Contrastes suffisants — ratio de contraste minimum de 4.5:1 pour le texte normal, 3:1 pour le grand texte. Du texte gris clair sur fond blanc est un piège fréquent.
• Structure sémantique HTML — utiliser les bonnes balises (h1, h2, nav, main, article, aside) pour que les lecteurs d’écran puissent naviguer logiquement dans la page.
• Navigation au clavier — tout le site doit être utilisable uniquement au clavier (touche Tab pour naviguer, Entrée pour valider). Un indicateur visuel de focus doit être visible.
• Labels de formulaires — chaque champ de formulaire doit avoir un label associé. Les placeholders ne suffisent pas.
• Langue du document — l’attribut lang=”fr” dans la balise html permet aux lecteurs d’écran d’utiliser la bonne prononciation.
• Textes de liens explicites — “cliquez ici” n’apporte aucune information. Préférez “Lire notre guide complet sur le SEO”.

Tester l’accessibilité

• Lighthouse — intégré aux DevTools Chrome, il donne un score d’accessibilité et liste les problèmes à corriger.
• WAVE — extension navigateur qui affiche visuellement les problèmes d’accessibilité sur une page.
• axe DevTools — extension Chrome très complète pour l’audit d’accessibilité.
• Test manuel au clavier — naviguez sur votre site uniquement avec Tab, Entrée et Espace. Tous les éléments doivent être atteignables et utilisables.
• Lecteur d’écran — testez avec NVDA (Windows, gratuit) ou VoiceOver (Mac, intégré). Une expérience révélatrice.

Besoin d’un site web au design professionnel ?