Accessibilité
Designer pour tout le monde, sans exception.
Accessibilité
L'accessibilité n'est pas une feature optionnelle qu'on ajoute à la fin. C'est un standard de qualité. Un site accessible est aussi un site mieux indexé, plus performant et plus agréable pour tout le monde.
Pourquoi c'est non-négociable
C'est une question d'inclusion
15% de la population mondiale vit avec un handicap. Ignorer l'accessibilité, c'est exclure des utilisateurs — et potentiellement des clients.
C'est bon pour le SEO
Les pratiques d'accessibilité (HTML sémantique, structure de titres, textes alternatifs) sont exactement ce que Google valorise.
C'est obligatoire
En Europe (directive européenne 2016/2102) et dans beaucoup de pays, l'accessibilité n'est plus une option pour les sites publics et de plus en plus de sites privés.
Les fondamentaux
Contrastes
Le texte doit être lisible. On vise un ratio de contraste minimum de 4.5:1 pour le texte normal, 3:1 pour le texte large (WCAG AA).
Outils pour vérifier : Contrast Checker, plugin Figma "Stark".
Navigation clavier
Tout ce qui est cliquable doit être accessible au clavier :
- Tab pour naviguer entre les éléments
- Enter/Space pour activer
- Escape pour fermer les modals
Si vous ne pouvez pas utiliser le site sans souris, il y a un problème.
Focus visible
Quand un élément est sélectionné au clavier, ça doit se voir clairement. Pas de outline: none sans alternative visible.
Textes alternatifs
Les images qui transmettent de l'information ont un alt descriptif. Les images décoratives ont un alt="" (vide).
Formulaires accessibles
Les formulaires sont souvent un cauchemar d'accessibilité. Nos règles :
- Labels explicites — chaque champ a un label visible et associé programmatiquement
- Messages d'erreur clairs — pas juste "erreur", mais "Ce champ est requis" ou "Format d'email invalide"
- Feedback immédiat — l'utilisateur sait si ça a marché (succès, erreur, chargement)
- Zones cliquables confortables — minimum 44x44px pour les touch targets
Structure et sémantique
- Un seul H1 par page
- Hiérarchie de titres logique — pas de H1 suivi d'un H4
- Landmarks HTML —
header,nav,main,footerpour structurer la page - Listes pour les listes —
ul/olpour les menus, les features, etc.
Ce qu'on teste
Tests automatiques
- Lighthouse — score accessibilité > 90
- axe DevTools — scan des erreurs courantes
Tests manuels
- Parcours complet au clavier (sans souris)
- Focus visible sur tous les éléments interactifs
- Lecteur d'écran sur les pages critiques (VoiceOver, NVDA)
- Zoom 200% sans perte de contenu
Erreurs courantes qu'on évite
- ❌ Information transmise uniquement par la couleur (ex: champs en erreur juste en rouge)
- ❌ Animations qui ne peuvent pas être désactivées
- ❌ Vidéos en autoplay avec son
- ❌ Timeouts trop courts sur les formulaires
- ❌ Contenu qui apparaît uniquement au hover (inaccessible au clavier et mobile)
Ressources
- WCAG 2.1 Guidelines — la référence
- WebAIM — guides pratiques
- The A11Y Project — checklist et patterns