1.7. Identifier la position courante dans les systèmes de navigation avec aria-current

Dans les systèmes de navigation (menus, fil d’Ariane, pagination, etc.), la position courante doit être identifiée avec aria-current="page".

Aussi, uniquement dans les menus (et non dans le fil d’Ariane), les éventuelles rubrique et sous-rubrique parentes doivent être identifiées avec aria-current="true".

Exemple sur un menu

Dans l’exemple de code ci-après d’un menu de navigation, la rubrique parente « Agenda » est identifiée via aria-current="true" intégré dans sa balise <a> et la page courante « Éducation » est identifiée via aria-current="page" intégré dans sa balise <li>.

<nav role="navigation" aria-label="Menu principal">
   <ul>
      <li><a href="…">Accueil</a></li>
      <li><a href="…" aria-current="true">Agenda</a>
         <ul>
            <li><a href="…">Culture</a></li>
            <li aria-current="page">Éducation</li>
            <li><a href="…">Sports</a></li>
         </ul>
      </li>
      <li><a href="…">Actualités</a></li>
      <li><a href="…">Contact</a></li>
   </ul>
</nav>

Exemple sur une pagination

Dans l’exemple de code ci-après d’une pagination, la page courante « 2 » est identifiée via aria-current="page" intégré dans sa balise <li>.

<nav aria-label="Pagination">
   <ul>
      […]
      <li><a href="…" aria-label="Page 1">1</a></li>
      <li aria-current="page">2</li>
      <li><a href="…" aria-label="Page 3">3</a></li>
      […]
   </ul>
</nav>

Exemple sur un fil d’Ariane

Dans l’exemple de code ci-après d’un fil d’Ariane, la page courante « Notice éditoriale » est identifiée via aria-current="page" intégré dans sa balise <li>.

<nav aria-labelledby="intro-pagination">
   <p id="intro-pagination">Vous êtes ici :</p>
   <ul>
      <li><a href="…">Accueil</a></li>
      <li><a href="…">Les notices AcceDe Web</a></li>
      <li aria-current="page">Notice éditoriale</li>
   </ul>
</nav>

Aller plus loin

  1. Recommandation d’accessibilité pour la conception fonctionnelle et graphique associée : 1.3. Différencier visuellement la position courante dans les menus.
  2. Indicate the current item.
  3. Using the aria-current attribute.

1 commentaire

  • Par Johan Ramon, le 20 juin 2018 à 17h32.

    Modification de la fiche réalisée le 20/06/2018 : mise à jour de l’exemple de code du fil d’Ariane.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page