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 rubriques et sous-rubriques 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 à 19h53.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

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.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  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

Haut de page

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