Imaginez une boutique magnifique… avec une marche de 40 cm devant la porte et aucune rampe. Belle vitrine, clients bloqués dehors.
C’est exactement ce qui arrive à un site web non accessible. Et pas seulement pour les personnes en situation de handicap : pour quiconque a un écran plein soleil, un bras dans le plâtre ou une connexion capricieuse.
L’accessibilité, c’est quoi exactement ?
Rendre un site accessible, c’est permettre à tous de le consulter et de s’en servir : personnes malvoyantes, daltoniennes, sourdes, ayant des difficultés motrices ou cognitives, mais aussi seniors ou simples utilisateurs pressés.
En France, la référence s’appelle le RGAA, et à l’échelle européenne, les règles se sont durcies avec la directive sur l’accessibilité (en application depuis juin 2025 pour certains services, dont le e-commerce).
Suis-je concerné par le RGAA ?
Cela dépend de votre activité et de la taille de votre structure. Les organismes publics sont concernés depuis longtemps, et de plus en plus de sociétés privées le sont, notamment celles qui vendent en ligne. Certaines micro-entreprises bénéficient d’exceptions.
Le plus sûr : faire vérifier votre situation, et surtout, ne pas attendre d’y être obligé pour bien faire. Un site accessible, c’est plus de visiteurs qui arrivent au bout de leur parcours, obligation légale ou pas.
🎨 Erreur n°1 : des contrastes trop faibles
Le gris clair sur fond blanc, c’est tendance. C’est aussi illisible pour beaucoup de monde.
Le contraste se mesure avec un ratio, de 1:1 (aucun contraste, même couleur) à 21:1 (noir sur blanc). Voici les repères à garder en tête :
- 4,5:1 minimum pour le texte normal (niveau AA, celui visé par le RGAA) ;
- 3:1 minimum pour le grand texte, c’est-à-dire à partir d’environ 24 px, ou 19 px en gras ;
- 3:1 minimum aussi pour les éléments d’interface : bordures de champs, icônes utiles, boutons, état « sélectionné » ;
- 7:1 pour le niveau AAA, plus exigeant.
Bon réflexe : testez vos couleurs dès la maquette. Ça prend 10 secondes, et ça évite de tout reprendre en fin de projet.
🖼️ Erreur n°2 : des images sans texte alternatif
Le texte alternatif décrit l’image à ceux qui ne la voient pas (et à Google, au passage 😉). Une photo d’équipe légendée « IMG_4832 » ne raconte rien à personne.
Mais attention : toutes les images ne se traitent pas de la même façon. Tout dépend du rôle qu’elle joue.
Une image qui apporte une information (icone de services, graphique, plan d’accès) : décrivez ce qu’on y voit, en une phrase courte.
Une image purement décorative (un motif, une ambiance, une photo qui répète le texte à côté) : pas besoin de la décrire. Mieux vaut la signaler comme décorative, pour que les personnes qui utilisent un lecteur d’écran ne perdent pas de temps avec.
⌨️ Erreur n°3 : un site impossible à utiliser au clavier
Essayez : posez la souris et naviguez avec la touche Tab. Si le menu disparaît ou que vous ne savez plus où vous êtes, c’est que le focus n’est pas géré.
Beaucoup de personnes naviguent uniquement au clavier (handicap moteur, utilisateurs de lecteurs d’écran, ou simplement pianistes du raccourci). Pour elles, trois règles d’or :
- Un focus visible : on doit toujours voir quel élément est sélectionné. Supprimer le contour du focus « parce que c’est moche », c’est retirer le fil d’Ariane à tout le monde. Redessinez-le plutôt, avec le même souci de contraste ;
- Un ordre logique : la touche Tab doit suivre l’ordre de lecture de la page, pas sauter d’un coin à l’autre ;
- Aucun piège : on doit pouvoir entrer et sortir d’un menu, d’un carrousel ou d’une fenêtre modale au clavier (souvent avec la touche Échap).
📝 Erreur n°4 : des formulaires sans étiquettes claires
Un champ sans libellé visible, un texte qui disparaît dès qu’on tape, un message d’erreur uniquement en rouge… et voilà des utilisateurs qui abandonnent.
Chaque champ doit avoir une étiquette visible qui reste affichée pendant la saisie. Chaque erreur doit être expliquée en toutes lettres, à proximité du champ concerné, et pas seulement signalée par une couleur. Et si un champ est obligatoire, précisez-le en amont.
Résultat : moins d’abandons pour tout le monde, et un taux de conversion qui vous dit merci.
Le bonus qu’on ne vous dit pas
Un site accessible est aussi un site mieux structuré, plus lisible, plus rapide à comprendre… et donc souvent mieux référencé. Titres hiérarchisés, textes alternatifs, liens explicites, code propre : ce que les lecteurs d’écran apprécient, Google l’apprécie aussi. L’accessibilité et le SEO sont de très bons amis.
✅ En résumé
Pour garder l’essentiel en tête :
- des contrastes d’au moins 4,5:1 pour le texte, 3:1 pour le grand texte et les éléments d’interface ;
- un texte alternatif adapté au rôle de l’image : informatif, vide si décorative ;
- une navigation au clavier fluide, avec un focus visible ;
- des formulaires avec étiquettes visibles et messages d’erreur explicites.
L’accessibilité n’est pas une contrainte pour développeurs pointilleux : c’est de l’hospitalité numérique. Quelques réflexes dès la conception font déjà une énorme différence.
Chez Pixelea, on l’intègre dès le webdesign, pas en rustine à la fin. Envie de savoir où en est votre site ? Parlons-en.
