Utilisation de l'attribut aria-current

Introduction #

L'attribut aria-current sert à indiquer (au niveau du code) l'élément courant dans un ensemble d'éléments.

Pour faire simple, prenons l'exemple d'un menu de navigation. L'élément courant est généralement mis en évidence par un effet visuel. Pour que cette mise en évidence soit également perçue par les utilisateurs qui utilisent un lecteur d'écran (ou un outil d'assistance quel qu'il soit), il est indispensable de marquer l'élément au niveau code en utilisant l'attribut aria-current.

Utilisation #

Pour indiquer l'élément en cours dans un ensemble d'éléments, il suffit d'ajouter un attribut aria-current au niveau du code HTML. Dans l'exemple ci-dessous, on utilise la valeur générique true :


  <ul>
    <li>élément 1</li>
    <li aria-current="true">élément 2</li>
    <li>élément 3</li>
  <ul>

Le second élément de cette liste sera par exemple vocalisé "en cours, élément 2" par le lecteur d'écran NVDA.

Liste des différents usages #

L'attribut aria-current accepte les valeurs suivantes : true, page, step, location, date, time et false.

  • true : indique l'élément en cours dans un ensemble d'éléments
  • page : indique la page en cours dans un ensemble de pages
  • step : indique l'étape en cours
  • location : indique l'élément en cours dans un diagramme
  • date : indique la date courante dans un ensemble de date
  • time : indique l'heure en cours
  • false (valeur par défaut) : n'a pas d'effet

Quelques exemples d'usages courants #

Exemples 1 : menu de navigation #

Utiliser la valeur page pour indiquer la page courante dans un ensemble de pages.

Menu de navigation proposant 3 éléments : accueil, aide et à propos. L'élément à propos est souligné et affiché d'une couleur différente ce qui permet visuelement de comprendre qu'il s'agit de l'élément en cours de consultation


  <nav aria-label="Navigation principale">
    <ul>
      <li>
        <a href="/fr/">Accueil</a>
      </li>
      <li>
        <a href="/fr/aide/">Aide</a>
      </li>
      <li>
        <a href="/fr/a-propos/" aria-current="page">À propos</a>
      </li>      
    </ul>

Exemples 2 : système de pagination #

Utiliser la valeur page pour indiquer la page en cours de consultation dans un système de pagination :
Capture d'écran, exemple de système de pagination, un bouton précédent, un bouton suivant et 3 liens intitulés 1, 2 et 3


  <ol>
    <li aria-label="page 1">1</li>
    <li aria-label="page 2" aria-current="page">2</li>
    <li aria-label="page 3">3</li>    
  </ol>

Exemples 3 : fil d'Ariane #

Utiliser la valeur page pour indiquer la page en cours dans un fil d'Ariane :
Capture d'écran d'un exemple de fil d'Ariane


  <ol>
    <li><a href="...">Accueil</a></li>
    <li><a href="...">Articles</a></li>
    <li aria-current="page">Utilisation de l'attribut aria-current</li>
  </ol>

Exemples 4 : processus à étapes #

Utiliser la valeur step pour indiquer l'étape en cours dans un processus à étapes en plusieurs page.

Capture d'écran un composant affichant un processus à étapes tel qu'on peux le trouver sur un site marchant (choix d'un produit, livraison, paiement...). 5 étapes sont visibles, l'étape 3 est mise en valeur (changement de couleur) pour indiquer qu'il s'agit de l'étape en cours.


  <ol>
    <li>Label n°1</li>
    <li>Label n°2</li>
    <li aria-current="step">Label n°3</li>
    <li>Label n°4</li>
    <li>Label n°5</li>
  </ol>

Exemple 5 : sélection d'une date #

Utiliser la valeur date dans un composant permettant de sélectionner une date. Un attribut aria-current="date" est positionné sur la date du jours tandis qu'un attribut aria-selected="true" est positionné sur la date en cours de sélection.

Capture d'écran d'un composant de type datepicker, la date du jour et la date en cours de sélection sont mises en évidence via un changement de couleur.