Corriger « Bouton sans intitulé accessible » en React

Pourquoi c'est un problème

Un bouton qui ne contient qu'une icône n'a aucun nom pour les technologies d'assistance : l'utilisateur entend « bouton » sans savoir ce qu'il déclenche.

Comment corriger — React

Donnez un nom accessible via aria-label (ou un texte visible masqué), et masquez l'icône décorative avec aria-hidden="true".

À éviter

<button onClick={close}>
  <CloseIcon />
</button>

Correct

<button onClick={close} aria-label="Fermer la fenêtre">
  <CloseIcon aria-hidden="true" />
</button>

Critère RGAA 11.9 — Formulaires

Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?

Comment vérifier : tests officiels

Test 11.9.1
L’intitulé de chaque bouton vérifie-t-il ces conditions (hors cas particuliers) ?
S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent ;
S’il est présent, le passage de texte lié au bouton via un attribut WAI-ARIA aria-labelledby est pertinent ;
S’il est présent, le contenu de l’attribut value d’une balise <input> de type submit, reset ou button est pertinent ;
S’il est présent, le contenu de la balise <button> est pertinent ;
S’il est présent, le contenu de l’attribut alt d’une balise <input> de type image est pertinent ;
S’il est présent, le contenu de l’attribut title est pertinent.
Test 11.9.2
Chaque bouton affichant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ?
S’il est présent, le contenu de l’attribut WAI-ARIA aria-label contient au moins l’intitulé visible ;
S’il est présent, le passage de texte lié au bouton via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ;
S’il est présent, le contenu de l’attribut value d’une balise <input> de type submit, reset ou button contient au moins l’intitulé visible ;
S’il est présent, le contenu de la balise <button> contient au moins l’intitulé visible ;
S’il est présent, le contenu de l’attribut alt d’une balise <input> de type image contient au moins l’intitulé visible ;
S’il est présent, le contenu de l’attribut title contient au moins l’intitulé visible.