Corregir «Botón sin nombre accesible» en HTML

Por qué es un problema

Un botón que solo tiene un icono no tiene nombre para las tecnologías de asistencia: el usuario solo oye «botón» sin saber qué hace.

Cómo corregirlo — HTML

Proporcione un nombre accesible con aria-label (o texto oculto visualmente) y oculte el icono decorativo con aria-hidden="true".

Evitar

<button>
  <svg>...</svg>
</button>

Correcto

<button aria-label="Fermer la fenêtre">
  <svg aria-hidden="true">...</svg>
</button>

Criterio RGAA 11.9 — Formulaires

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

Cómo verificarlo: pruebas oficiales (en francés)

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.