Nouveau Components

Badge

Le badge est un petit élément visuel affichant un nombre, un texte court ou une icône de statut à proximité immédiate d’un autre élément d’interface. Il sert à signaler un compteur, un état ou une information brève rattachée à cet élément. Le badge n’est pas interactif : il ne reçoit pas le focus clavier et ne déclenche aucune action. Lorsqu’il est placé dans un bouton ou un lien, il participe au nom accessible de cet élément parent.

Sur cette page

Quand utiliser un badge

  • Compteur rattaché à un élément : afficher un nombre au contact de l'élément concerné, messages non lus sur une boîte de réception, articles dans un panier.
  • Indicateur de statut : signaler l'état d'un élément d'une liste, conforme, en cours, bloqué.
  • Mise en avant brève : marquer une nouveauté ou une exigence, un mot au plus.

Quand ne pas utiliser un badge

  • Pour une action : un badge ne se clique pas. Si l'utilisateur doit agir, c'est un bouton ou un lien.
  • Pour un choix : une valeur que l'on sélectionne ou que l'on retire est une chips, pas un badge.
  • Pour un texte long : au-delà de deux ou trois mots, passer à un vrai libellé.

Modes d'action

  • Souris : aucun. Le badge n'est pas cliquable ; c'est l'élément qui le porte qui l'est.
  • Clavier : aucun. Le badge ne prend jamais le focus et ne s'insère pas dans l'ordre de tabulation.
  • Lecteur d'écran : le contenu du badge est lu dans le nom accessible de l'élément parent, ou annoncé par une région live quand le compteur change.

Contenu

  • Un nombre ou un mot : le badge est lu à la suite du libellé qu'il complète, il doit rester très court.
  • Une unité explicite : « 3 » seul ne veut rien dire. Le sens vient du libellé voisin ou du nom accessible, « Messages, 3 non lus ».
  • Un dépassement lisible : afficher « 99+ » plutôt qu'un nombre qui déborde de la pastille.

Sur cette page

Mots-clés

  • Badge : petit élément visuel affichant un nombre ou un mot au contact de l'élément qu'il qualifie.
  • Nom accessible : le texte qu'une technologie d'assistance restitue pour un élément. Le badge y est intégré plutôt que lu à part.
  • Région live : zone dont la modification est annoncée sans déplacer le focus. Elle sert quand le compteur évolue.
  • aria-hidden : retire un élément de l'arbre d'accessibilité. Réservé à la décoration pure.

Décomposition des composants

La démonstration réunit les quatre situations où le badge se comporte différemment.

Badge autonome

  • Le badge et le mot qu'il qualifie forment une seule phrase lue d'un trait. Le regroupement est porté par un élément unique, pas par deux textes voisins que le lecteur d'écran restituerait séparément.
  • Le sens n'est jamais porté par la seule couleur : le mot est écrit dans le badge (WCAG 1.4.1).

Badge dans un élément interactif

  • Le badge fait partie du nom accessible du bouton ou du lien qui le contient : « Messages, 3 non lus ». Le nombre seul serait inexploitable.
  • Le badge ne prend pas le focus et n'ajoute aucune tabulation. L'indicateur de focus reste celui de l'élément parent (WCAG 2.4.7).

Badge sans texte

  • La pastille seule est décorative : elle porte aria-hidden. L'information qu'elle suggère est écrite en clair dans le nom accessible de l'élément parent.

Mise à jour du compteur

  • La nouvelle valeur est annoncée par une région live présente dès le chargement, et vide. Une région insérée au moment de l'annonce n'est pas restituée (WCAG 4.1.3).
  • L'annonce nomme ce qui change : « Messages, 4 non lus », jamais « 4 ».

Lecteur d'écran

  • Le badge n'est jamais un élément à part : il est lu dans la continuité du libellé qu'il complète.
  • Aucun rôle ARIA n'est ajouté. Un badge est du texte ; lui donner un rôle le sortirait de la phrase.
  • Un badge purement décoratif est masqué par aria-hidden, et l'information correspondante figure ailleurs en texte.
  • Un compteur qui évolue passe par une région live, sans déplacement de focus.

Le badge est un composant non interactif : il ne reçoit pas le focus clavier et n'est associé à aucune interaction clavier propre. Lorsqu'il est placé dans un bouton ou un lien, c'est cet élément parent qui porte le focus et les interactions.

Interactions clavier du composant Badge
Touche Fonction
Non applicable Le badge ne reçoit pas le focus et ne répond à aucune touche clavier. Il est atteignable au curseur virtuel des lecteurs d'écran.
Tab Lorsque le badge est placé dans un bouton ou un lien, déplace le focus vers cet élément parent, dont le nom accessible inclut le contenu du badge.

Note : l'indicateur de focus visible est porté par l'élément parent et ne doit pas être masqué par un badge en superposition. Consultez les pages des composants Boutons et Liens pour leurs interactions clavier.