Comment rédiger des textes de liens et de boutons compréhensibles hors contexte

Une phrase comme « Pour voir nos tarifs, cliquez ici » se lit parfaitement sur la page. Sorti de la phrase, le lien se réduit à deux mots qui ne mènent nulle part en particulier, et c’est précisément sorti de sa phrase que beaucoup de gens le rencontrent.

Une précision avant d’aller plus loin : l’auditeur reconnaît les formules vagues en anglais (“click here”, “read more”), pas en français, si bien qu’un libellé comme “Cliquez ici” ne sera pas signalé. C’est pourquoi les exemples qui décrivent ce que l’outil détecte restent en anglais.

Pourquoi la phrase autour d’un lien disparaît

Une liste des liens est la vue que propose un lecteur d’écran de tous les liens d’une page à la fois, pour que son utilisateur puisse aller directement à celui qu’il cherche. C’est l’un des moyens les plus rapides de parcourir une page, et elle présente chaque lien avec ses seuls mots, rien d’autre. Onze liens « Read more » deviennent onze lignes identiques.

Un nom accessible est le texte que les technologies d’assistance annoncent pour un lien ou un contrôle. L’outil le détermine dans cet ordre : un aria-label s’il y en a un, puis aria-labelledby, puis le texte propre de l’élément, puis le texte alt d’une image qu’il contient, puis l’attribut title. Ce qui sort en premier est ce que la liste des liens affiche et ce que la commande vocale attend.

Le travail ne consiste donc pas à mieux rédiger les phrases autour des liens. Il consiste à faire en sorte que le nom accessible se suffise à lui-même.

Les critères derrière la règle

Chaque problème signalé par l’outil cite l’un des cinq critères de succès des WCAG, ce qui transforme « ce libellé est vague » d’une opinion en quelque chose qu’un ticket peut porter.

Critère	Niveau	Ce qui le fait échouer	Comment l’outil le signale
2.4.4 Fonction du lien (selon le contexte)	A	Un lien sans nom accessible, ou dont tout le libellé est une formule comme « click here », « learn more » ou « download »	Erreur. Une URL brute de plus de 30 caractères utilisée comme libellé est un avertissement
2.4.9 Fonction du lien (lien uniquement)	AAA	Les mêmes mots utilisés pour des liens qui mènent à des endroits différents	Avertissement
2.4.6 En-têtes et étiquettes	AA	Un bouton qui ne nomme aucune action : « Submit », « OK », « Send », « Done »	Avertissement
2.5.3 Étiquette dans le nom	A	Un aria-label qui ne contient pas le texte visible du bouton	Erreur
4.1.2 Nom, rôle et valeur	A	Un contrôle sans nom accessible ; un lien nommé uniquement par son title	Erreur ; avertissement pour le cas du title

Une nuance sur 2.4.4 : à strictement parler, ce critère admet la phrase ou l’élément de liste environnant comme contexte, c’est pourquoi un « Read more » peut techniquement passer au niveau A. L’outil signale malgré tout ces libellés comme des erreurs, car la liste des liens est justement l’endroit où ce contexte a disparu. 2.4.9, le critère AAA, est celui qui exige que les mots du lien suffisent à eux seuls.

Auditer une page avec l’outil

1. Ouvrez la page à vérifier, faites un clic droit sur la zone qui contient les liens, choisissez Inspecter, puis copiez le balisage de l’élément depuis les outils de développement. Copiez le balisage plutôt que le texte visible : c’est dans les attributs aria-label que se trouve la moitié des problèmes.
2. Ouvrez l’auditeur de textes de liens et de boutons. La zone sous Paste your markup (collez votre balisage) contient au départ un exemple : appuyez d’abord sur Clear (effacer) dans la barre du bas, puis collez.
3. Lisez les quatre compteurs en haut : Links (liens), Controls (contrôles), Errors (erreurs) et Warnings (avertissements).
4. Traitez les erreurs avant les avertissements. Chaque problème indique sa gravité, le critère WCAG et son niveau, la règle enfreinte, le texte en cause, pourquoi c’est important, et une ligne commençant par « Fix: » (correction).
5. Réécrivez les libellés dans votre code source, collez le nouveau balisage et recommencez jusqu’à ce que le panneau affiche « Every link and control here names where it goes or what it does. » (chaque lien et contrôle ici nomme sa destination ou son action).
6. Appuyez sur Copy report (copier le rapport), ou sur la touche C, pour récupérer les résultats en texte brut, un bloc par problème avec son critère, à joindre à un ticket ou à une pull request.

L’exemple de balisage, analysé

L’exemple sur lequel s’ouvre l’outil compte dix lignes qui contiennent la plupart des erreurs courantes. Il dénombre 5 liens et 3 contrôles, et trouve 4 erreurs et 2 avertissements :

Balisage	Problème	Critère
<a href="/pricing">Click here</a>	Texte de lien dénué de sens hors contexte (erreur)	2.4.4, A
<a href="/docs">Learn more</a>	Texte de lien dénué de sens hors contexte (erreur)	2.4.4, A
Deux liens « Documentation », vers /help et /api	Même texte de lien, destinations différentes (avertissement)	2.4.9, AAA
<a href="/home"> ne contenant qu’une icône vide	Lien sans nom accessible (erreur)	2.4.4, A
<button>Submit</button>	Le libellé du contrôle ne nomme pas son action (avertissement)	2.4.6, AA
<button aria-label="Find records">Search</button>	Le texte visible est absent du nom accessible (erreur)	2.5.3, A
<button>Delete 3 invoices</button>	Rien : il nomme le résultat et le nombre	Aucun

Les deux liens « Documentation » comptent pour un seul problème, car c’est la paire qui pose problème. Le bouton de recherche est celui qui échappe à tout le monde. Il sonne bien dans un lecteur d’écran, qui annonce « Find records ». Mais une personne qui utilise la commande vocale prononce le mot qu’elle voit, « Search », et rien ne se passe, car « Search » ne figure pas dans le nom accessible. Commencer le libellé par le mot visible, comme dans « Search records », satisfait les deux.

Le score de lisibilité qui récompense les pires libellés

Le raccourci évident consiste à passer les libellés dans un outil de lisibilité. Il donne exactement la mauvaise réponse. Les formules de lisibilité divisent par le nombre de phrases et ont été calibrées sur de la prose continue : une chaîne de deux mots les fait sortir de leur échelle. Flesch–Kincaid attribue à « Learn more » et à « Click here » une facilité de lecture de 120.2, au-delà du sommet de sa propre échelle, et note le bien plus clair « Download invoice PDF » à 62.8.

C’est pourquoi l’auditeur n’affiche aucun score de niveau de lecture, et le dit sur la page. Ce que l’on peut tester sur un libellé, c’est s’il nomme une destination ou une action, et si son nom accessible correspond à ce qui s’affiche à l’écran.

Là où s’arrêtent les vérifications

Un outil qui cite des critères ne vaut que par les règles qu’il applique, et celles-ci ont des limites qu’il vaut mieux connaître :

• Les listes de mots vagues portent sur le libellé entier, pas sur une expression à l’intérieur. « Click here » est signalé ; « Click here to compare plans » ne l’est pas, même s’il fait encore attendre à l’auditeur les mots utiles.
• La liste pour les liens est plus longue que celle pour les boutons. Un lien « Download » est une erreur ; un bouton « Download » passe, et mériterait tout de même de dire ce qu’il télécharge.
• L’outil ne peut pas dire si un libellé est exact, seulement s’il est précis. Un bouton « Delete » qui archive passera toutes les vérifications.
• Il ne peut pas récupérer une page à partir d’une URL. Les navigateurs empêchent un site de lire le HTML d’un autre site, et aucun serveur derrière l’outil ne peut le faire à sa place : c’est pourquoi vous collez le balisage.

Autres méthodes

Aucune méthode intégrée au système d’exploitation ne permet d’auditer les textes de liens. La version manuelle est le même test que celui qu’applique la liste des liens : lisez les mots de chaque lien seuls, en colonne, sans la page autour, et demandez-vous si vous sauriez où chacun mène. Pour les boutons, demandez-vous si le libellé nomme ce qui se passe après le clic. C’est long sur une grande page, et cela ne repérera pas un aria-label qui contredit le texte visible, puisqu’on ne peut pas le voir sans lire le balisage.

Vérifier que rien n’a été envoyé

Le balisage est analysé par votre propre navigateur, dans l’onglet. Ouvrez le panneau Réseau des outils de développement, collez un bloc de balisage et observez : aucune requête ne le transporte. Couper la connexion réseau après le chargement de la page fonctionne aussi, et l’outil continue son audit.

Pour la suite

Collez une barre de navigation ou une grille de cartes dans l’auditeur de textes de liens et de boutons : c’est là que les liens « Read more » répétés ont tendance à s’accumuler. Si vos boutons à icône utilisent du SVG intégré, l’optimiseur SVG conserve par défaut l’élément <title> de chaque fichier au lieu de le supprimer pour gagner des octets.