# Les boutons doivent avoir un texte perceptible

<https://www.fixreports.com/fr/issues/button-name>

WCAG 4.1.2 Nom, rôle et valeur · Niveau A

Certains boutons n’ont pas de nom accessible : les utilisateurs de lecteurs d’écran entendent seulement « bouton ».

## Ce que vérifie cette règle
Vérifier que les boutons ont un texte perceptible.

## Pourquoi c’est important
Le critère WCAG 4.1.2 exige que chaque composant d’interface ait un nom. Parmi les boutons sans nom, on trouve souvent les sélecteurs de quantité, les boutons de fermeture et les flèches des carrousels.

## Comment corriger
### Sur n’importe quel site web
1. Repérez les boutons sans nom, généralement des boutons qui n’affichent qu’une icône.
2. Ajoutez un texte visible, un texte visuellement masqué ou un aria-label qui indique ce que fait le bouton (par exemple aria-label="Close" ou aria-label="Increase quantity").

### Sur Shopify
1. Repérez les boutons sans nom, généralement des boutons qui n’affichent qu’une icône.
2. Ajoutez un texte visible, un texte visuellement masqué ou un aria-label qui indique ce que fait le bouton (par exemple aria-label="Close" ou aria-label="Increase quantity").

### Sur WooCommerce et WordPress
1. Repérez les boutons sans nom, généralement des boutons qui n’affichent qu’une icône.
2. Ajoutez un texte visible, un texte visuellement masqué ou un aria-label qui indique ce que fait le bouton (par exemple aria-label="Close" ou aria-label="Increase quantity").

## Comment vérifier la correction
- Analysez à nouveau les pages concernées.
- Vérifiez les boutons avec un lecteur d’écran.

## Sources
- Documentation de la règle axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/button-name
- Comprendre le critère WCAG 4.1.2 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/name-role-value