Liens et boutons vides : quand même « cliquez ici » n'est pas là

Un bouton de fermeture réduit à une icône, un lien vers un réseau social construit à partir d'une image d'arrière-plan sans texte, un lien « en savoir plus » qui n'est en réalité qu'une flèche : des pratiques extrêmement courantes, et toutes totalement muettes pour un lecteur d'écran s'il n'y a pas de nom accessible associé. Là où une personne voyante voit une croix et comprend « fermer ceci », une personne utilisant un lecteur d'écran n'entend que « bouton », sans savoir ce qu'il fait.

Les données du secteur situent ce problème autour de 48 % des plaintes d'accessibilité web fondées sur l'ADA (liens et boutons vides confondus, puisqu'ils partagent la même cause et la même correction).

Comment cela se produit

Boutons réduits à une icône, sans étiquette :

<!-- Annoncé simplement comme « bouton » -->
<button><svg>...</svg></button>

Liens englobant une seule image sans alternative textuelle :

<!-- Annoncé simplement comme « lien » -->
<a href="/panier"><img src="icone-panier.svg"></a>

Liens « en savoir plus » sans contexte, qui ont techniquement du texte mais échouent à une vérification voisine et plus subtile (critère 2.4.4, Fonction du lien dans son contexte) : une personne utilisant un lecteur d'écran parcourt souvent une page en affichant la liste de tous ses liens, isolés de leur contexte - et une page comptant dix liens « en savoir plus » annoncés à l'identique ne permet pas de les distinguer.

Comment le corriger

Donnez au composant un nom accessible, par un texte visible, un aria-label, ou (pour une image dans un lien) une véritable alternative textuelle sur l'image :

<!-- Bouton-icône : aria-label fournit le nom -->
<button aria-label="Fermer la boîte de dialogue">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Lien image : l'alternative de l'image devient le nom du lien -->
<a href="/panier">
  <img src="icone-panier.svg" alt="Voir le panier">
</a>

Notez l'aria-hidden="true" sur le SVG décoratif à l'intérieur du bouton : une fois que le bouton possède son propre nom accessible, l'icône ne porte plus de sens autonome, et la masquer aux technologies d'assistance évite toute annonce en double ou contradictoire.

Pour le cas du « en savoir plus », rendez le texte du lien lui-même explicite (En savoir plus sur nos résultats du 3e trimestre plutôt qu'un simple En savoir plus), ou ajoutez une portion de texte masquée visuellement que seules les technologies d'assistance restituent :

<a href="/blog/resultats-t3">
  En savoir plus<span class="sr-only"> sur nos résultats du 3e trimestre</span>
</a>

Le principe sous-jacent

Tout composant interactif a besoin d'un nom accessible, quel qu'il soit. C'est le critère de succès 4.1.2 (Nom, rôle et valeur), de niveau A, qui sous-tend une part considérable des non-conformités détectables dans l'ensemble de la spécification. S'il ne faut retenir qu'une règle de cette page : ne publiez jamais un élément interactif réduit à une icône sans vous demander « que dirait réellement un lecteur d'écran en arrivant dessus ? ».

Références officielles

• Deque University : button-name
• Deque University : link-name
• Technique W3C H2