Il y a quelques mois, j'ai reçu un mail que je n'oublierai pas de sitôt. Une lectrice de mon blog, malvoyante, me disait à quel point elle aimait mes articles… et à quel point elle galérait pour les lire. Menu qui disparaît au zoom, images sans description, contraste gris sur gris. Trois ans que j'écrivais sur le web, et mon propre site était une passoire. J'ai passé la soirée à le tester au clavier, sans souris. Verdict : impossible de valider le formulaire de contact. J'ai eu honte.
Depuis, j'ai repris tout le chantier, lu la norme WCAG en long et en large, et je vous livre ici les bonnes pratiques pour un site web accessible que j'aurais aimé qu'on m'explique plus tôt. Pas de théorie tiède, du concret, du code, et les erreurs que j'ai commises.
Points clés à retenir
- L'accessibilité n'est pas une couche qu'on ajoute à la fin : c'est la structure de la page qui la rend possible ou non.
- Trois tests manuels (clavier seul, zoom à 200 %, lecteur d'écran) détectent l'essentiel des blocages réels.
- Un contraste minimum de 4,5:1 pour le texte courant, un focus toujours visible, une alternative textuelle sur chaque image qui porte de l'information.
- Les outils automatisés ne repèrent qu'une minorité des problèmes ; les tests humains restent irremplaçables.
- En France, le RGAA sert de référentiel opposable dans certains cadres, et le European Accessibility Act élargit les obligations.
- La conformité n'est pas un état figé, mais un processus à vérifier à chaque mise en production.
L'accessibilité d'un site web : une norme, pas une option
Un site accessible, c'est un site que tout le monde peut utiliser : avec une souris, au clavier, avec un lecteur d'écran, en zoomant, sur un vieux smartphone, dans le métro avec une connexion capricieuse. La définition paraît banale. Elle ne l'est pas, parce que le web a été conçu pendant vingt ans par et pour des gens qui voient, entendent et bougent bien.
Le référentiel de référence, c'est le WCAG (Web Content Accessibility Guidelines), décliné en France sous forme de RGAA. Les deux reposent sur quatre principes, résumés par l'acronyme POUR : Perceptible, Utilisable, Comprendre, Robuste. Concrètement, l'information doit être perceptible par plusieurs sens, l'interface utilisable au clavier, le contenu compréhensible, et le code assez solide pour fonctionner avec des technologies d'assistance qu'on ne maîtrise pas.
Pourquoi ça vous concerne même si "personne ne se plaint"
Personne ne se plaint parce que les gens qui bloquent ferment l'onglet. Silencieusement. Une vidéo sans sous-titres, une image sans texte alternatif, un bouton invisible — chaque petit défaut élimine une partie de votre audience sans que vous le sachiez jamais. Le handicap touche une fraction importante de la population, et le vieillissement démographique amplifie le phénomène année après année. Une bonne partie des blocages que je rencontre concerne d'ailleurs des utilisateurs qui ne se considèrent pas comme handicapés : malvoyance légère, daltonisme, trouble de l'attention, fracture du poignet.
L'angle que personne ne vous dit
Rendre un site accessible ne se joue pas au moment du design. Ça se joue au moment où vous choisissez la structure HTML de vos pages. J'ai perdu des semaines à retoucher du CSS et des contrastes alors que mon vrai problème était en amont : une hiérarchie de titres bancale et des div partout au lieu de vraies balises. Tant que la structure sémantique est cassée, aucune retouche visuelle ne sauvera le lecteur d'écran.
Mise en œuvre technique : passer du principe au code
Voici les chantiers qui, dans mon expérience, rapportent le plus par heure investie. Je les classe par ordre décroissant d'impact réel.
Structure sémantique et hiérarchie des titres
Un lecteur d'écran navigue de titre en titre, exactement comme vous survolez un texte des yeux. Si votre page contient cinq h1 ou qu'elle saute du h2 au h4, la navigation devient un labyrinthe. Une seule h1 par page, une hiérarchie descendante logique, et des balises HTML natives (nav, main, button, label) plutôt que des div cliquables. C'est la base, et c'est là que la majorité des sites que j'audite échouent d'abord.
Contrastes chiffrés et focus visible
Le ratio minimal pour du texte courant est de 4,5:1 ; pour du grand texte, 3:1 ; pour les composants d'interface et les bordures de champs de formulaire, également 3:1. J'ai longtemps cru que mon gris "élégant" passait. Il affichait 1,8:1. Autant dire illisible pour beaucoup de monde.
Et surtout : ne supprimez jamais l'outline du focus. Cette petite bordure autour de l'élément actif est la seule chose qui indique à une personne naviguant au clavier où elle se trouve. La retirer parce que "c'est moche", c'est exclure d'un coup tous ceux qui n'utilisent pas de souris. On peut la restyler, jamais la supprimer.
Textes alternatifs et ARIA, avec parcimonie
Chaque image qui véhicule une information mérite un alt descriptif. Une image purement décorative, elle, doit avoir un alt vide — pas absent, vide — pour que le lecteur d'écran l'ignore. Pour les composants interactifs (onglets, accordéons, modales), les attributs ARIA complètent le HTML natif. Mais attention à l'erreur classique du développeur zélé : trop d'ARIA tue l'ARIA. J'ai vu des interfaces où chaque div portait un rôle, ce qui rendait la lecture plus confuse qu'avant. La règle : pas d'ARIA quand une balise HTML native fait déjà le travail.
- Bouton cliquable ? Un vrai button, pas un div avec un écouteur de clic.
- Champ de formulaire ? Toujours associé à un label, jamais un placeholder en guise d'étiquette.
- Lien qui ouvre un nouvel onglet ? Prévenez-le dans le texte du lien.
- Titres de section : une hiérarchie continue, sans trou.
Tester vraiment : outils, lecteurs d'écran, et humains
Un audit automatisé, c'est utile pour dégrossir, jamais pour conclure. Sur mon propre site, un outil classique me signalait une quinzaine de points. Mes tests manuels en ont révélé le double. Le problème ? Les outils détectent ce qui est mécaniquement vérifiable, et laissent passer tout ce qui demande du jugement.
Trois tests que je fais désormais à chaque mise en ligne
- Débrancher la souris. Naviguer toute la page à la touche Tab. Si un élément interactif est inatteignable ou si le focus disparaît, c'est cassé.
- Pousser le zoom du navigateur à 200 %. Rien ne doit se chevaucher ni disparaître hors écran.
- Lancer une synthèse vocale sur l'en-tête et le menu. Si vous n'entendez qu'un brouhaha de "lien, lien, lien", il manque des libellés.
Pour aller plus loin, les lecteurs d'écran grand public (NVDA, VoiceOver) sont gratuits et donnent une idée honnête du parcours réel. Mais le test qui change tout, c'est celui avec une personne handicapée. J'ai fait passer une utilisatrice sur une version bêta : elle a bloqué dès le menu déroulant, un cas que ni mes outils ni moi n'avions anticipé.
La déclaration d'accessibilité, l'oubli classique
Beaucoup de sites techniquement propres oublient de publier une déclaration d'accessibilité : un document qui expose le niveau de conformité, les contenus non accessibles, et un moyen de signaler un problème. C'est une exigence fréquente dans les cadres réglementés, et une marque de sérieux pour les autres. Je l'ai rédigée en une après-midi ; c'est peu pour ce que ça apporte en crédibilité.
Le cadre légal : ce qui vous attend, et quand
En France, le RGAA n'est pas qu'un guide de bonnes manières. Il constitue un référentiel opposable pour certains acteurs : services publics, grandes entreprises, et un nombre croissant d'organismes au-delà d'un certain chiffre d'affaires. Le European Accessibility Act élargit encore le périmètre à de nombreux biens et services numériques vendus dans l'Union. Les sanctions existent, mais le vrai coût, c'est souvent réputationnel : une mise en demeure rendue publique fait plus de dégâts qu'une amende.
Faut-il paniquer ? Non. La plupart des obligations raisonnables demandent surtout de la rigueur, pas un budget colossal. Ce qui coûte cher, c'est de rattraper dix ans de dette technique d'un coup.
Contenus et documents : l'accessibilité au-delà du code
Le code n'est que la moitié du sujet. Une vidéo sans sous-titres ni transcription reste inaccessible, même sur un site impeccable. Un PDF scanné sans texte sélectionnable est illisible au lecteur d'écran. Et une phrase de trois lignes truffée de jargon bloque autant qu'un mauvais contraste.
Quelques réflexes qui changent la donne :
- Sous-titrer toute vidéo contenant de la parole, et fournir une transcription écrite.
- Publier les documents en HTML quand c'est possible ; sinon, un PDF balisé, jamais un scan.
- Écrire en langage clair, phrases courtes, un sujet par paragraphe.
- Décrire les graphiques avec leurs chiffres, pas seulement leur titre.
| Méthode | Ce qu'elle détecte | Ce qu'elle laisse passer | Effort |
|---|---|---|---|
| Outil automatisé | Contrastes, attributs manquants, structure basique | Pertinence des textes alternatifs, parcours réel | Faible |
| Test clavier seul | Focus, ordre de tabulation, pièges | Problèmes liés au visuel seul | Moyen |
| Lecteur d'écran | Libellés, ordre de lecture, annonces ambiguës | Contrastes, mise en page visuelle | Élevé |
| Test utilisateur | Blocages réels, incompréhensions | Rien d'important, mais coûteux à organiser | Élevé |
Les erreurs que j'ai faites, pour que vous ne les refassiez pas
J'ai cru qu'un bon score d'outil valait conformité. Faux. J'ai cru qu'il suffisait de corriger une fois pour toutes. Faux aussi : chaque nouvelle fonctionnalité peut casser ce qui marchait. Et j'ai cru, la première année, que l'accessibilité était un projet à part avec un début et une fin. C'est un pli à prendre, pas un chantier.
Un jour, j'ai ajouté un menu latéral animé, très joli. Il a réintroduit trois pièges au clavier que j'avais corrigés six mois plus tôt. Personne ne s'en est plaint. C'est précisément ce qui est dangereux.
Franchement, si je ne devais garder qu'une habitude de tout ce parcours, ce serait celle-ci : avant chaque mise en ligne, Tab, zoom, synthèse vocale. Trois minutes. Pas de gloire, pas de tableau de bord flatteur. Juste la certitude de ne pas avoir, ce jour-là, fermé la porte à quelqu'un. La prochaine fois que vous testerez votre propre site au clavier, demandez-vous ce que ressent la personne qui, elle, n'a pas le choix.
