Sémantique des libellés

Dernière mise à jour : 31 mars 2026

Conseils pour baliser les libellés des éléments afin de les rendre accessibles.

Pourquoi implémenter un libellé pour qu’il soit correctement annoncé ?

Pour être facile à utiliser pour tout le monde, chaque élément interactif d'une interface doit avoir un libellé qui agit à titre de « nom accessible ». Lorsqu'il est bien implémenté, le libellé est détecté et annoncé par les technologies d’assistance, comme les lecteurs d’écran ou les plages braille.

Concrètement, le lecteur d’écran annoncera la fonction de l'élément et son nom spécifique. Par exemple, « bouton » et « Envoyer le formulaire », pour un bouton de soumission de formulaire.

Règles à respecter pour y arriver

Il faut faire une utilisation juste des balises HTML natives. Elles portent naturellement les informations dont les outils d'assistance ont besoin pour annoncer l’information aux gens. Voici comment faire pour différents composants :

Pour les boutons

  • Il faut toujours privilégier la balise native <button>.

  • S’il faut absolument utiliser un autre élément comme un <div> ou <span>, il faut lui ajouter les attributs role="button" et tabindex="0" pour qu'il soit reconnu et utilisable avec la navigation au clavier.

Pour les liens

  • Il faut utiliser la balise <a> avec un attribut href afin de s’assurer que le lien soit accessible à la navigation au clavier.

  • S’il faut utiliser un autre élément, il est recommandé d’ajouter role="link" et tabindex="0".

Comment implémenter un nom accessible pour des boutons et des liens

  • Via une liaison d'ID : l'attribut aria-labelledby lie le composant à un texte déjà présent ailleurs dans la page.
  • Via une étiquette invisible : l'attribut aria-label ou l'utilisation d'une classe CSS .visually-hidden permettent de donner un nom seulement lisible par les technologies d’assistance. À noter qu’il est recommandé d’utiliser ces méthodes uniquement dans le cas où le design ne permet pas d’afficher un libellé textuel, car il est toujours préférable de privilégier des étiquettes visibles avant tout.
  • Via une image : pour un bouton ou lien composé uniquement d'une image, c'est l'attribut alt de la balise <img> qui servira de nom.
  • Via une valeur par défaut : pour les boutons de type "input", c'est l'attribut value qui est utilisé.
  • Via le texte interne : c'est la méthode la plus simple, le nom sera alors le texte qui est écrit entre les balises <a> ou <button>.
  • Via l’attribut title : l'attribut title peut servir de dernier recours, bien qu'il soit moins recommandé.

Ordre de priorité si plusieurs de ces techniques sont utilisées à la fois

Si plusieurs de ces techniques sont utilisées en même temps sur un élément, les technologies d'assistance ne lisent pas tout. Pour déterminer quel sera l'intitulé annoncé, elles suivent un ordre de priorité strict pour déterminer quel texte annoncer :

  1. aria-labelledby
  2. aria-label
  3. alt (pour les images seules)
  4. value (pour les entrées de type bouton)
  5. texte interne à la balise
  6. title (uniquement si rien d'autre n'est présent)

Bon à savoir

Pour garantir la meilleure expérience utilisateur, il est recommandé d’utiliser une seule méthode par composant, idéalement le texte interne ou un aria-label clair.