"L'accessibilité ne saurait être réduite à une simple contrainte technique. C'est une philosophie de conception fondamentale qui redéfinit la qualité de l'expérience utilisateur."
En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) impose des standards stricts. L'objectif est double : conformité légale et performance UX. Une interface accessible est intrinsèquement plus claire, mieux structurée et plus performante pour le SEO.
Ce rapport vous donne les clés pour opérer un « Shift Left » : intégrer l'accessibilité dès les premières esquisses pour minimiser la dette technique.
Pourquoi l'accessibilité vous concerne
Personnes en situation de handicap dans le monde, soit 16 % de la population
Source : OMS, fiche d'information « Handicap », 2023 (s'ouvre dans un nouvel onglet)Français concernés par un handicap
Source : INSEE, enquête Handicap-Santé (s'ouvre dans un nouvel onglet)Hommes daltoniens, dans les populations d'ascendance nord-européenne
Source : National Eye Institute (NIH) (s'ouvre dans un nouvel onglet)Adultes de 40 ans et plus présentant un trouble vestibulaire (États-Unis)
Source : NIH, Agrawal et al., NHANES 2001-2004 (s'ouvre dans un nouvel onglet)Conseils clés pour designers
Shift Left
Intégrez l'accessibilité dès les premières esquisses, pas en fin de projet. La dette technique est bien plus coûteuse à corriger.
Testez avec de vrais utilisateurs
Aucun outil automatique ne remplace un test avec une personne malvoyante ou un utilisateur de lecteur d'écran.
Documentez l'invisible
Annotez vos maquettes : niveaux de titres, ordre de focus, textes alternatifs. Le développeur ne peut pas deviner.
Dissociez sémantique et style
Un H3 peut être stylisé plus grand qu'un H2 si besoin, mais la hiérarchie sémantique doit rester logique.
L'accessibilité est un avantage business
Au-delà de l'éthique et de l'obligation légale, trois bénéfices constants
Personnes handicapées, seniors, et situations temporaires (bras plâtré, plein soleil, mains occupées).
Titres hiérarchisés, alternatives textuelles, HTML sémantique : ce que lit un lecteur d'écran, un robot d'indexation le lit aussi.
Composants natifs plutôt que réimplémentés, états documentés, code plus testable.
"Une interface accessible est intrinsèquement plus claire, mieux structurée et plus performante pour tous les utilisateurs."
D'après le principe du Design Universel
1. Couleur et Contraste
La couleur est un vecteur émotionnel puissant, mais la perception est inégale : dans les populations d'ascendance nord-européenne, 8 % des hommes et 0,5 % des femmes sont daltoniens.
1.1 Ratios de Contraste (RGAA 3.2)
Le contraste se base sur la luminosité relative, pas juste la teinte.
Échelle de Conformité WCAG
& UITexte
CourantOptimal
Le ratio se calcule entre la couleur du texte et son arrière-plan.
(Ex: Noir sur Blanc = 21:1)
Seuils de contraste du RGAA 4.1 (critères 3.2 et 3.3, niveau AA)
Texte courant
Paragraphes, labels, sous-titres de taille standard.
Grand texte & Interface
Texte ≥24px (ou ≥18.5px gras). Icônes, champs de saisie, boutons.
Niveau AAA (WCAG 1.4.6)
Au-delà du niveau AA que transpose le RGAA. Recommandé pour les textes longs et la lecture sur mobile en extérieur.
1.2 Indépendance de la couleur
Règle d'or : Ne jamais utiliser la couleur seule pour véhiculer du sens.
- Erreurs : Ajoutez une icône (point d'exclamation) ou un texte gras, pas juste une bordure rouge.
- Liens : Le soulignement est l'affordance la plus robuste. Sinon, assurez un contraste de 3:1 avec le texte environnant.
- Graphiques : Ajoutez des motifs (hachures) dans les camemberts pour différencier les segments.
Simulation du daltonisme
Comment vos couleurs sont perçues par les 8 % d'hommes daltoniens
Indistinguables !
Icône + Couleur = Clair pour tous
Répartition du daltonisme dans la population
Soit environ 2,6 millions d'hommes en France, dont la très grande majorité confond le rouge et le vert.
- Deutan (~6 % des hommes) : deutéranomalie (~5 %) et deutéranopie (~1 %), confusion rouge/vert
- Protan (~2 % des hommes) : protanomalie et protanopie, insensibilité au rouge
- Tritanopie (~0,01 %) : confusion bleu/jaune, aussi fréquente chez les femmes
Source : National Eye Institute (NIH) (s'ouvre dans un nouvel onglet) Prévalences relevées dans les populations d'ascendance nord-européenne. Le RGAA, lui, ne fixe aucun chiffre de population : son critère 3.1 exige seulement que l'information ne passe pas par la couleur seule.
1.3 Mode Sombre (Dark Mode)
Le design en mode sombre ne se résume pas à une simple inversion des valeurs. Il présente des défis spécifiques liés à la fatigue oculaire et à l'astigmatisme.
- • Ombres pour la profondeur
- • Couleurs saturées OK
- • Fond blanc (#FFFFFF)
- • Niveaux de gris pour la profondeur
- • Couleurs désaturées (pastel)
- • Fond gris foncé (#121212), pas noir pur
Attention : Le noir pur (#000000) sur OLED cause un effet de "smearing" et une halation pour les astigmates. Utilisez #121212 minimum.
2. Typographie Inclusive
L'accessibilité typographique réduit la charge cognitive.
- Polices :Privilégiez des polices avec distinction claire entre
I,let1. Évitez les "Geometric Sans" trop uniformes. - Hauteur d'x :Une grande hauteur d'x (comme Verdana) améliore la lisibilité.
- Alignement :Jamais de texte justifié. Cela crée des "rivières" blanches gênantes pour la dyslexie.
- Redimensionnement :Le texte doit pouvoir grossir à 200% sans perte (utilisez des conteneurs fluides, pas de hauteur fixe).
Anatomie de la Lisibilité
(1,5x conseillé)
Verdana / Segoe
Ouvertures larges, x-height élevée
Times New Roman
Empattements fins, x-height faible
Métriques typographiques
Les lignes marquées d'un numéro de critère sont des exigences du RGAA 4.1. La longueur de ligne relève, elle, de WCAG 1.4.8 (niveau AAA) : avant tout une bonne pratique de lisibilité.
4. Clavier, Focus et Interactions
L'une des idées fausses les plus tenaces est que tout le monde utilise une souris. De nombreux utilisateurs (handicap moteur, visuel, ou "power users") naviguent exclusivement au clavier (touches Tab, Entrée, Espace, Flèches).
L'indicateur de Focus : Un impératif visuel
L'état de "Focus" est l'équivalent du curseur de la souris pour le clavier. Trop souvent, les designers suppriment le contour par défaut du navigateur (outline: none) pour des raisons esthétiques, rendant l'interface inutilisable au clavier.
États Interactifs indispensables
Les 5 états interactifs à documenter
Designer et documenter ces cinq états évite qu'ils soient improvisés au développement. Un seul est une exigence RGAA : la visibilité de la prise de focus (critère 10.7). Les quatre autres relèvent de la qualité d'usage.
Alternative au Disabled : Plutôt que de griser un bouton sans explication, il est souvent préférable de le laisser actif et d'afficher un message d'erreur explicatif au clic ("Veuillez d'abord accepter les CGU").
Cibles Tactiles Mobile
La taille de cible est un critère WCAG : 2.5.5 en niveau AAA, et 2.5.8 en niveau AA depuis WCAG 2.2. Le RGAA 4.1 transposant WCAG 2.1, elle n'y figure pas encore, mais le RGAA 5 devrait la reprendre. Et dans tous les cas, viser large reste une bonne pratique d'ergonomie.
Difficile à atteindre sans erreur.
Risque de "Fat Finger".
Icône centrée dans une zone
active de 44x44px conseillée.
Technique du double contour
Pour garantir la visibilité du focus sur des fonds variés (sombres et clairs), utilisez un double contour : une ligne blanche épaisse entourée d'une ligne colorée fine. Cela assure que le focus est visible quelle que soit la couleur de fond de l'image ou de la section.
5. Composants Complexes
Carrousels
Souvent problématiques.
- Bouton Pause/Lecture si défilement automatique : exigé (critère 13.8).
- Pas de piège au focus clavier : exigé (critère 12.9).
- Flèches de navigation visibles plutôt que de simples points : bonne pratique.
Modales
Interruptives.
- Bouton de fermeture explicite, atteignable et activable au clavier : exigé (critères 7.3 et 12.9).
- Focus maintenu dans la modale tant qu'elle est ouverte, avec une sortie toujours possible : sans issue au clavier, c'est un piège (critère 12.9).
- Fermeture au clic sur l'arrière-plan : bonne pratique, mais jamais l'unique moyen de fermer.
Onglets
Navigation interne.
- Lien visuel fort entre l'onglet actif et le contenu.
- Distinction claire entre état « Focus » et état « Sélectionné » : l'état sélectionné ne doit pas reposer sur la seule couleur (critère 3.1), et la prise de focus doit rester visible (critère 10.7).
6. Formulaires
Les formulaires sont les points de friction majeurs.
- Étiquettes (Labels) : Le placeholder n'est PAS un label. Il disparaît. Utilisez des labels visibles (fixes ou flottants).
- Erreurs : Explicites ("Format date invalide"). Proches du champ. Liées par code (
aria-describedby).
À éviter
Le label disparaît à la saisie
- Placeholder utilisé comme label
- Erreur indiquée par la couleur seule
- Pas de message d'explication
- Bouton désactivé sans raison apparente
Recommandé
Ce nom est déjà pris
- Labels visibles et permanents
- Erreur explicite avec icône + texte
- Correction suggérée
- Contraste optimal
7. Images, Icônes & Contenus Non-Textuels
Les éléments visuels doivent être traduits pour ceux qui ne les voient pas. C'est le rôle des alternatives textuelles. Le designer, en choisissant une image, définit son intention. Il est le mieux placé pour décider de la nature de l'alternative textuelle.
Stratégie Alt Text (RGAA 1.1)
- Image Décorative :
Sert à l'ambiance ou est redondante (ex: icône "téléphone" à côté du numéro écrit). Ignorée par le lecteur d'écran (
alt=""). Le designer doit l'annoter comme "décorative". - Image Informative :
Décrire le sens, pas l'apparence. Pas "Image d'un homme en costume serrant la main", mais "Accord commercial conclu entre les deux parties".
Texte sur image
Le texte incrusté sur une image nécessite un traitement spécifique.
Ombre portée ou overlay sombre pour garantir le ratio de contraste sur des zones hétérogènes.
Ratio requis : 4.5:1 (texte courant) ou 3:1 (grand texte) même sur photo.
Icônes : Filled vs Outline
Plus difficile à décoder cognitivement
Reconnaissance plus rapide
Nom accessible : Une icône de loupe doit être lue "Rechercher" par le lecteur d'écran, pas "Loupe" ni "icon-search" ni "Vector 12". Le designer doit l'annoter dans Figma.
Visualisation de données accessible
Couleur seule, légende déportée
Motifs + bordures + labels directs
Hachures, points, lignes en plus de la couleur
Séparateurs blancs entre les segments (3:1 min)
Éviter les légendes déportées
8. Design Mobile, Tactile & Gestuelle
Le contexte mobile introduit des contraintes physiques (taille d'écran, usage extérieur, mains occupées) et des interactions spécifiques. Certains utilisateurs ne peuvent pas effectuer de gestes multipoints (pincement, rotation) ou de gestes nécessitant une grande dextérité.
Gestes mobiles : Toujours une alternative simple
Swipe pour supprimer
Bouton "Modifier" → Menu → "Supprimer"
Pinch pour zoomer
Boutons + / - ou double-tap
Shake to undo
Tremblements, appareil fixé. Doit être désactivable.
Règle RGAA (critère 13.10) : toute fonctionnalité disponible au moyen d'un geste complexe (multipoint ou trajectoire) doit l'être aussi au moyen d'un geste simple, c'est-à-dire un appui en un point unique, hors cas particuliers.
Dimensions des cibles tactiles
- Android/Material : 48 x 48 dp minimum
- iOS/HIG : 44 x 44 pt minimum
- Espacement : 8px entre les cibles pour éviter les erreurs
D'où viennent ces valeurs : la taille de cible est un critère WCAG, en niveau AAA pour 44 x 44 px (2.5.5) et en niveau AA depuis WCAG 2.2 pour 24 x 24 px (2.5.8). Le RGAA 4.1 transpose WCAG 2.1 : elle n'y figure pas encore, mais le RGAA 5 devrait la reprendre. Et de toute façon, une cible confortable est d'abord une bonne pratique d'ergonomie : elle profite aux gestes imprécis, aux doigts larges, à l'usage d'une seule main.
Le critère RGAA 13.11, souvent cité à ce sujet, traite d'autre chose : l'annulation d'une action déclenchée au pointage (WCAG 2.5.2, niveau A).
Orientation et adaptabilité
L'application doit fonctionner en mode Portrait ET Paysage (critère 13.9, WCAG 1.3.4, niveau AA). Certains utilisateurs de fauteuils roulants ont des tablettes fixées en mode Paysage de manière permanente.
Bloquer l'orientation est une violation de l'accessibilité (sauf cas très spécifiques comme une app piano).
9. Mouvement & Vestibulaire
Les animations modernes (parallaxe, zoom) peuvent provoquer nausées et vertiges (35% des +40 ans ont expérimenté une dysfonction vestibulaire selon les études NIH).
Reduced Motion
Prévoyez une version "calme" si l'utilisateur a activé prefers-reduced-motion dans son OS.
- • Remplacer les slides par des fondus (fade)
- • Désactiver la parallaxe
- • Supprimer les animations décoratives
Interdiction absolue
Jamais de clignotement à 3 fois par seconde ou plus. Risque de crise d'épilepsie photosensible. C'est le critère RGAA 13.7(WCAG 2.3.1, niveau A). Le critère est également satisfait si la surface cumulée des effets reste inférieure ou égale à 21 824 pixels.
Vigilance sur les GIFs animés et vidéos promotionnelles !
@media (prefers-reduced-motion: reduce) pour détecter la préférence utilisateur et adapter automatiquement vos animations.10. Accessibilité Cognitive
L'accessibilité cognitive vise à réduire la charge mentale pour les utilisateurs ayant des troubles de l'attention (TDAH), de la mémoire, de l'apprentissage (dyslexie) ou du spectre autistique.
Ces troubles sont souvent invisibles mais touchent une large part de la population. Un design clair et prévisible bénéficie à tous les utilisateurs, pas seulement ceux en situation de handicap.
Accessibilité Cognitive
TDAH, dyslexie, autisme, troubles de la mémoire
Clarté
- • Boutons reconnaissables (pas de flat design extrême)
- • Actions explicites ("Envoyer ma commande" vs "OK")
- • Icônes universelles avec labels
Consistance
- • Navigation identique sur toutes les pages
- • Même position pour les actions récurrentes
- • Patterns familiers (ne réinventez pas la roue)
Distractions
- • Éviter les animations auto-play
- • Pas de pop-ups intrusives
- • Réduire le bruit visuel
Feedback
- • Confirmations claires des actions
- • États de chargement visibles
- • Messages d'erreur bienveillants
La règle d'or : Affordance explicite
Un bouton doit ressembler à un bouton. L'hyper-minimalisme (Flat Design extrême) où l'on ne distingue plus ce qui est cliquable de ce qui est décoratif crée une anxiété et une fatigue cognitive pour tous les utilisateurs.
Le Relais Design-Dev (Handoff)
L'étape critique. Une maquette sans annotations est un piège. Documentez l'invisible.
1Checklist Annotations
- Niveaux de titres (H1, H2...)
- Ordre de focus (si différent visuel)
- Textes alternatifs (Alt text)
- Landmarks (Header, Main, Aside)
2Collaboration
Ne travaillez pas en silo. Demandez tôt au développeur : "Si je designe ce composant complexe, est-ce faisable accessiblement ?"
💡 Conseil : Utilisez le "Figma Accessibility Annotation Kit" (Microsoft, Indeed ou eBay).
Checklist d'annotation pour le Handoff
Ce que le designer doit documenter pour les développeurs
Hiérarchie des titres
Marquer H1, H2, H3 sur les maquettes
Ordre de focus
Dessiner le chemin clavier si différent du visuel
Textes alternatifs
Rédiger les alts dans les propriétés Figma
Rôles ARIA
Si div agit comme bouton, le préciser
Landmarks
Définir Header, Main, Nav, Footer, Aside
Comportements dynamiques
'Au clic, focus va sur le champ X'
Outils recommandés : Figma A11y Annotation Kit (Microsoft, Indeed, eBay), GitHub Annotation Toolkit, CVS Health Inclusive Design Kit
Collaboration en amont
Le designer doit impliquer les développeurs tôt pour valider la faisabilité accessible. "Si je designe ce menu déroulant innovant, est-ce qu'on pourra le rendre navigable au clavier facilement ?"
Cette discussion évite de concevoir des "monstres d'inaccessibilité" qui devront être recodés ou redesignés en urgence.
Tableau de Synthèse
Récapitulatif des actions indispensables pour un design accessible. Utilisez cette checklist avant chaque livraison de maquette.
Checklist du Designer Accessible
Les actions indispensables avant livraison, avec leur référence et leur niveau. Une ligne référencée « WCAG » désigne un critère que le RGAA 4.1 ne transpose pas encore et que le RGAA 5 devrait reprendre : dans l'intervalle, c'est une bonne pratique d'ergonomie.
Sources & Ressources Officielles
- WCAG 2.1Norme internationale dont le RGAA 4.1 transpose le niveau AA
- RGAA 4.1Référentiel français
- Material DesignGoogle Accessibility
- Human InterfaceApple Guidelines
Ressources complémentaires citées dans ce guide
Conclusion
Pour le graphiste et le designer d'interface, l'accessibilité n'est plus une option. C'est une compétence professionnelle centrale, au même titre que la maîtrise de la couleur ou de la composition.
"L'accessibilité est un voyage, pas une destination. Elle requiert de l'empathie, de la rigueur technique et une volonté constante d'apprendre."