Aria-current : indiquer la position dans la navigation
En Bref : L'essentiel à retenir
- aria-current="page" indique le lien correspondant à la page actuellement affichée dans un menu de navigation ou un fil d'Ariane.
- La valeur "step" signale l'étape en cours dans un processus multi-étapes comme un wizard d'inscription ou un tunnel de commande.
- Le lecteur d'écran annonce "page actuelle" ou "étape actuelle" après le texte du lien, informant l'utilisateur de sa position.
- Contrairement à aria-selected, aria-current n'implique pas une sélection interactive mais une indication contextuelle de position.
Les utilisateurs voyants repèrent facilement où ils se trouvent sur un site grâce aux indicateurs visuels : menu surligné, breadcrumb en gras. Mais ces indices sont invisibles pour les lecteurs d'écran. L'attribut aria-current comble ce manque.
Le problème résolu
Sans aria-current, un lecteur d'écran lit un menu de navigation comme une simple liste de liens, sans indiquer lequel correspond à la page affichée :
"Accueil, lien. Produits, lien. Contact, lien."
Avec aria-current="page" :
"Accueil, lien. Produits, page actuelle, lien. Contact, lien."
L'utilisateur sait instantanément qu'il est sur la page "Produits".
Les valeurs de aria-current
| Valeur | Usage |
|---|---|
page | Page actuelle dans une navigation |
step | Étape actuelle dans un processus |
location | Position dans un environnement (plan, carte) |
date | Date actuelle dans un calendrier |
time | Heure actuelle dans un planning |
true | Élément actuel (générique) |
false | Explicitement non actuel |
[!NOTE] Utilisez la valeur la plus spécifique possible.
pageest plus informatif quetruepour une navigation.
Navigation principale
Le cas le plus courant : marquer la page courante dans le menu :
<nav aria-label="Menu principal">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits" aria-current="page">Produits</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Mise à jour dynamique (SPA)
Pour les applications single-page, mettez à jour l'attribut lors des changements de route :
function updateNavigation(currentPath) {
document.querySelectorAll('nav a').forEach(link => {
if (link.getAttribute('href') === currentPath) {
link.setAttribute('aria-current', 'page');
} else {
link.removeAttribute('aria-current');
}
});
}
// Exemple avec un routeur
router.on('routeChange', (route) => {
updateNavigation(route.path);
});
Fil d'Ariane (Breadcrumb)
Le breadcrumb utilise aussi aria-current="page" sur le dernier élément :
<nav aria-label="Fil d'Ariane">
<ol>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/produits/accessoires">Accessoires</a></li>
<li><a href="/produits/accessoires/claviers" aria-current="page">Claviers</a></li>
</ol>
</nav>
[!TIP] Bien que ce soit un lien vers la page actuelle (techniquement inutile), conservez-le comme lien pour la cohérence. L'attribut
aria-currentinforme que c'est la page affichée.
Processus multi-étapes (Wizard)
Pour un tunnel de commande ou un formulaire en plusieurs étapes :
<nav aria-label="Étapes de commande">
<ol class="wizard-steps">
<li>
<a href="/panier">
<span class="step-number">1</span>
Panier
</a>
</li>
<li>
<a href="/livraison" aria-current="step">
<span class="step-number">2</span>
Livraison
</a>
</li>
<li>
<span aria-disabled="true">
<span class="step-number">3</span>
Paiement
</span>
</li>
<li>
<span aria-disabled="true">
<span class="step-number">4</span>
Confirmation
</span>
</li>
</ol>
</nav>
Le lecteur d'écran annonce : "Livraison, étape actuelle".
Pagination
Pour indiquer la page courante dans une pagination :
<nav aria-label="Pagination des résultats">
<ul>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3" aria-current="page">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
</ul>
</nav>
Calendrier interactif
Pour un sélecteur de date, aria-current="date" marque le jour actuel :
<table role="grid" aria-label="Janvier 2026">
<tbody>
<tr>
<!-- ... -->
<td>
<button aria-current="date">28</button>
</td>
<td>
<button>29</button>
</td>
<!-- ... -->
</tr>
</tbody>
</table>
aria-current vs aria-selected
Ces attributs sont souvent confondus mais servent des usages différents :
| Aspect | aria-current | aria-selected |
|---|---|---|
| Signification | "Vous êtes ici" | "Ceci est choisi" |
| Interactivité | Non (informatif) | Oui (sélection) |
| Exemples | Menu, breadcrumb | Onglets, listbox |
<!-- Navigation : aria-current -->
<nav>
<a href="/accueil" aria-current="page">Accueil</a>
</nav>
<!-- Onglets : aria-selected -->
<div role="tablist">
<button role="tab" aria-selected="true">Onglet 1</button>
</div>
Consultez notre article sur aria-selected pour les cas de sélection interactive.
Style CSS associé
Utilisez l'attribut pour le style visuel également :
nav a[aria-current="page"] {
font-weight: bold;
border-bottom: 2px solid currentColor;
}
.wizard-steps a[aria-current="step"] {
background-color: #005fcc;
color: white;
}
Implémentation avec des frameworks
React
function NavLink({ href, children }) {
const pathname = usePathname();
const isCurrent = pathname === href;
return (
<a
href={href}
aria-current={isCurrent ? 'page' : undefined}
>
{children}
</a>
);
}
Vue
<template>
<router-link
:to="href"
:aria-current="$route.path === href ? 'page' : null"
>
<slot />
</router-link>
</template>
Erreurs courantes
1. Utiliser aria-current sur tous les liens
<!-- Incorrect : un seul élément peut être actuel -->
<a href="/page1" aria-current="page">Page 1</a>
<a href="/page2" aria-current="page">Page 2</a>
<!-- Correct -->
<a href="/page1" aria-current="page">Page 1</a>
<a href="/page2">Page 2</a>
2. Oublier de retirer l'attribut
Lors d'un changement de page en SPA, retirez l'attribut des anciens liens :
// Retirer d'abord tous les aria-current
document.querySelectorAll('[aria-current]').forEach(el => {
el.removeAttribute('aria-current');
});
// Puis ajouter sur le nouveau
3. Utiliser sur des éléments non focusables
<!-- L'attribut a du sens sur les liens/boutons -->
<span aria-current="page">Accueil</span> <!-- Peu utile -->
<a href="/" aria-current="page">Accueil</a> <!-- Correct -->
Tester avec un lecteur d'écran
Naviguez dans votre menu et vérifiez que :
- Le lien actuel est annoncé avec "page actuelle" (ou équivalent)
- Un seul lien est marqué comme actuel
- L'attribut se met à jour lors des changements de page
Critères RGAA concernés
| Critère | Exigence |
|---|---|
| 12.1 | Présence d'un menu de navigation |
| 12.4 | Page actuelle indiquée dans le menu |
| 12.6 | Fil d'Ariane présent (si applicable) |
Conclusion
aria-current est un attribut simple mais précieux pour l'orientation des utilisateurs de lecteurs d'écran. Quelques lignes de code suffisent pour améliorer significativement l'expérience de navigation. Pensez à l'ajouter sur vos menus, breadcrumbs et indicateurs d'étapes.
Vérifiez la navigation de votre site avec RGAA Checker : notre outil analyse la structure des menus et les attributs d'accessibilité.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.