L'accessibilité en design web ne concerne pas seulement les personnes en situation de handicap — elle améliore l'expérience de tous. Un site accessible est plus lisible, plus utilisable et mieux référencé. Avec 15 % de la population mondiale vivant avec un handicap, l'accessibilité design n'est plus optionnelle : c'est une responsabilité éthique et souvent légale.
Comprendre les différents types de handicaps
Les handicaps à considérer en design : visuels (daltonisme, cécité, basse vision), moteurs (tremblements, paralysie, utilisation du clavier uniquement), cognitifs (dyslexie, TDAH, difficultés d'apprentissage), auditifs (surdité, malentendance), et temporaires (bras cassé, lunettes cassées, écran au soleil). Chaque catégorie implique des adaptations spécifiques dans votre design.
Les standards WCAG : le cadre de référence
Les Web Content Accessibility Guidelines (WCAG 2.2) définissent 3 niveaux de conformité : A (minimum), AA (standard légal dans de nombreux pays), AAA (optimal). La conformité WCAG AA est requise par la législation française (RGAA) pour les services publics et recommandée pour tous les sites. Elle couvre contraste, navigation clavier, alternatives textuelles, et bien plus.
Daltonisme : concevoir sans dépendre des couleurs seules
8 % des hommes et 0,5 % des femmes sont daltoniens. La deutéranopie (rouge-vert) est la plus fréquente. Règle fondamentale : ne jamais transmettre une information uniquement par la couleur. Un bouton rouge "erreur" doit aussi avoir une icône ⚠ ou un texte. Utilisez des patterns, textures ou formes en complément. Testez avec Colour Blind pour simuler différents types de daltonisme.
Contraste : rendre le texte lisible
WCAG AA exige un ratio de contraste de 4.5:1 pour le texte normal (3:1 pour les grands textes ≥18px). Un texte gris clair sur fond blanc ou texte bleu sur fond rouge peuvent échouer ce test malgré une apparente lisibilité. WebAIM Contrast Checker calcule instantanément le ratio. Soyez particulièrement vigilant sur les placeholders de formulaire et les textes d'aide.
Focus visible : navigation clavier accessible
Tous les éléments interactifs doivent afficher un indicateur de focus visible quand ils reçoivent la focus clavier. Beaucoup de designers suppriment l'outline CSS par défaut (outline: none) sans fournir d'alternative — c'est une erreur grave d'accessibilité. Concevez un focus style personnalisé qui s'intègre à votre design : outline coloré, box-shadow, ou background change. WCAG 2.2 a renforcé les exigences sur le focus visible.
Taille des cibles tactiles
Sur mobile, les zones cliquables/tactiles doivent mesurer au minimum 44×44px (recommandation Apple) voire 48×48px (Material Design). Les liens dans du texte courant sont difficiles à toucher sur mobile. Espacez suffisamment les éléments interactifs pour éviter les erreurs de tap accidentelles — particulièrement important pour les listes d'actions comme les boutons dans un tableau.
Textes alternatifs et médias alternatifs
Toutes les images porteuses d'information doivent avoir un alt descriptif. Les images décoratives : alt="" (chaîne vide, pas d'attribut absent). Les vidéos nécessitent des sous-titres (automatiques + correction humaine). Les podcasts et contenus audio doivent avoir une transcription textuelle. Ces alternatives bénéficient aussi au SEO et aux robots.
Tester l'accessibilité réellement
Les outils automatiques (Axe DevTools, Lighthouse accessibility score) détectent 30-40 % des problèmes. Le reste nécessite des tests manuels : navigation complète au clavier, test avec VoiceOver (Mac/iOS) ou NVDA (Windows), test à fort grossissement (400%), test avec des utilisateurs en situation de handicap. Le WebAIM Million révèle que 95 % des homepages ont des erreurs d'accessibilité détectables automatiquement.
Conclusion
Design est une compétence incontournable pour tout développeur web ou freelance souhaitant progresser efficacement. En appliquant les bonnes pratiques présentées dans ce guide, vous serez en mesure d'obtenir des résultats concrets et mesurables.
Pour aller plus loin et approfondir vos connaissances, consultez la Figma Learn et n'hésitez pas à expérimenter par vous-même. La pratique régulière est la clé du succès dans ce domaine.
