Navigation

Comme vous l'avez appris dans Liens, l'élément <a> avec l'attribut href crée des liens que les utilisateurs peuvent suivre en cliquant ou en appuyant dessus. Dans Listes, vous avez appris à créer des listes de contenus. Dans ce module, vous allez découvrir comment regrouper des listes de liens pour créer une navigation.

Il existe plusieurs types de navigation et plusieurs façons de les afficher. Les ancres nommées dans le texte qui renvoient vers d'autres pages du même site Web sont considérées comme de la navigation locale. La navigation locale qui se compose d'une série de liens affichant la hiérarchie de la page actuelle par rapport à la structure du site ou aux pages que l'utilisateur a suivies pour accéder à la page actuelle est appelée fil d'Ariane.

La table des matières d'une page est un autre type de navigation locale. Une page contenant des liens hiérarchiques vers chacune des pages d'un site est appelée plan du site. La navigation menant aux pages de premier niveau du site Web, qui se trouve probablement sur chaque page, est appelée navigation globale. La navigation globale peut s'afficher de différentes manières, y compris dans des barres de navigation, des menus déroulants et des menus pop-up. Un même site peut afficher sa navigation globale différemment selon la taille de la fenêtre d'affichage.

Assurez-vous toujours que les utilisateurs peuvent accéder à n'importe quelle page de votre site en un minimum de clics, tout en veillant à ce que la navigation soit intuitive et non déroutante. Cela dit, il n'existe pas d'exigences spécifiques pour les éléments de navigation. MachineLearningWorkshop.com est un site Web monopage. Il dispose d'une barre de navigation locale en haut à droite, qui est l'emplacement où les sites multipages placent souvent leur navigation globale.

Lien "Accéder au contenu"

Certains sites proposent un lien "Passer au contenu", souvent en tant que premier élément de l'ordre de mise au point. Voici un exemple :

<a href="#main" class="skip-link button">Skip to main</a>

Lorsqu'il est sélectionné ou que l'utilisateur appuie sur Enter, il fait défiler la page et sélectionne l'élément avec un ID main, probablement le contenu principal.

<main id="main">

Pour améliorer l'usabilité et l'accessibilité, il est important de permettre aux utilisateurs de contourner les blocs de contenu qui se répètent sur chaque page, comme un titre partagé et les principaux éléments de navigation. Avec un lien d'ancrage, lorsqu'un utilisateur au clavier appuie sur tab, il peut accéder rapidement au nouveau contenu de la page. Cela leur permet d'éviter d'avoir à parcourir un menu étendu avec la touche de tabulation.

La plupart des concepteurs n'apprécient pas l'apparence d'un tel lien en haut de la page. Vous pouvez très bien masquer ce lien. Toutefois, n'oubliez pas que lorsque le lien est sélectionné (ce qui se produit lorsqu'un utilisateur navigue au clavier sur la page), il doit être visible.

Ne masquez le contenu que lorsqu'il n'est pas sélectionné ni actif, à l'aide d'un sélecteur semblable à .visually-hidden:not(:focus):not(:active).

Comme pour tout texte de lien, le nom doit indiquer clairement où le lien redirige l'utilisateur. La cible du lien doit être le début du contenu principal de la page.

Sommaire

Le premier élément de notre contenu principal est le titre <h1> avec le titre de cette page : <h1>Navigation</h1>. Le titre principal est suivi d'une brève description du contenu de ce tutoriel.

Sur les petits écrans, la table des matières apparaît après l'en-tête. Sur les grands écrans, il s'affiche dans une barre latérale alignée à droite.

L'élément <nav> est le plus adapté aux sections de navigation. Il informe automatiquement le lecteur d'écran et le moteur de recherche qu'une section a un rôle navigation, un rôle de repère.

Incluez l'attribut aria-label pour une brève description de l'objectif de la navigation. Dans ce cas, la valeur de cet attribut serait redondante par rapport au texte "Sur cette page". Pour faire référence à du texte visible, utilisez plutôt aria-labelledby.

En utilisant un id, cela pourrait ressembler à ceci :

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

En plus de réduire la redondance, le texte visible est traduit par les services de traduction, alors que les valeurs d'attributs peuvent ne pas l'être. Si possible, si un texte est présent et fournit un libellé adéquat, faites référence à ce texte au lieu d'utiliser le texte de l'attribut.

La navigation "Sur cette page" correspond à la table des matières. Si vous souhaitez utiliser aria-label, fournissez ce contexte plutôt que de répéter le texte visible :

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

Pour fournir un nom accessible à un élément, vous ne devez pas inclure le nom de l'élément. Les lecteurs d'écran fournissent le nom de l'élément à l'utilisateur. Par exemple, lorsque vous utilisez l'élément <nav>, n'incluez pas le mot "navigation", car cette information est déjà incluse dans les éléments sémantiques.

Bien que les éléments de navigation ne doivent pas nécessairement être imbriqués dans une liste, l'utilisation d'une liste permet aux utilisateurs de lecteurs d'écran de savoir combien d'éléments de liste, et donc de liens, se trouvent dans la navigation.

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

Éviter de modifier l'ordre des onglets

La table des matières peut apparaître après l'en-tête, sur les petits écrans ou dans une barre latérale alignée à droite. Inclure deux ensembles de navigation identiques, uniquement pour en afficher un seul, serait un anti-pattern.

Nous avons utilisé le CSS pour afficher la navigation sous forme de barre latérale sur les pages dont la largeur est supérieure à 1 254 px.

Les utilisateurs sont habitués à ce que le contenu soit responsive et change d'emplacement lorsqu'ils changent d'appareil ou augmentent la taille de la police, mais ils ne s'attendent pas à ce que l'ordre des onglets change dans ce cas. Les mises en page doivent être accessibles, prévisibles et cohérentes sur l'ensemble d'un site. Ici, l'emplacement de la table des matières n'est pas prévisible.

Fil d'Ariane sur la page

Les breadcrumbs fournissent une navigation secondaire pour aider les utilisateurs à comprendre où ils se trouvent sur un site Web. En général, le fil d'Ariane indique la hiérarchie des URL du document actuel et l'emplacement de la page actuelle dans la structure du site.

La structure du site du point de vue de l'utilisateur peut différer de la structure des fichiers sur le serveur. Ce n'est pas un problème. L'utilisateur n'a pas besoin de savoir comment vous organisez vos fichiers, mais il doit pouvoir parcourir votre contenu.

Les breadcrumbs permettent aux utilisateurs de mieux comprendre l'organisation de votre site. Cela permet aux utilisateurs d'accéder à n'importe quelle section parente, sans avoir à revenir en arrière sur chaque page précédemment consultée, à l'aide de la fonction back.

Si le site possède une structure de répertoire hiérarchique, comme c'est le cas pour web.dev, la navigation par fil d'Ariane inclut souvent un lien vers la page d'accueil ou le nom d'hôte, ainsi qu'un lien vers le fichier d'index de chaque répertoire dans le chemin d'accès de l'URL. L'inclusion de la page actuelle est facultative et nécessite un peu plus d'attention.

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

Les sections du fil d'Ariane indiquent le chemin d'accès de la page actuelle à la page d'accueil, en affichant chaque niveau intermédiaire.

Chaque page de module "Apprendre HTML" comporte la même navigation par fil d'Ariane, qui affiche la hiérarchie des leçons HTML dans la section Learn de web.dev.

Le code doit ressembler à ce qui suit :

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

L'élément <nav>, qui est un rôle de point de repère, indique à la technologie d'assistance de présenter le fil d'Ariane comme un élément de navigation sur la page. Le nom accessible des "fils d'Ariane", fourni avec aria-label, permet de différencier cette navigation des autres repères de navigation dans le même document.

Un séparateur de contenu est inséré entre chaque lien. Ces séparateurs peuvent être générés avec CSS pour s'afficher avant chaque élément de la liste, à partir du deuxième.

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

Les lecteurs d'écran ne "voient" pas ces icônes, ce qui est une bonne pratique. Les séparateurs entre les liens du fil d'Ariane doivent être masqués pour les lecteurs d'écran. Ils doivent également présenter un contraste suffisant par rapport à leur arrière-plan, comme tout autre élément de texte et visuel sur la page.

Notre exemple de code utilise une liste ordonnée, qui est préférable à une liste non ordonnée, car les éléments sont énumérés. role="list" a été ajouté, car certaines valeurs de la propriété CSS "display" suppriment la sémantique de certains éléments.

En général, le lien vers la page d'accueil dans un fil d'Ariane doit indiquer "Accueil" plutôt que le nom ou le logo du site. Comme le fil d'Ariane se trouve en haut du document, il est logique que cet anti-modèle ait été utilisé.

La page actuelle, Navigation, n'est pas incluse dans le fil d'Ariane.

Page actuelle

Lorsque la page actuelle est incluse dans un fil d'Ariane, le texte ne doit pas être un lien de préférence, et aria-current="page" doit être inclus dans l'élément de liste de la page actuelle. Si ce n'est pas le cas, il est utile d'indiquer que le titre qui suit est celui de la page actuelle à l'aide d'une icône ou d'un autre symbole.

Découvrez une autre version du fil d'Ariane avec cet exercice :

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

Il est possible que le fil d'Ariane ne corresponde pas aux étapes linéaires suivies par un utilisateur pour accéder à la page actuelle. La liste des étapes suivies jusqu'à présent peut être imbriquée dans un <nav>, mais ne doit pas être libellée comme un fil d'Ariane.

Navigation locale

Le composant de navigation suivant s'affiche sur la plupart des appareils de taille moyenne et grande dans une barre latérale gauche. Il comporte une barre de filtres et des liens vers chacune des sections de Learn HTML. Ces liens et la barre de filtres permettent de naviguer dans les emplacements.

Si vous consultez ce site sur un appareil mobile ou si votre écran est plus étroit, la barre latérale est masquée lorsque vous chargez cette page. Vous pouvez y accéder en cliquant sur menu dans la barre de navigation supérieure.

La principale différence entre la navigation locale permanente sur les écrans larges et la navigation locale sur les écrans plus étroits réside dans la flèche qui permet de revenir à la navigation principale en haut de l'écran, puis de fermer la navigation.

Le lien vers ce document ressemble aux autres liens de la navigation locale. Toutefois, son apparence peut être légèrement différente de celle des autres liens pour indiquer aux utilisateurs voyants qu'il s'agit de la page actuelle. Cette différence visuelle doit être créée avec CSS.

La page actuelle peut également être identifiée à l'aide de l'attribut aria-current="page". Cela indique aux technologies d'assistance que le lien pointe vers la page actuelle.

Idéalement, le code HTML de cet élément de liste dans la navigation locale doit ressembler à ce qui suit :

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Navigation globale

La navigation globale mène aux pages de premier niveau du site Web et est identique sur chaque page d'un site. La navigation globale d'un site peut également être constituée d'onglets qui ouvrent des listes imbriquées de liens vers toutes les sous-sections d'un site ou d'autres menus. Il peut inclure des sections avec titre, des boutons et des widgets de recherche. Ces fonctionnalités supplémentaires ne sont pas obligatoires. La navigation doit apparaître sur chaque page et être identique sur chacune d'elles, avec aria-current="page" sur les liens vers la page actuelle, bien sûr.

La navigation globale permet de se déplacer de manière cohérente n'importe où dans l'application ou sur le site Web. Le site Web de Google ne comporte pas de navigation globale en haut de ses pages. Yahoo! Gemini Bien que toutes les principales propriétés Yahoo! aient des styles différents, le contenu de la plupart des sections est le même.

Le contenu des en-têtes de navigation globale des sections "Actualités" et "Sports" est identique. Toutefois, l'icône indiquant que l'utilisateur se trouve sur la page des sports n'est pas suffisamment contrastée pour être accessible, même pour les visiteurs ayant une vision parfaite. Les deux sections disposent d'une navigation globale et d'une navigation locale spécifique à la section en dessous.

Comme pour la navigation globale, les pieds de page doivent être identiques sur toutes les pages. Mais c'est la seule similitude. La navigation globale permet d'accéder à toutes les parties du site, du point de vue des produits. Les éléments de navigation dans un pied de page ne sont soumis à aucune exigence spécifique.

En général, le pied de page inclut des liens vers des pages d'entreprise, comme des mentions légales, des informations sur l'entreprise, une page de recrutement et des liens vers des sources externes pertinentes, comme les réseaux sociaux.

Le pied de page de cette page contient deux ensembles d'éléments de navigation : un ensemble de navigation web.dev associé sur trois colonnes et un ensemble de navigation distinct pour les conditions d'utilisation et la confidentialité de Google. La navigation dans le pied de page inclut des informations sur la façon de contribuer à web.dev, du contenu associé fourni par l'équipe web.dev et des liens vers les réseaux sociaux externes.

Ensuite, nous verrons comment baliser les tableaux de données.

Vérifier que vous avez bien compris

Testez vos connaissances sur la navigation.