Accessibilité web : les vrais seuils de contraste, le test clavier qui révèle le plus de défauts, ce qu'entend un lecteur d'écran et les obligations françaises.
Un site accessible reste utilisable quand la souris disparaît, quand les couleurs se délavent et quand l’écran ne dit plus rien. Trois chantiers concentrent la majorité des défauts mesurés : le contraste des textes, le parcours au clavier et ce que restitue un lecteur d’écran. Les trois se testent sans budget.
Trois défauts pèsent plus que tous les autres
L’étude annuelle WebAIM Million analyse les pages d’accueil du million de sites les plus visités. Son édition 2026 relève des manquements aux WCAG 2 détectables automatiquement sur 95,9 % des pages examinées, avec 56,1 erreurs par page en moyenne, en hausse de 10,1 % sur un an.
La répartition compte plus que le total. Six familles de défauts concentrent 96 % des erreurs relevées, et les trois premières se corrigent sans refonte : texte à contraste insuffisant sur 83,9 % des pages, image sans alternative textuelle sur 53,1 %, champ de formulaire sans étiquette sur 51 %. Viennent ensuite les liens vides, les boutons vides et l’absence de langue déclarée sur le document.
Cette concentration change la méthode de travail. Un audit exhaustif de 106 critères décourage avant de produire un effet visible. Traiter d’abord ces trois familles fait tomber la majeure partie du volume, sur un site vitrine comme sur un catalogue.
Le contraste : une mesure, pas une impression
Un designer regarde une maquette et la trouve lisible. Sa vision, son écran calibré et sa position face à la fenêtre biaisent totalement ce jugement. Le contraste de texte se calcule, à partir de la luminance relative des deux couleurs en présence, et donne un rapport compris entre 1 pour 1 et 21 pour 1.
Les seuils réels
Les WCAG, publiées par le W3C, distinguent trois situations que les équipes confondent souvent.
| Élément | Seuil AA | Cas concrets |
|---|---|---|
| Texte courant | 4,5 : 1 | paragraphes, libellés, menus, notes de bas de page |
| Texte de grande taille | 3 : 1 | titres à partir de 18 pt, ou 14 pt en gras |
| Éléments non textuels | 3 : 1 | bordure de champ, icône porteuse de sens, courbe de graphique |
Le troisième seuil est celui que les sites ratent le plus discrètement. Un champ de formulaire cerné d’un liseré gris très clair sur fond blanc reste invisible pour une partie des visiteurs, alors même que son libellé respecte le rapport de 4,5 pour 1.
Les zones où le contraste s’effondre
Trois endroits méritent une vérification systématique, parce que le calcul y est rarement fait :
- le texte posé sur une photographie, dont le fond varie d’un pixel à l’autre
- les états secondaires, texte grisé d’un champ désactivé, mention légale en bas de page, texte indicatif à l’intérieur d’un champ
- les messages d’erreur affichés en rouge clair, doublés d’aucun autre signal
Ce dernier point renvoie à une règle distincte du contraste : la couleur ne doit jamais porter seule une information. Un champ en erreur signalé uniquement par une bordure rouge disparaît pour un visiteur atteint de deutéranopie. Ajoutez un texte, un pictogramme ou les deux.
Le cas des images de fond
Poser un titre blanc sur une photographie sombre fonctionne le jour de la mise en ligne, puis casse dès qu’un rédacteur change l’image. La parade tient en un voile semi-opaque appliqué sous le texte, ou en un bandeau de couleur pleine. Le choix des visuels et leur préparation gagnent à être cadrés en amont, au moment de définir la gestion des images du site.
Débrancher la souris pendant dix minutes
Le test le plus rentable ne coûte rien : posez la souris, puis parcourez une page entière à la touche de tabulation. La navigation au clavier concerne les personnes non voyantes, mais aussi celles qui souffrent de tremblements, de douleurs articulaires ou d’une immobilisation temporaire du bras.
L’ordre de tabulation
Le focus doit suivre la logique visuelle de la page : en-tête, navigation, contenu, pied de page. Un ordre de tabulation qui saute d’un menu au pied de page puis remonte vers un encart latéral rend le formulaire de contact inatteignable en pratique.
Cet ordre découle du code source, pas du rendu à l’écran. Une colonne déplacée par une propriété de mise en page reste, pour le clavier, à sa position d’origine dans le HTML. La cohérence entre les deux se vérifie page par page, et se prépare dès la conception de l’arborescence du site.
Le focus visible
Le contour bleu par défaut des navigateurs sauve des millions de parcours. Le supprimer par une règle de style qui annule les contours reste une pratique répandue, héritée de la lutte contre les liserés jugés inesthétiques. Le résultat : un visiteur au clavier avance à l’aveugle, sans savoir où il se trouve.
Remplacez ce style plutôt que de l’effacer. Un focus visible contrasté, épais de deux pixels, décalé de deux pixels du bord, se dessine en quelques lignes. Les WCAG 2.2, devenues recommandation du W3C le 5 octobre 2023, ajoutent une exigence complémentaire : l’élément qui reçoit le focus ne doit pas être entièrement masqué par un bandeau collant ou une fenêtre modale.
Les pièges au clavier
Un piège au clavier enferme le focus dans un composant sans issue possible : lecteur vidéo tiers, carrousel, fenêtre modale qui refuse de se fermer à la touche d’échappement. Le visiteur n’a alors plus qu’une option, recharger la page et tout recommencer.
Ces pièges viennent presque toujours d’un composant importé sans relecture. Un widget de chat, un module de réservation, un lecteur de carte : chaque brique tierce se teste au clavier avant de partir en production. C’est exactement le type de vérification qui justifie un environnement de préproduction séparé de la version publique.
Ce qu’un lecteur d’écran restitue vraiment
Un lecteur d’écran ne lit pas une page de haut en bas comme un livre. Il construit un modèle de la page et propose des raccourcis pour la parcourir. L’enquête WebAIM auprès des utilisateurs de ces logiciels, dans son dixième volet publié en 2024 après plus de 1 500 réponses collectées entre décembre 2023 et janvier 2024, le confirme : 71,6 % des répondants naviguent dans une page longue en sautant de titre en titre.
La hiérarchie des titres
Ce chiffre a une conséquence directe. Une hiérarchie de titres bien construite fonctionne comme un sommaire audio. Une page dont le contenu se compose de paragraphes sans titre, ou dont les titres servent à faire du gros texte, oblige à tout écouter.
Trois erreurs reviennent : sauter un niveau, employer un titre pour styliser un slogan, ou multiplier les titres de premier niveau. Un seul titre de rang 1 par page, puis une descente régulière, suffit. Ces mêmes titres structurent le document pour les moteurs de recherche, ce qui rend le chantier doublement utile au regard du référencement technique.
Les liens et boutons sans nom
Un lien vide, un bouton vide : ces deux défauts figurent parmi les six familles les plus fréquentes du WebAIM Million. Le cas typique est un bouton qui ne contient qu’une icône, une loupe, une croix, une flèche. À l’oreille, le lecteur d’écran annonce « bouton », sans plus.
Chaque élément interactif porte un nom accessible. Il vient du texte visible quand il y en a, sinon d’un libellé lisible par les technologies d’assistance et masqué à l’écran. Un lien nommé « en savoir plus » répété quinze fois pose un problème voisin : la liste des liens de la page devient inutilisable. Nommez la destination.
La langue déclarée
L’absence d’attribut de langue sur le document touche encore 13,5 % des pages du WebAIM Million. Sans cette indication, une voix de synthèse anglophone prononce un texte français avec sa propre phonétique, et le rend incompréhensible. La correction tient à un attribut sur la balise racine du document.
Le texte alternatif se décide avant de s’écrire
Le texte alternatif d’une image répond à une question préalable : cette image apporte-t-elle une information absente du texte voisin ? Trois cas, trois traitements.
Une image décorative, motif de fond ou séparateur graphique, reçoit un attribut alternatif vide. Le lecteur d’écran l’ignore alors proprement, ce qui vaut mieux qu’une annonce du nom de fichier.
Une image informative décrit ce qu’un voyant en tire, sans commencer par « image de » et sans dépasser une phrase ou deux. Une photographie de produit indique la couleur, la matière et l’angle de vue quand ces éléments comptent pour l’achat.
Une image porteuse d’un lien décrit la destination, pas le visuel. Un logo cliquable qui renvoie à l’accueil s’annonce comme l’accueil, pas comme un logo.
Restent les images complexes, graphiques et schémas de données. Leur alternative courte ne suffit jamais. Doublez-la d’un tableau de données ou d’un paragraphe descriptif à proximité, ce qui sert aussi les visiteurs qui lisent vite. Cette discipline rejoint la question du poids des fichiers et de la sobriété du chargement, traitée du côté de l’écoconception du site.
Les gestes et les cibles, apport des WCAG 2.2
La version 2.2 des WCAG ajoute neuf critères et en retire un, pour un total de 86 critères de succès. Plusieurs visent l’usage réel sur écran tactile plutôt que le code.
La taille de cible minimale fixe un plancher de 24 pixels CSS de côté pour un élément interactif, avec des exceptions quand un équivalent plus grand existe ailleurs dans la page. Une croix de fermeture de dix pixels sur une bannière de cookies échoue à ce critère, et pas seulement pour les personnes handicapées : elle rate aussi les pouces pressés dans le métro.
Un autre critère impose une alternative à tout mouvement de glissement. Un curseur de prix, un carrousel qui ne réagit qu’au balayage, une signature à tracer : chacun doit disposer d’une commande actionnable par un simple appui. Deux boutons plus moins à côté d’un curseur règlent le cas en quelques minutes.
Ce que la loi impose, et à qui
L’accessibilité numérique relève en France de l’article 47 de la loi du 11 février 2005, précisé par le décret n° 2019-768 du 24 juillet 2019. Le référentiel d’application est le RGAA, dont la version 4.1.2 fait référence.
Le périmètre contraignant vise les services publics en ligne, les collectivités, les organismes chargés d’une mission de service public, et les entreprises privées dont le chiffre d’affaires dépasse 250 millions d’euros réalisés en France. La sanction administrative associée atteint 50 000 euros par service en ligne non conforme, renouvelable.
La directive européenne 2019/882, dite European Accessibility Act, transposée en droit français par la loi n° 2023-171 du 9 mars 2023, déplace le curseur. Ses obligations s’appliquent aux produits mis sur le marché et aux services fournis à partir du 28 juin 2025, pour des secteurs identifiés : commerce en ligne, services bancaires aux particuliers, transport de voyageurs, livres numériques, communications électroniques. Les microentreprises de moins de dix personnes et sous les seuils financiers prévus échappent au volet services.
La déclaration d’accessibilité
Les entités concernées publient une déclaration d’accessibilité indiquant l’état de conformité mesuré par un audit, les contenus non conformes, les dérogations retenues et un moyen de signalement. Cette déclaration s’accompagne d’une mention en page d’accueil et d’un schéma pluriannuel de mise en accessibilité assorti de plans d’actions.
Le chemin de cette page se garde stable dans le temps, par exemple https://exemple.fr/accessibilite, puisque des annuaires publics et des signalements y renvoient. Une déclaration déplacée sans redirection produit exactement le genre d’adresse morte décrit dans notre article sur les liens morts et les erreurs 404.
Une méthode d’attaque sur un site existant
Les outils automatiques détectent une part limitée des critères, la littérature du domaine s’accorde autour d’un tiers. Ils restent le meilleur point de départ, parce qu’ils trouvent vite le volume : contrastes, alternatives, étiquettes.
Un ordre de travail qui tient sur un trimestre :
- Passer les gabarits, pas les pages : accueil, article, catégorie, formulaire, panier. Corriger un gabarit corrige des centaines d’URL.
- Lancer un outil automatique sur ces gabarits, traiter les contrastes et les alternatives manquantes.
- Parcourir chaque gabarit au clavier seul, du premier au dernier élément, et noter tout point où le focus disparaît ou se bloque.
- Écouter deux parcours au lecteur d’écran, un achat ou une prise de contact de bout en bout.
- Documenter ce qui reste, publier la déclaration si l’obligation s’applique, planifier le reste.
Le niveau visé par les textes français et européens est le niveau AA, pas le niveau AAA. Cette précision évite de bloquer un projet sur des exigences que la réglementation ne demande pas.
Prochaine étape concrète : ouvrez votre page d’accueil, appuyez quinze fois sur la touche de tabulation et notez à chaque appui où se trouve le focus. La liste des correctifs prioritaires tiendra sur une demi-page, et le premier lot part en production dans la semaine.
