RGAA 11.9 — Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?

Boutons sans intitulé accessible

Le problème

Les boutons sans intitulé accessible sont des boutons qui n'ont aucun texte visible, aucun aria-label, et aucune alternative textuelle sur leur contenu (icône). Le critère RGAA 11.9 (correspondant au WCAG 4.1.2, niveau A) exige que chaque bouton ait un intitulé pertinent qui décrit son action.

Ce problème est extrêmement courant avec les boutons d'icônes : bouton de fermeture (×), bouton de menu hamburger (☰), boutons de partage sur les réseaux sociaux, boutons d'action dans les tableaux (modifier, supprimer, voir), et boutons de contrôle de médias (lecture, pause, volume). Ces boutons utilisent une icône SVG ou une police d'icônes sans aucun texte alternatif.

Un bouton <button><svg>...</svg></button> sans aria-label ni texte visuel est annoncé par les lecteurs d'écran comme « bouton » sans aucune indication de son action. Sur une page avec 10 boutons d'icônes, l'utilisateur entend « bouton, bouton, bouton... » sans pouvoir les distinguer.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran, un bouton sans intitulé est un mystère complet. Ils savent qu'un bouton existe mais n'ont aucune idée de ce qu'il fait. Sur une ligne de tableau avec trois boutons d'icônes (modifier, dupliquer, supprimer), l'utilisateur entend « bouton, bouton, bouton » -- et appuyer sur le mauvais pourrait supprimer des données.

Les utilisateurs de commande vocale ne peuvent pas activer un bouton sans intitulé car ils ne peuvent pas énoncer son texte. Dire « cliquer bouton » active un bouton aléatoire si plusieurs sont présents.

Ce problème est aggravé par la prolifération des boutons d'icônes dans les interfaces modernes. Les tableaux de bord, les barres d'outils et les éditeurs de contenu peuvent contenir des dizaines de boutons d'icônes sans intitulé, rendant l'interface complètement opaque aux technologies d'assistance.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Bouton de fermeture sans intitulé -->
<button class="close-btn">
  <svg viewBox="0 0 24 24">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </svg>
</button>

<!-- Bouton hamburger sans intitulé -->
<button class="menu-toggle">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<!-- Boutons d'action dans un tableau -->
<td>
  <button><i class="icon-edit"></i></button>
  <button><i class="icon-delete"></i></button>
</td>

Après (conforme)

<!-- Bouton de fermeture avec intitulé -->
<button class="close-btn" aria-label="Fermer">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M19 6.41L17.59 5 12 10.59..."/>
  </svg>
</button>

<!-- Bouton hamburger avec intitulé -->
<button class="menu-toggle"
  aria-label="Ouvrir le menu de navigation"
  aria-expanded="false">
  <span class="bar" aria-hidden="true"></span>
  <span class="bar" aria-hidden="true"></span>
  <span class="bar" aria-hidden="true"></span>
</button>

<!-- Boutons d'action avec intitulé contextuel -->
<td>
  <button aria-label="Modifier l'article Titre X">
    <i class="icon-edit" aria-hidden="true"></i>
  </button>
  <button aria-label="Supprimer l'article Titre X">
    <i class="icon-delete" aria-hidden="true"></i>
  </button>
</td>

Comment Scrutia détecte ce problème

Scrutia identifie chaque bouton sur vos pages et calcule son nom accessible à partir du texte contenu, de l'aria-label, de l'aria-labelledby, et du title. Il signale les boutons dont le nom accessible est vide, qui ne contiennent que des icônes SVG ou des polices d'icônes sans alternative textuelle, ou dont l'intitulé est non pertinent (« bouton », « cliquer »). Le rapport propose un aria-label adapté au contexte de chaque bouton.

Questions fréquentes

Quelle est la meilleure méthode pour labelliser un bouton d'icône ?

Utilisez aria-label sur le bouton et ajoutez aria-hidden='true' sur l'icône SVG ou l'élément d'icône. Par exemple : <button aria-label='Fermer'><svg aria-hidden='true'>...</svg></button>. L'icône est masquée pour les lecteurs d'écran et le aria-label fournit l'intitulé.

Peut-on utiliser le title au lieu de aria-label ?

Le title est moins fiable que aria-label. Il est annoncé différemment selon les lecteurs d'écran et n'est pas accessible au clavier (il nécessite un survol souris). Préférez toujours aria-label pour les boutons d'icônes.

Comment rendre les boutons d'action de tableau contextuels ?

Incluez le nom de l'élément dans l'aria-label du bouton. Au lieu de aria-label='Modifier', utilisez aria-label='Modifier l'article [Nom de l'article]'. Cela permet à l'utilisateur de distinguer les boutons de chaque ligne.

Les icônes decoratives dans les boutons avec texte sont-elles concernées ?

Si un bouton contient du texte visible (ex. <button><svg>...</svg> Enregistrer</button>), l'icône est décorative et doit avoir aria-hidden='true'. Le texte visible fournit l'intitulé. Ce n'est un problème que si le bouton ne contient aucun texte.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit