Critère 11.9
Intitulé de bouton
L'intitulé de chaque bouton doit être pertinent.
En Bref : L'essentiel à retenir
- Le but est d'aider l'utilisateur à saisir l'action du bouton.
- Le texte du bouton doit explicitement décrire l'action à effectuer.
- Pour les boutons avec des icônes uniquement, il faut utiliser `aria-label` ou un texte masqué.
- Cette approche est en accord avec le critère 11.9 du RGAA pour l'accessibilité.
Objectif
Permettre à l'utilisateur de comprendre l'action qui sera déclenchée par le bouton.
Solution Technique
1. Texte explicite
Le texte du bouton doit décrire l'action.
- Mauvais : "OK", "Cliquez ici", "Suite"
- Bon : "Valider la commande", "S'inscrire", "Page suivante"
2. Boutons icônes
Pour les boutons ne contenant qu'une icône, utilisez aria-label ou un texte masqué.
<!-- Avec aria-label -->
<button aria-label="Fermer le menu">
<svg>...</svg>
</button>
<!-- Avec texte masqué -->
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Rechercher</span>
</button>