Fix "Button without accessible name" in Angular

Why it's a problem

An icon-only button has no name for assistive technologies: the user just hears "button" without knowing what it does.

How to fix it — Angular

Provide an accessible name with aria-label (or visually-hidden text), and hide the decorative icon with aria-hidden="true".

Avoid

<button (click)="close()">
  <mat-icon>close</mat-icon>
</button>

Correct

<button (click)="close()" aria-label="Fermer la fenêtre">
  <mat-icon aria-hidden="true">close</mat-icon>
</button>

RGAA criterion 11.9 — Formulaires

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

How to check: official tests (in French)

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.