Un développeur m'a envoyé un jour une maquette en me disant, très fier : « tout est responsive, c'est bon ». J'ai branché mon lecteur d'écran, j'ai navigué au clavier, et j'ai éclaté de rire. Jaune sur blanc. Un menu qui disparaît dès qu'on appuie sur Tab. Des images décoratives avec un alt qui annonçait « image1.png ». Il avait bossé trois semaines. J'ai mis quarante minutes à lister trente-deux problèmes.
Voilà le vrai sujet des bonnes pratiques d'accessibilité web. Pas la théorie. Le décalage entre ce qu'on croit avoir fait et ce qui se passe quand quelqu'un utilise vraiment votre site autrement qu'avec une souris et deux yeux qui vont bien.
Points clés à retenir
- L'accessibilité ne concerne pas « les autres » : elle vous concerne dans cinq ans, avec une vue qui baisse et un poignet abîmé.
- Le RGAA compte 106 critères, la WCAG 2.2 en compte davantage : une checklist de dix points ne remplace pas un audit.
- Les outils automatiques détectent à peu près un tiers des problèmes réels. Le reste se trouve à la main, avec de vrais utilisateurs.
- L'accessibilité cognitive et les troubles DYS sont les grands oubliés des bonnes pratiques rabâchées partout.
- La conformité coûte cher une fois. La non-conformité coûte cher tous les mois.
Qui est concerné par l'accessibilité numérique ? Plus de monde que vous ne le pensez
On me pose souvent la question sous forme de raccourci : « c'est pour les aveugles, non ? ». Non. Et cette vision étroite est exactement ce qui produit des sites à moitié accessibles.
Il y a le handicap permanent : cécité, surdité, malvoyance, troubles moteurs, dyslexie. Il y a le handicap temporaire : bras cassé, opération de l'œil, commotion cérébrale. Et il y a le handicap situationnel, celui dont personne ne parle : forte luminosité qui rend un écran illisible, environnement bruyant où l'on ne peut pas compter sur le son, connexion lente, main occupée à tenir un enfant.
Le cas du bras cassé
Un membre de mon équipe s'est cassé le poignet droit. Gaucher contrarié, il a dû tout faire de la main gauche pendant six semaines. Sur la moitié de nos outils internes, il ne pouvait plus valider un formulaire. Les boutons de type « glisser-déposer » étaient infaisables. Les menus qui ne s'ouvrent qu'au survol, inutilisables.
Six semaines. C'est tout. Et pourtant, ce type d'accessibilité — naviguer entièrement au clavier, ne rien faire dépendre du survol, ne rien faire dépendre du glisser — est la base de la base. Rien de technique, rien qui demande un budget.
Et le vieillissement, cette échéance qui vous attend tous
La presbytie commence autour de quarante-cinq ans. La capacité à distinguer deux couleurs proches se dégrade. La tolérance aux animations rapides et aux contrastes violents chute. Les sites conçus pour un œil de vingt ans deviennent pénibles à lire pour une grande partie de la population vieillissante — qui est aussi celle qui a le plus d'argent à dépenser.
Quand je conçois un contraste ou une taille de police, je pense à ma mère qui lit son journal à bout de bras. Ça change tout.
Les bonnes pratiques qui font vraiment la différence
Vous trouverez partout des listes de cinquante points. Je vais être plus direct : voici celles qui, dans mon expérience, règlent l'immense majorité des blocages réels.
Structurer avant de décorer
Le premier réflexe à acquérir n'est pas visuel, il est sémantique. Un titre doit être un vrai <h2>, pas un <div> stylé en gros et gras. Un bouton doit être un <button>, pas un lien déguisé. Un lecteur d'écran ne voit pas votre CSS : il voit votre arborescence.
J'ai repris le site d'un client dont toute la page d'accueil reposait sur des span stylés. À l'écran, superbe. Au lecteur d'écran, une bouillie de texte sans hiérarchie, sans repère, sans moyen de sauter d'une section à l'autre. On a tout réécrit en HTML propre. Le design n'a pas bougé d'un pixel. Le coût : deux jours de travail.
Le contraste, ce n'est pas négociable
Le ratio minimum entre le texte et son fond est une règle simple, et c'est probablement l'erreur que je vois le plus souvent. Le gris clair sur blanc, c'est joli dans une maquette Figma affichée sur un écran neuf. Sur le téléphone d'un quinquagénaire en extérieur, c'est illisible.
| Élément | Erreur fréquente | Ce qu'il faut viser |
|---|---|---|
| Texte courant | Gris clair sur blanc | Contraste suffisant dès le premier jet |
| État de focus | Supprimé par « esthétique » | Visible, contrasté, jamais outline: none sans remplacement |
| Images informatives | Alt vide ou nom de fichier | Description de l'information portée |
| Champs de formulaire | Placeholder comme seul label | Un vrai <label> lié au champ |
| Couleur seule | « Les champs en rouge sont obligatoires » | Un symbole ou un texte, pas juste la couleur |
Le point sur outline: none mérite qu'on s'y arrête. Pendant des années, retirer le contour bleu autour d'un élément au focus a été présenté comme un geste de design. En réalité, ça supprime le seul repère dont dispose une personne qui navigue au clavier. C'est comme peindre en noir la ligne jaune d'un escalier.
Checklist rapide ou véritable audit : où se situe la limite ?
La réponse honnête : une checklist détecte les évidences, un audit trouve les vrais problèmes. Ce ne sont pas les mêmes exercices, et les confondre est une erreur que je vois chez beaucoup d'équipes qui pensent être conformes.
Ce que détecte un outil automatique
Un scanner automatique repère les problèmes mécaniques : une image sans attribut alt, un contraste insuffisant calculable, un champ sans label, une langue de page non déclarée. C'est utile, rapide, et ça tourne à chaque déploiement si vous l'intégrez à votre pipeline.
Mais il ne détectera jamais qu'un texte alternatif, bien que présent, ne dit rien d'utile. Il ne verra pas qu'un parcours de commande est incompréhensible. Il ne repérera pas qu'une modale piège le focus et empêche de sortir. Sur un site que j'ai audité, l'outil annonçait « 94 % conforme ». Le test manuel avec une utilisatrice de lecteur d'écran a révélé un blocage total sur l'étape de paiement. Le pourcentage ne voulait rien dire.
Les limites de l'auto-évaluation
Se tester soi-même a un angle mort énorme : on sait où sont les choses. On connaît le site par cœur. Une personne qui découvre l'interface ne se comporte pas comme vous. C'est pour ça que tester avec de vrais utilisateurs en situation de handicap n'est pas un luxe, c'est la seule méthode qui révèle les frictions que personne dans l'équipe ne peut imaginer.
Pour un site qui vend en ligne, je prévois toujours au moins deux sessions. Coût : quelques centaines d'euros et une demi-journée. Ce qu'on y apprend vaut dix rapports automatiques.
L'angle mort : l'accessibilité cognitive et les troubles DYS
Parlons de ce dont presque personne ne parle. La WCAG elle-même est la plus faible sur ce terrain, et les checklists classiques l'évacuent en trois lignes.
Une personne dyslexique ne bute pas sur votre contraste. Elle bute sur vos phrases. Une personne avec un trouble de l'attention ne décroche pas parce que votre bouton est mal placé, mais parce que votre page affiche onze appels à l'action concurrents.
Ce qui aide, concrètement
- Des phrases courtes. Une idée par phrase, une idée par paragraphe.
- Du texte aligné à gauche, jamais justifié : les espaces irréguliers du justifié créent des « rivières » qui gênent la lecture.
- Pas de blocs de texte compact. Aérer n'est pas perdre de la place, c'est gagner des lecteurs.
- Un langage clair : éviter les phrases à double négation, les métaphores inutiles, le jargon quand un mot simple existe.
- Laisser le choix : ne pas bloquer le zoom, ne pas forcer une police que l'utilisateur ne peut pas remplacer.
J'ai appliqué ces règles à un long guide que je publiais. J'ai divisé mes phrases par deux, supprimé les blocs de huit lignes, transformé deux tableaux complexes en listes. Mon taux de lecture jusqu'au bout a progressé de façon nette, et pas seulement auprès des personnes concernées. Les gens lisent plus quand c'est plus simple. Étonnant, non ?
Obligations légales et coût réel : la question qu'on me pose tout le temps
En France, le RGAA encadre l'accessibilité des services publics et de nombreuses organisations privées au-delà d'un certain chiffre d'affaires. Pour les autres, c'est une question de responsabilité et de marché, mais l'obligation progresse et le sens de l'histoire est clair : un site inaccessible devient un problème, pas un détail.
Combien ça coûte, franchement ?
Je ne vais pas vous donner de chiffres inventés. Ce que je peux vous dire, c'est ce que ça a représenté dans mes projets.
Intégrer l'accessibilité dès la conception : quasiment gratuit. Quelques heures de plus pour choisir une palette contrastée, structurer proprement, tester au clavier au fur et à mesure. Le surcoût réel se situe dans les marges d'erreur et de relecture, pas dans le développement.
Reprendre un site existant jamais pensé pour ça : là, ça pique. Sur un projet de taille moyenne, la remise à niveau complète a mobilisé plusieurs semaines, dont une grande partie à défaire des habitudes. C'est l'écart entre réparer et construire, et il est brutal.
Le vrai piège, c'est de traiter l'accessibilité comme un chantier qu'on fera « après ». Après, ça veut dire jamais, ou ça veut dire cher.
Par où commencer demain matin
Oubliez les 106 critères pour aujourd'hui. Faites un test simple : débranchez votre souris, naviguez votre site entier au clavier. Vous verrez apparaître un focus que vous ignoriez, des zones inaccessibles, des pièges. Ensuite, allumez un lecteur d'écran gratuit et tentez de remplir un formulaire les yeux fermés. Vous n'irez pas loin, et c'est exactement le but.
Ces deux exercices, faits une fois, vous feront plus progresser que trois lectures de référentiels. Le reste viendra naturellement, parce qu'une fois qu'on a entendu son propre site annoncé par une voix synthétique — « bouton, bouton, bouton, image1.png » — on ne peut plus l'oublier.
La conformité, c'est une cible. L'accessibilité, c'est une posture. La première se coche, la seconde se cultive. Et si vous ne retenez qu'une chose : le jour où votre site sera parfaitement accessible pour quelqu'un qui utilise un clavier et une synthèse vocale, il sera simplement meilleur pour tout le monde. Ce n'est pas de la générosité. C'est de la bonne conception.
