Aller au contenu principal
Guide Officiel RGAA Checker

L'Accessibilité Numérique
pour les Designers

Le guide ultime pour concevoir des interfaces inclusives. Du choix des couleurs à la documentation pour les développeurs, maîtrisez l'art du design accessible. "Inclusive Design" n'est plus une option.

Lecture : 25 min 11 chapitres complets Conforme RGAA 4.1

"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

1 milliard

Personnes en situation de handicap dans le monde

Source: OMS, 2023
12 millions

Français concernés par un handicap

Source: INSEE
8%

Hommes atteints de daltonisme

Source: RGAA 3.1
35%

Adultes +40 ans avec troubles vestibulaires

Source: NIH Studies

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, les chiffres parlent

+15%
Audience élargie

Inclusion des personnes handicapées, seniors, et situations temporaires

+30%
Meilleur SEO

Structure sémantique = meilleur indexation Google

-20%
Coûts maintenance

Code plus propre, moins de bugs, meilleure testabilité

"Une interface accessible est intrinsèquement plus claire, mieux structurée et plus performante pour tous les utilisateurs."

— Principe du Design Universel

1. Couleur et Contraste

La couleur est un vecteur émotionnel puissant, mais la perception est inégale : 8% des hommes et 0.5% des femmes souffrent de daltonisme.

1.1 Ratios de Contraste (RGAA 3.2)

Le contraste se base sur la luminosité relative, pas juste la teinte.

Échelle de Conformité WCAG

3:1
4.5:1 (AA)
7:1 (AAA)
Non conformeGrand Texte
& UITexte
CourantOptimal

Le ratio se calcule entre la couleur du texte et son arrière-plan.
(Ex: Noir sur Blanc = 21:1)

Seuils de conformité RGAA 4.1 (Niveau AA)

Standard
4.5:1

Texte courant

Paragraphes, labels, sous-titres de taille standard.

Large & UI
3:1

Grand texte & Interface

Texte ≥24px (ou ≥18.5px gras). Icônes, champs de saisie, boutons.

Optimal
7:1

Niveau AAA

Recommandé pour les textes longs et la lecture sur mobile en extérieur.

Outils recommandés pour designer

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 8% des hommes

Vision normale
SuccèsErreur
Deutéranopie (6% hommes)
SuccèsErreur

Indistinguables !

Solution accessible
Succès Erreur

Icône + Couleur = Clair pour tous

Répartition du daltonisme dans la population

Population masculine
92%
6%
Vision normale
Deutéranopie
Autres
Population féminine
99.5%
8%
des hommes

Soit environ 2.6 millions d'hommes en France qui ne distinguent pas rouge/vert.

Types les plus courants :
  • Deutéranopie (6%) - Confusion rouge/vert
  • Protanopie (1%) - Insensibilité au rouge
  • Tritanopie (0.01%) - Confusion bleu/jaune

Source: RGAA 3.1 - "Information par la couleur", données épidémiologiques internationales

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.

Mode Clair
Action
Annuler
  • • Ombres pour la profondeur
  • • Couleurs saturées OK
  • • Fond blanc (#FFFFFF)
Mode Sombre
Action
Annuler
  • • 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, l et 1. É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é

Texte
Hauteur d'x

Lisible
Interlignage
(min 1.5x)

Verdana / Segoe

Recommandé

Ouvertures larges, x-height élevée

Times New Roman

À éviter (écran)

Empattements fins, x-height faible

Métriques typographiques RGAA

Longueur de ligne
Évite la fatigue oculaire
45-75
caractères
RGAA 10.9
Interlignage
Facilite le suivi visuel
≥ 1.5x
taille police
RGAA 10.12
Espacement paragraphes
Pause cognitive claire
≥ 2x
taille police
RGAA 10.12
Redimensionnement
Zoom utilisateur
200%
sans perte
RGAA 10.4
Reflow
Équivalent zoom 400%
320px
largeur min
RGAA 10.11

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

Défaut
Survol (Hover)
Focus ClavierDouble indicateur
Désactivé

Les 5 états interactifs obligatoires

Chaque composant interactif doit être designé et documenté dans ces 5 états.

1. Défaut(Rest)
2. Survol(Hover)
3. Focus(Keyboard)
4. Actif(Pressed)
5. Désactivé(Disabled)

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

Trop petit

Difficile à atteindre sans erreur.
Risque de "Fat Finger".

Standard 44px

Icône centrée dans une zone
active de 44x44px min.

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 obligatoire si lecture auto.
  • Flèches de navigation visibles (pas juste des points).
  • Pas de piège au focus clavier.

Modales

Interruptives.

  • Croix de fermeture explicite et accessible.
  • Fermeture au clic sur l'overlay (fond).
  • Focus piégé dans la modale tant qu'elle est ouverte.

Onglets

Navigation interne.

  • Lien visuel fort entre l'onglet actif et le contenu.
  • Distinction claire entre état "Focus" et état "Sélectionné".

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

Outline (Contour)

Plus difficile à décoder cognitivement

Filled (Plein)

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

Inaccessible
A B C

Couleur seule, légende déportée

Accessible
B: 25%C: 25%A: 50%

Motifs + bordures + labels directs

Motifs (Patterns)

Hachures, points, lignes en plus de la couleur

Bordures

Séparateurs blancs entre les segments (3:1 min)

Labels directs

É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

Alternative :

Bouton "Modifier" → Menu → "Supprimer"

👆👆

Pinch pour zoomer

Alternative :

Boutons + / - ou double-tap

📱〰️

Shake to undo

Problématique !

Tremblements, appareil fixé. Doit être désactivable.

Règle RGAA : Toute action déclenchée par un geste complexe (multipoints ou trajectoire) doit avoir une alternative via un simple tap (clic).

Dimensions des cibles tactiles

  • Android/Material : 48 x 48 dp minimum
  • iOS/HIG : 44 x 44 pt minimum
  • RGAA 13.11 (AA) : 24 x 24 px minimum légal
  • Espacement : 8px entre les cibles pour éviter les erreurs

Orientation et adaptabilité

L'application doit fonctionner en mode Portrait ET Paysage. 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. Risque de crise d'épilepsie photosensible (RGAA 4.1).

Vigilance sur les GIFs animés et vidéos promotionnelles !

Astuce CSS : Utilisez @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

CouleurVérifier contraste texte > 4.5:1
RGAA 3.2AA
CouleurVérifier contraste UI > 3:1
RGAA 3.3AA
CouleurNe pas utiliser la couleur seule pour l'info
RGAA 3.1A
TypoPermettre resize 200% sans casse
RGAA 10.4AA
TypoInterlignage ≥ 1.5x, espacement ≥ 2x
RGAA 10.12AA
InteractionFocus visible et contrasté
RGAA 10.7AA
InteractionCibles tactiles ≥ 44px
RGAA 13.11AAA
ImagesDéfinir stratégie Alt Text
RGAA 1.1A
FormulairesLabels visibles partout
RGAA 11.1A
MouvementBouton pause sur auto-play
RGAA 4.11A
StructureHiérarchie titres logique (H1>H2>H3)
RGAA 9.1A
NavigationLien d'évitement (Skip Link)
RGAA 12.7A

Sources & Ressources Officielles

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."

Tester l'accessibilité de votre site