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.), il est recommandé d’identifier la position courante avec aria-current="page".

De même, uniquement dans les menus (et non dans le fil d’Ariane), il est également recommandé d’identifier les éventuelles rubrique et sous-rubrique parentes 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 role="navigation" 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 role="navigation" aria-labelledby="intro-fil-ariane">
   <p id="intro-fil-ariane">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>

2 commentaires

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

    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 à 09:14.

      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

Répondre à Johan Ramon

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

Haut de page