„Schaltfläche ohne zugänglichen Namen“ in React beheben

Warum das ein Problem ist

Eine reine Icon-Schaltfläche hat für assistive Technologien keinen Namen: Der Nutzer hört nur „Schaltfläche“, ohne die Funktion zu kennen.

So beheben Sie es — React

Geben Sie mit aria-label (oder visuell verstecktem Text) einen zugänglichen Namen und blenden Sie das dekorative Icon mit aria-hidden="true" aus.

Vermeiden

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

Korrekt

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

RGAA-Kriterium 11.9 — Formulaires

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

So prüfen Sie: offizielle Tests (auf Französisch)

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.