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.

3 commentaires

  • 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

  • Par Yoan Malié, le 21 juillet 2018 à 19h53.

    Bonjour,

    Pour l’exemple sur un menu, l’attribut aria-current est ajouté un coup sur la balise <a> puis sur la balise <li> pour le sous-menu. Je ne comprends pas la différence de ces deux utilisations.

    À propos du fil d’Ariane, est-ce qu’il est tout à fait possible aussi d’utiliser aria-current="location" pour ce cas ?

    Répondre

    • Par Johan Ramon, le 27 juillet 2018 à 9h14.

      Bonjour,

      Merci pour votre commentaire.

      Idéalement, la page courante dans un système de navigation ne doit pas être structurée avec une balise <a>. Notamment car si c’est le cas, le lien ne sert qu’à recharger la page déjà affichée.

      C’est pourquoi nous recommandons lorsque possible dans nos exemples de code d’intégrer aria-current dans la balise <li> de la page courante.

      Dans le premier exemple de code, nous avons utilisé aria-current sur la balise <a> de la rubrique courante « Agenda » car il s’agit encore d’un lien (le lien de la page courante souhaité non cliquable étant « Éducation »).

      (À noter que d’après cette ressource du W3C concernant aria-current, cet attribut peut bien être intégré dans « All elements of the base markup ».)

      Concernant votre question sur l’utilisation de aria-current="location" dans un fil d’Ariane, il y a plusieurs points de vue :

      • Dans cette fiche, partant du principe que le dernier élément d’un fil d’Ariane est la page courante, nous sommes partis sur aria-current="page".
      • L’article « Using the aria-current attribute« , lui, recommande d’utiliser aria-current="location" dans un fil d’Ariane.

      À l’heure actuelle, j’aurai tendance à vous dire que aria-current="page" comme aria-current="location" peuvent tous deux convenir pour marquer la page courante d’un fil d’Ariane. :)

      Johan

      Répondre

Ajouter un commentaire

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

Haut de page