Dernière mise à jour : 31 mars 2026
Conseils pour baliser les boutons, afin de rendre accessible l’action qu’ils déclenchent.
Comment baliser un bouton pour qu’il soit accessible
Les boutons doivent être balisés et nommés de manière à clairement indiquer l’action qu’ils déclenchent.
Durant la conception
S’assurer que le libellé est parfaitement clair, même lorsqu’il est lu seul. Il doit décrire précisément l’action qui se produira lorsqu’on active le bouton.
Dans le code
Utiliser la balise <button> ou <input type="button"> ou portant l’attribut role="button" pour que les lecteurs d’écran annoncent « bouton » avant de lire l’intitulé.
Les icônes décoratives d’un bouton ne doivent pas être annoncées par les lecteurs d’écran.
Dans le cas où un bouton est représenté uniquement par une image, comme dans le cas d’un menu burger par exemple, un intitulé doit être annoncé par les lecteurs d’écran.
Lorsque plusieurs de ces techniques sont présentes sur un même lien, les assistants de lecture annonceront les attributs dans l’ordre de priorité suivant :
- L’attribut aria-labelledby
- L’attribut aria-label
- La value pour le cas des inputs de type submit, reset ou button
- Le contenu de la balise <button>
- Le contenu de l’attribut title