Navigation

Comme vous l'avez appris dans la section Liens, l'élément <a> avec l'attribut href crée des liens que les utilisateurs peuvent suivre en cliquant ou en appuyant. Dans Listes, vous avez appris à créer des listes de contenu. Dans cette section, vous découvrirez comment regrouper des listes pour créer une navigation.

Il existe plusieurs types de navigation et plusieurs façons de les afficher. Ancres nommées dans du texte redirigeant vers d'autres pages au sein de un même site Web sont considérés comme une navigation locale. La navigation locale qui consiste en une série de liens affichant la hiérarchie des la page active par rapport à la structure du site, ou les pages suivies par l'utilisateur pour atteindre 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 chaque page d'un site est appelée un plan du site. La section de navigation menant aux pages de premier niveau du site web qui se trouve sur chaque page est appelée navigation globale. La navigation globale peut être affichée de plusieurs manières différentes, y compris dans les barres de navigation, les menus déroulants et les menus déroulants. Un même site peut afficher sa navigation globale différemment, en fonction de la taille de la fenêtre d'affichage.

Assurez-vous toujours que les utilisateurs peuvent accéder à n'importe quelle page de votre site avec le moins de clics possible, tout en veillant à ce que la navigation est intuitive et pas écrasante. Cela dit, il n'y a pas d'exigences spécifiques pour les éléments de navigation. MachineLearningWorkshop.com étant un site web d'une seule page, il a une barre de navigation locale en haut à droite ; C'est là que les sites de plusieurs pages placent souvent leur navigation globale.

Si vous consultez cette page sur web.dev, vous pouvez repérer quelques fonctionnalités de navigation. Il y a un fil d'Ariane au-dessus du titre, une annonce "sur cette page" une table des matières après le titre et la mention "Apprendre le HTML" une table des matières qui, selon la largeur de votre écran, est toujours affichée ou rendue visible en cliquant sur un bouton de menu. Le premier élément de la page est un lien caché vers #main, qui vous permet d'ignorer les liens de la barre latérale et du fil d'Ariane.

"Passer au contenu" lien [link]

Le premier élément de la page est un lien interne:

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

Lorsque l'utilisateur clique dessus, ou lorsqu'il est sélectionné et que l'utilisateur clique sur Enter, il fait défiler la page et place le focus sur le contenu principal: un point de repère <main> avec un id de main:

<main id="main">

Vous n'avez peut-être jamais vu le lien sur ce site, même si vous avez lu toutes les sections précédentes. Elle ne s'affiche que lorsqu'elle est sélectionnée:

Pour améliorer la facilité d'utilisation et l'accessibilité, il est important de permettre aux utilisateurs de contourner les blocs de contenu qui se répètent sur chaque page. Le lien "Ignorer" est inclus. Ainsi, lorsqu'un utilisateur utilisant un clavier appuie sur tab lors du chargement, il peut rapidement accéder au contenu principal du site, ce qui lui évite sans avoir à parcourir de nombreuses liaisons. Sur cette page, le lien "Ignorer" permet d'ignorer la navigation dans la barre latérale au niveau de la section et le fil d'Ariane. qui redirige directement l'utilisateur vers le titre de la page.

La plupart des concepteurs n'aiment pas l'apparence d'un lien en haut de la page. Vous pouvez masquer le lien tout en vous souvenant que lorsque le lien est sélectionné, c'est-à-dire lorsqu'un utilisateur de clavier clique sur le lien de la page, celui-ci doit être visible par tous les utilisateurs. Ne masquez le contenu non sélectionné ni actif à l'aide d'un sélecteur semblable à .visually-hidden:not(:focus):not(:active).

Le texte du lien indique "passer à la page principale". Il s'agit du nom accessible du lien. Il s'agit d'un site technique, et les utilisateurs savent probablement quel est signifie. Comme tout texte de lien, le nom accessible doit clairement indiquer où le lien redirige l'utilisateur. La cible du lien doit être le début du au contenu principal de la page. Pour tester cela, lors du chargement de la page, appuyez sur la touche de tabulation pour accéder à . Appuyez ensuite sur Enter pour qu'il "saut" au contenu principal.

Sommaire

Le lien "passer au contenu" fait défiler le contenu principal pour l'afficher. Le premier élément est l'en-tête <h1> avec le titre de cette section. Dans le cas présent : <h1>Marking up navigation</h1>. Le titre principal est suivi du slogan, qui décrit brièvement le contenu de ce tutoriel. L'affichage de la navigation dans la table des matières avant ou après l'en-tête dans le codebase dépend de la largeur de votre navigateur.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

Si la largeur de votre navigateur est supérieure à 80 em, la table des matières apparaît avant le titre du balisage. Elle se présente comme suit : (les noms de classe ont été supprimés pour simplifier le balisage):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

<nav> est le meilleur élément à utiliser pour les sections de navigation: il informe automatiquement le lecteur d'écran et le moteur de recherche. qu'une section a le rôle navigation, un rôle de point de repère.

Inclusion de l'attribut aria-label fournit une brève description de l'objectif de la navigation. Dans ce cas, comme la valeur de l'attribut est redondante visible sur la page, il est préférable d'utiliser aria-labelledby pour référencer le texte visible.

Nous pouvons remplacer le <div> non sémantique par un paragraphe <p>, puis ajouter un id pour qu'il puisse être référencé. Nous utilisons ensuite aria-labelledby:

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

En plus de réduire la redondance, le texte visible est traduit par les services de traduction, contrairement aux valeurs d'attribut. Dans la mesure du possible, si le texte fourni fournit une étiquette adéquate, préférez-le plutôt au texte de l'attribut.

Cette navigation est la table des matières. Si vous souhaitez utiliser aria-label, fournissez cette information plutôt que de répéter le texte visible:

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

Lorsque vous indiquez un nom accessible sur un élément, n'incluez pas le nom de l'élément. Les lecteurs d'écran fournissent ces informations à l'utilisateur. Par exemple, lorsque vous utilisez l'élément <nav>, n'incluez pas "navigation". ces informations sont incluses lors de l'utilisation d'éléments sémantiques.

Les liens eux-mêmes figurent dans une liste non triée. Bien qu'ils n'aient pas besoin d'être imbriqués dans une liste, l'utilisation d'une liste permet aux utilisateurs de lecteurs d'écran de savoir combien les éléments de liste, et donc les liens, sont une liste individuelle dans une 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>

Si la largeur de votre navigateur est inférieure à 80 em, la section "Sur cette page" se trouve sous le titre et le slogan. Cela se fait en incluant deux composants de navigation de table des matières et en masquant l'un ou l'autre avec CSS display: none; en fonction d'une requête média.

Inclure deux widgets identiques pour n'en afficher qu'un seul constitue un anti-modèle. Les octets supplémentaires sont négligeables. Masquage du contenu HTML si tous les utilisateurs utilisent le CSS display: none est approprié. Le problème est que, sur les grands écrans, la table des matières se trouve avant #main. Sur les écrans plus étroits, la table des matières est imbriquée dans #main. Si vous utilisez le clavier pour accéder au contenu, passez le tableau des contenus sur un grand écran. Bien que les utilisateurs soient habitués à ce que le contenu soit réactif et qu’ils changent d’emplacement lorsqu’ils changent d’appareil ou augmenter la taille de leur police, il ne s'attend pas à ce que l'ordre de tabulation change lorsqu'il le fait. 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 de la page

Les fils d'Ariane fournissent une navigation secondaire pour aider les utilisateurs à comprendre où ils se trouvent sur un site Web. Ils indiquent généralement la hiérarchie des URL du document actuel et son emplacement dans la structure du site. Du point de vue de l'utilisateur, la structure du site peut être différente de la structure de fichiers sur le serveur. Très bien. L'utilisateur n'a pas besoin de savoir comment vous organisez vos fichiers, mais il doit pouvoir pour parcourir votre contenu.

Les fils d'Ariane aident les utilisateurs à naviguer et à comprendre l'organisation de votre site, ce qui leur permet de naviguer rapidement n'importe où jusqu'à n'importe quel ancêtre sans avoir à parcourir chaque page précédente visitée pour accéder à la page actuelle à l'aide de la fonctionnalité back.

Si le site a une structure de répertoires hiérarchique simple, comme c'est le cas avec web.dev, la navigation sous forme de fil d'Ariane sera souvent composée d'un lien vers la page d'accueil, ou nom d'hôte, avec un lien vers le fichier d'index de chaque répertoire dans le chemin de l'URL. L'inclusion du la page actuelle est facultative et requiert 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 entre la page actuelle et la page d'accueil, en affichant chaque niveau intermédiaire.

Chaque page du module HTML d'apprentissage possède la même navigation sous forme de fil d'Ariane, affichant la hiérarchie des leçons HTML au sein de la section Section learn de web.dev. Le code est semblable à ce qui suit, avec les classes et les détails SVG supprimés pour plus de clarté:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

Ce fil d'Ariane respecte les bonnes pratiques. Elle utilise l'élément <nav>, un rôle de repère, de sorte que la technologie d'assistance présente le fil d'Ariane comme un élément de navigation sur la page. Le nom accessible de "fil d'Ariane", fourni avec aria-label, le différencie des autres repères de navigation du document actuel.

Les liens sont séparés par des séparateurs de contenu générés par CSS. Les séparateurs apparaissent avant chaque élément de liste, en commençant par le deuxième <li>.

[aria-label^="breadcrumb" 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 "verront" ce qui est recommandé: les séparateurs entre les liens du fil d'Ariane ne doivent pas être visibles par les lecteurs d'écran. Le contraste avec l'arrière-plan doit également être suffisant, comme pour le texte normal.

Cette version utilise une liste non triée et des éléments de liste. Il est préférable d'utiliser une liste numérotée, car les éléments de liste triés sont énumérés. Il s'agit également d'une liste: role="list" a été ajouté, car certaines valeurs de propriétés d'affichage CSS suppriment la sémantique de certains éléments.

En règle générale, le lien vers la page d'accueil dans un fil d'Ariane doit indiquer "accueil". et non le logo comportant le nom du site, le libellé. Mais comme le fil d'Ariane se trouve en haut du document et est la seule occurrence du logo sur la page, il est logique pourquoi cet anti-modèle a été utilisé.

Le dernier élément est un élément <share-action> personnalisé. Les éléments personnalisés sont abordés dans la section 15. Bien que cet élément personnalisé ne fait pas partie du fil d'Ariane. Vous pouvez inclure un élément sans rapport dans une <nav>, à condition que l'inclusion soit cohérente sur toutes les pages.

Page actuelle

Sur cette page, la page actuelle, "Navigation", n'est pas incluse dans le fil d'Ariane. Lorsque la page actuelle est incluse dans fil d'Ariane, il est préférable qu'il ne s'agisse pas d'un lien et que aria-current="page" doit être inclus dans le un élément de liste. Lorsqu'il n'est pas inclus, il est utile d'indiquer que le titre qui suit est la page actuelle avec un ou un autre symbole.

Si la conception change, une autre version du fil d'Ariane peut être utilisée:

<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>

Les fils d'Ariane ne sont pas destinés aux étapes linéaires. Par exemple, une liste du chemin que l'utilisateur a suivi pour accéder à la page active ou la liste des étapes suivies jusqu'à ce stade dans une recette peut être imbriquée dans un élément <nav>, mais ne doit pas être étiquetée en tant que fil d'Ariane.

Navigation locale

Cette page comporte un autre composant de navigation. Si vous utilisez un grand écran, une barre latérale apparaît à gauche, "Apprendre le HTML" un logo, une barre de recherche et des liens vers chacune des 20 sections du cours HTML de formation. Chaque lien contient le numéro du chapitre, le titre de la section et une coche à droite pour les sections que vous avez déjà consultées (peut-être celle-ci si vous avez quitté la page, puis y êtes revenu). Les liens vers toutes les sections de la formation HTML "Apprendre le HTML", ainsi que l'en-tête de recherche et l'en-tête local, constituent la navigation par position.

Si vous consultez ce site sur une tablette ou un appareil mobile, ou si vous avez un écran plus étroit, la barre latérale est masquée lorsque vous chargez cette page. Vous pouvez la rendre visible via le menu hamburger de la barre de navigation supérieure (oui, l'en-tête est un élément <web-header> personnalisé avec role="navigation" défini).

La principale différence entre la navigation locale permanente sur les écrans larges et la navigation locale sur les écrans plus étroits qui peut être faite pour apparaître et disparaître est l'affichage du bouton de fermeture sur la version qui peut être masqué. Cette icône est masquée sur les écrans larges avec display: none;.

Le lien vers ce document, section 010, a une apparence légèrement différente des autres liens dans la navigation locale pour indiquer aux personnes voyantes qu'il s'agit de la page actuelle. Cette différence visuelle est créée à l'aide de CSS. La page actuelle est également identifiée à l'aide de l'attribut aria-current="page". Cela informe les technologies d'assistance qu'il s'agit d'un lien vers la page actuelle. Le code HTML de cet élément de liste dans cette navigation locale est semblable à celui-ci:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

Si ce n'est pas la première fois que vous consultez cette page, la coche n'est pas visible. Si vous avez déjà consulté cette page, la L'attribut personnalisé data-complete est défini sur true, et la coche s'affiche. La coche est incluse. dans chaque lien. Toutefois, le CSS masque la case à cocher pour les utilisateurs qui n'ont jamais accédé à cette page auparavant avec display: none si l'attribut Attribut et valeur data-complete="true":

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

Lorsque display est défini sur une valeur autre que none, role informe la technologie d'assistance que le SVG intégré est une image, et aria-label agit comme l'attribut alt d'un <img>.

Navigation globale

La navigation globale est la section de navigation qui mène aux pages de premier niveau d'un site Web qui 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 redirigeant vers toutes les sous-sections d'un site ou d'autres menus. Il peut inclure des sections avec un titre, des boutons et des widgets de recherche. Ces fonctionnalités supplémentaires ne sont pas obligatoires. Vous devez impérativement la navigation apparaît sur chaque page et est la même sur chaque page ; avec aria-current="page" sur tous les liens vers la page actuelle, bien sûr.

La navigation globale permet de se déplacer de manière cohérente partout dans l'application ou sur le site Web. Google ne fournit pas d'informations en haut de la page. Campagne Yahoo! . Même si tous les comptes Yahoo! propriétés ont des styles différents, le contenu la plupart des sections sont identiques.

Le contenu des en-têtes de navigation globale des actualités et du sport est le même, mais l'icône indiquant que l'utilisateur est actuellement sur le sport n'offre pas un contraste suffisant pour être accessible ; même pour les visiteurs qui n’ont pas de déficience visuelle. Les deux sections ont une liste avec 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 similarité. Navigation globale permet la navigation vers toutes les parties du site du point de vue du produit. Les éléments de navigation d'un pied de page n'ont pas d'exigences spécifiques. Généralement, le pied de page comprend des liens professionnels, tels que des déclarations légales, sur l'entreprise et les carrières, et peut mener à des liens externes comme les icônes de réseaux sociaux.

Le pied de page de cette page contient trois éléments <nav> supplémentaires: une barre de navigation en pied de page, Google Developers, et les conditions d'utilisation et les règles. chacun étant un lien. La navigation en pied de page indique comment contribuer à web.dev sur GitHub, d'autres contenus éducatifs fournis par Google en dehors de web.dev et des instructions de connexion externes .

Ces trois navigations dans <footer> sont des éléments <nav> avec un aria-label qui fournit un nom accessible à ces rôles de point de repère. Toutes les navigations que nous avons vues correspondent à des liens imbriqués dans des listes au sein d'une barre de navigation. Nous avons vu tout ce que vous devez savoir pour créer vos propres navigations. Nous allons maintenant nous intéresser au balisage des tables de données.

Testez vos connaissances

Testez vos connaissances sur la navigation.