Scan gratuit

Corriger « Commande ARIA sans intitulé » en HTML

Pourquoi c'est un problème

Un élément porteur d'un rôle button, link ou menuitem mais dépourvu de texte est annoncé « bouton » sans plus. C'est le cas typique du bouton composé d'une seule icône. Avec 576 occurrences mesurées sur 49 pages, c'est le manquement qui se répète le plus à l'intérieur d'une même page.

Comment corriger — HTML

Donnez un nom accessible à la commande : du texte visible, un aria-label, ou un aria-labelledby renvoyant à un libellé existant. Le titre de l'icône ne suffit pas, et une icône seule doit porter aria-hidden pour ne pas être annoncée deux fois.

À éviter
<div role="button" tabindex="0">
  <svg>…</svg>
</div>
Correct
<button type="button" aria-label="Fermer la fenêtre">
  <svg aria-hidden="true">…</svg>
</button>

<!-- Ou, si un libellé existe déjà dans la page : -->
<h2 id="titre-panneau">Filtres</h2>
<button type="button" aria-labelledby="titre-panneau">
  <svg aria-hidden="true">…</svg>
</button>

Vérifiez votre site en 30 secondes

Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.

Scan gratuit

Autres corrections