État État du widget

`aria-current`

Marque l'élément représentant l'item courant dans un ensemble — la page active dans une navigation, l'étape en cours dans un assistant, aujourd'hui dans un sélecteur de date. Plus spécifique qu'aria-selected ; à utiliser sur les liens et les items où la sélection n'est pas la bonne métaphore.

Quand l’utiliser

Sur l’élément qui représente « où vous êtes » dans un ensemble d’éléments liés. Le cas classique est le lien actif dans une navigation principale : un lecteur d’écran annonce « Tarifs, page actuelle, lien », et les utilisateurs voyants voient un élément mis en évidence qui correspond.

Autres cas fréquents :

L’étape actuelle dans un formulaire multi-étapes ou un assistant (aria-current="step").
La date d’aujourd’hui dans une grille calendrier (aria-current="date").
Le fil d’Ariane actif (aria-current="page").
L’élément en cours de lecture dans une liste de lecture multimédia (aria-current="true").

En quoi il diffère des états voisins :

aria-current — « vous êtes ici » dans une navigation ou un ensemble d’éléments. Utilisé sur les liens et widgets similaires qui ne sont pas basés sur la sélection.
aria-selected — sélection dans un conteneur de type select (tablist, listbox, tree, grid). La sélection est quelque chose que l’utilisateur modifie.
aria-pressed — bouton bascule. Le bouton lui-même est activé ou désactivé.
aria-checked — case à cocher ou bouton radio. Choix indépendant.

Comment le maintenir synchronisé

Valeurs valides : "page", "step", "location", "date", "time", "true", "false". Choisissez le token le plus spécifique — "page" pour les liens de navigation, "step" pour les assistants, "date" pour les calendriers. "true" est le repli générique quand aucun des autres ne convient. "false" (valeur par défaut) signifie « non courant » ; généralement, vous omettez simplement l’attribut sur les éléments non courants.

Dans un menu de navigation, exactement un lien doit porter aria-current à tout moment. Mettez-le à jour côté client lors des changements de route ; les pages rendues côté serveur peuvent le rendre directement dans le HTML.

Stylisez visuellement l’élément courant pour que les utilisateurs voyants voient le même repère. Un motif courant est [aria-current="page"] { font-weight: 600; }.

Erreurs fréquentes

Utiliser aria-current="true" sur tous les liens de navigation, ou sur aucun.
Utiliser aria-selected sur un lien de navigation — sémantique incorrecte ; le lien n’est pas une option sélectionnable.
Oublier de mettre à jour aria-current après les changements de route côté client dans une application monopage.
Styliser l’état actif en CSS sans jamais définir aria-current. Les lecteurs d’écran n’annoncent rien de distinctif.
Utiliser aria-current="page" sur un bouton qui n’est pas un lien de navigation.
Définir aria-current sur le conteneur <nav> plutôt que sur le lien individuel.

Exemple

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>