1.3. Différencier visuellement la position courante dans les systèmes de navigation

Dans chaque système de navigation, l’élément courant doit avoir un aspect différent.

Dans ce premier exemple d’un menu, des couleurs de texte et de fond différentes ainsi qu’une flèche tournée vers le bas marquent la rubrique courante (« Investisseurs »).
Dans ce second exemple d’un menu, une couleur de fond différente ainsi qu’une mise en gras et une encoche marquent la page courante (« Organigramme »).
Dans cet exemple d’une pagination, des couleurs de texte et de fond différentes ainsi qu’une mise en gras marquent la page courante (« 3 »).
Dans cet exemple d’un système d’onglets, des couleurs de texte et de fond différentes ainsi qu’une mise en gras marquent l’onglet courant (« Lieu »).
Dans cet exemple d’un système de navigation dans un carrousel d’actualités, une pastille de couleur et de taille différentes marque le panneau courant.

Attention

Veiller à ce que cette différenciation visuelle de l’élément courant dans les systèmes de navigation ne repose pas uniquement sur la couleur en utilisant par exemple, en complément :

  • Une mise en gras.
  • Une icône.
  • Une taille de texte différente.

Remarque

Il est fortement recommandé de prévoir également un aspect différent au survol des éléments.

Aller plus loin

  1. Recommandation d’accessibilité pour la conception fonctionnelle et graphique associée : 3.2. Assurer la compréhension de l’information même en l’absence de couleurs.
  2. Recommandation d’accessibilité HTML, CSS et JavaScript associée : 1.7. Identifier la position courante dans les systèmes de navigation avec aria-current.
  3. Recommandation d’accessibilité HTML, CSS et JavaScript associée : 7.9. Identifier l’étape courante des formulaires à étapes multiples avec aria-current="step".
  4. Recommandation d’accessibilité HTML, CSS et JavaScript associée : 10.3. Garantir la compréhension de l’information même lorsque CSS est désactivé.

4 commentaires

  • Par claire bizingre, le 4 novembre 2015 à 16h54.

    Bonjour,

    Je me pose une question !

    On a le critère RGAA 10.14 [A] : Dans chaque page Web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

    Est-ce que pour le coup lors de l’implémentation du menu, il faudrait rajouter une information textuelle indiquant la position courante ?

    On parle souvent de rajouter cette information via l’attribut title, title="Investisseurs - rubrique courante".

    Qu’en pensez-vous ?

    Répondre

  • Par Johan Ramon, le 22 janvier 2018 à 14h59.

    Mise à jour de la fiche le 16/01/2018.

    Répondre

  • Par Johan Ramon, le 21 février 2018 à 17h44.

    Mise à jour de la fiche le 21/02/2018.

    Répondre

Ajouter un commentaire

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

Haut de page