· 3 min
Accessibilité : un bouton icône doit avoir un nom
aria-label et aria-hidden en pratique pour les lecteurs d'écran.
- #accessibilité
- #frontend
- #html
Un bouton avec uniquement une icône peut être annoncé simplement comme « bouton » par un lecteur d’écran, sans préciser l’action.
À éviter :
<button><svg>...</svg></button>
Mieux :
<button aria-label="Supprimer le document">
<svg aria-hidden="true">...</svg>
</button>
aria-label donne un nom accessible, aria-hidden évite d’annoncer l’icône décorative.
Une interface compréhensible ne doit pas dépendre uniquement du visuel.