L’accessibilité numérique n’est pas une option ni une contrainte technique à traiter en fin de projet.
C’est une démarche de conception inclusive qui doit être intégrée dès les premières maquettes.
Ce guide vous accompagne dans l’anticipation des critères WCAG et RGAA directement en phase de design.
Pourquoi l’accessibilité est essentielle :
au-delà de la conformité
L’accessibilité n’est pas seulement une obligation légale (Loi de 2005, RGAA), c’est un levier puissant pour le design UX et la performance globale de votre produit. Elle contribue directement à :
- Élargir votre base d’utilisateurs : Rendre votre plateforme utilisable par des personnes de tous horizons et capacités, augmentant ainsi votre portée et votre clientèle.
- Améliorer l’expérience utilisateur (UX) pour tous : Des fonctionnalités comme une navigation claire, un contraste suffisant et des alternatives textuelles bénéficient à toute personne, qu’elle soit sous le soleil, avec une connexion lente, ou utilisant un appareil mobile.
- Renforcer l’image de marque : Adopter l’accessibilité comme valeur centrale démontre une éthique forte et promeut l’inclusion, ce qui fidélise les clients.
- Optimiser le SEO : Les bonnes pratiques d’accessibilité (structure Hn claire, balises alt, langage sémantique) sont directement reconnues et valorisées par les moteurs de recherche.
Comprendre les référentiels WCAG et RGAA
WCAG (Web Content Accessibility Guidelines)
Les WCAG sont les directives internationales d’accessibilité, structurées autour de quatre principes fondamentaux :
Perceptible :
l’information doit être présentée de manière à être perçue par tous
Utilisable :
les composants d’interface doivent être manipulables par tous
Compréhensible :
l’information et l’interface doivent être intelligibles
Robuste :
le contenu doit être interprétable par les technologies d’assistance
Trois niveaux de conformité existent : A (minimum), AA (standard recommandé), et AAA (optimal).
RGAA (Référentiel Général d’Amélioration de l’Accessibilité)
Le RGAA est la déclinaison française des WCAG, obligatoire pour les services publics et certaines entreprises privées depuis la loi de 2005. La version actuelle (RGAA 4.1) s’aligne sur les WCAG 2.1 niveau AA.
En savoir plus : https://accessibilite.numerique.gouv.fr/
Les contrastes :
la règle d’or du design accessible
Le contraste est le premier critère à maîtriser.
Un contraste insuffisant rend le contenu illisible pour les personnes malvoyantes, les daltoniens, ou simplement en situation de forte luminosité.
Ratios minimaux à respecter (selon WCAG)
| Type de texte | Niveau AA | Niveau AAA |
|---|---|---|
| Texte standard (< 18pt ou < 14pt gras) | 4.5:1 | 7:1 |
| Grand texte (≥ 18pt ou ≥ 14pt gras) | 3:1 | 4.5:1 |
| Éléments graphiques et composants UI | 3:1 | — |
Bonnes pratiques de conception
- Testez systématiquement vos combinaisons de couleurs avec des outils comme Contrast Checker, Stark, ou l’outil intégré de Figma
- Prévoyez des variantes pour les fonds clairs et fonds sombres
Typographie, couleur et structure
Tailles minimales recommandées
- Corps de texte : 16px minimum (idéalement 18px pour le confort de lecture)
- Interlignage : au minimum 1.5 fois la taille de la police pour le corps de texte
Couleur : ne jamais s’y fier seule
L’information ne doit jamais être véhiculée uniquement par la couleur. (WACG 1.4.1)
Cas problématiques fréquents
| Situation | Problème | Solution |
|---|---|---|
| Champ en erreur | Bordure rouge seule | Ajouter une icône ⚠️ et un message textuel |
| Statut d’une commande | Pastille verte/orange/rouge | Ajouter un libellé textuel |
Composants interactifs, focus et cibles tactiles
Zones cliquables
Selon les recommandations WCAG et Material Design, la zone cliquable (bouton, icône, lien) doit avoir :
- Taille minimale : 44×44 pixels (pour WCAG 2.1) ou 48×48 dp (pour Material Design)
- Espacement suffisant entre les cibles adjacentes.
Images, médias et structure sémantique
Images informatives et décoratives
La règle de base est simple :
- Image informative : Nécessite une description textuelle (
alt) et doit respecter les ratios de contraste si elle contient du texte essentiel. - Image décorative : Doit être ignorée par les lecteurs d’écran (
alt="").
Hiérarchie et Landmarks
Définissez une structure sémantique claire : un seul H1 par page et une hiérarchie de titres logique (H2, puis H3, etc.). Cette structure permet aux technologies d’assistance (lecteurs d’écran) de naviguer facilement dans le contenu (Material Design).
Checklist de validation design (WCAG & RGAA)
Avant de transmettre vos maquettes aux équipes de développement, vérifiez :
Contrastes
- Textes standards : ratio ≥ 4.5:1
- Éléments UI (icônes, bordures, focus) : ratio ≥ 3:1
Composants
- Zones cliquables ≥ 44×44px
- États hover, focus, active définis pour tous les éléments interactifs
Notre outil en ligne
L’accessibilité en design n’est pas une liste de contraintes à cocher, mais une philosophie de conception. En intégrant ces critères dès vos premières intentions graphiques, vous créez des interfaces utilisables par le plus grand nombre, dans toutes les situations.
Un design accessible est généralement un meilleur design pour tous : plus lisible, plus clair, plus cohérent.
Besoin d’aide pour vos projets en Design UX / UI ?
Nos autres actualités
Référencement OFF-SITE – SEO
28 janvier 2022
Comment le référencement off-site aide à augmenter la visibilité en ligne de votre site web
Jeux interactifs et expériences digitales
13 octobre 2025
Installée au pied des Pyrénées, So’Happy imagine et conçoit des expériences multimédia (...)
Hartmut Esslinger & Frog Design : L’héritage du NeXT Cube et des icônes Apple
30 octobre 2025
Fin des années 80, le NeXT Cube bouleverse la scène tech avec son cube noir mat et son allure (...)
