Accessibilité : les quatre contrôles à faire à la main avant tout outil

Un contrôle automatique d’accessibilité rend une liste d’erreurs en quelques secondes, et cette liste est utile. Elle est aussi partielle par construction : une part importante des critères demande de regarder ce que la page fait, pas ce qu’elle déclare. Voici les quatre contrôles qui ne demandent aucun outil, dans l’ordre où ils trouvent le plus de choses.

Ce qu’un outil tranche seul, et ce qu’il ne tranche pas

Un outil sait dire qu’une image n’a pas d’attribut alt. Il ne sait pas dire si le texte alternatif décrit l’image : « photo » et « graphique » passent tous les deux. Il sait dire qu’un champ n’a pas d’étiquette associée. Il ne sait pas dire si l’étiquette est compréhensible. Il sait mesurer un rapport de contraste entre deux couleurs déclarées. Il ne sait pas mesurer le contraste d’un texte posé sur une photographie.

La règle pratique : un outil trouve des absences, un humain juge des présences. Les quatre contrôles qui suivent sont ceux où le jugement humain trouve ce qu’aucune règle ne code.

1. Le contraste

Le rapport de contraste est un nombre compris entre 1 et 21. Les seuils du référentiel sont 4,5:1 pour un texte courant et 3:1 pour un texte large ou pour un élément d’interface porteur d’information.

Deux pièges reviennent, et aucun des deux n’est lisible dans une feuille de style.

Le texte sur une image. Le rapport dépend du pixel qui se trouve derrière chaque lettre. Un titre blanc posé sur une photographie passe sur le ciel et échoue sur le bâtiment, dans la même phrase. Le contrôle : regardez la zone la plus claire de l’image sous le texte le plus clair.

L’opacité. Une couleur à demi transparente n’est pas la couleur déclarée : c’est son mélange avec le fond. Un gris annoncé conforme cesse de l’être dès qu’on le pose en semi-transparence, et la valeur écrite dans le code reste, elle, celle d’avant. Le contrôle se fait sur la couleur composée, telle qu’elle est réellement peinte.

⚠️ Et il ne porte pas que sur du texte : la bordure d’un champ de formulaire, l’icône seule qui porte un sens, l’anneau de focus sont soumis au même seuil.

2. Le clavier

Rangez la souris et parcourez la page à la tabulation. Trois questions, dans cet ordre.

Est-ce que j’atteins tout ? Chaque contrôle actionnable doit être atteignable. Le défaut classique est le div transformé en bouton par un écouteur de clic : il fonctionne à la souris, il n’existe pas au clavier.

Est-ce que je vois où je suis ? L’anneau de focus doit rester visible sur toutes les surfaces, y compris sombres. La ligne outline: none écrite pour des raisons esthétiques est probablement la régression d’accessibilité la plus répandue du web.

Est-ce que je peux ressortir ? Un menu, une fenêtre modale, un lecteur vidéo : si la tabulation entre et ne sort plus, l’utilisateur au clavier est bloqué sur la page, définitivement.

3. Les formulaires

C’est la surface où un défaut coûte le plus cher, parce qu’il empêche une transaction et pas seulement une lecture.

Une étiquette n’est pas un texte d’aide dans le champ. Ce dernier disparaît à la première frappe, n’est pas toujours restitué par les technologies d’assistance, et son contraste est presque toujours insuffisant. Chaque champ porte une étiquette associée, et visible.

Un message d’erreur doit dire quoi faire. « Champ invalide » n’est pas un message ; « le code postal attend cinq chiffres » en est un. Il doit être rattaché au champ, et pas seulement affiché à côté en rouge : la couleur seule ne porte aucune information pour qui ne la distingue pas.

Un champ obligatoire se signale autrement que par une couleur. L’astérisque a l’avantage d’être une convention connue : à condition d’être expliquée une fois, en tête de formulaire.

4. L’ordre de lecture

C’est le contrôle que presque personne ne fait, et celui qui trouve les défauts les plus profonds : ils viennent de la structure, pas d’un attribut oublié.

Une page a deux ordres, celui du document et celui que la mise en page dessine. Les grilles modernes permettent de les séparer entièrement : une colonne déclarée en premier dans le code peut apparaître en dernier à l’écran, et réciproquement. Un lecteur d’écran suit le document ; un lecteur voyant suit l’écran.

Le contrôle tient en deux gestes. Désactivez les styles et lisez la page telle qu’elle sort : l’ordre doit rester compréhensible. Réduisez la fenêtre jusqu’à ce que la mise en page passe sur une seule colonne : l’ordre obtenu est celui du document, et c’est le meilleur aperçu gratuit de ce qu’entend une technologie d’assistance.

Dans le même geste, vérifiez la hiérarchie des titres : un seul titre de premier niveau, aucun niveau sauté, et des intitulés qui décrivent réellement leur section. La navigation par titres est le premier moyen de parcours d’un utilisateur de lecteur d’écran.

Ce qui reste après ces quatre contrôles

Beaucoup, et il faut le dire : les alternatives des médias, les sous-titres, les animations, les délais, la cohérence de la navigation d’une page à l’autre, la clarté de la langue. Ces quatre contrôles ne rendent pas un site conforme : ils éliminent une bonne part des défauts en une heure, sans rien installer, et ils apprennent à voir les autres.

Le reste se mesure et se suit dans le temps. C’est là qu’un outil reprend la main : en repassant les mêmes contrôles à chaque version, plutôt qu’une seule fois avant un audit.