ARIA

Les boutons, liens et éléments de menu ARIA ont besoin d’un nom

Règle: aria-command-name
Gravité: Sérieux
Niveau WCAG A

Pourquoi c’est important

Un élément avec role="button", "link" ou "menuitem" sans texte est annoncé comme un simple « bouton » : impossible de savoir ce qu’il fait avant de l’activer.

Comment corriger

Placez du texte visible dans l’élément quand la maquette le permet.
Pour les commandes réduites à une icône, ajoutez aria-label avec l’action (« Supprimer », « Ajouter au panier »).
Marquez l’icône décorative avec aria-hidden="true" pour qu’elle n’entre pas dans le nom.

Dans le balisage

Échoue

<div role="button" tabindex="0"><svg aria-hidden="true">...</svg></div>

Réussit

<div role="button" tabindex="0" aria-label="Delete">
  <svg aria-hidden="true">...</svg>
</div>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur aria-command-name (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.