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 allez découvrir comment regrouper des listes de liens pour créer des éléments de navigation.
Il existe plusieurs types de navigation et plusieurs façons de les afficher. Les ancres nommées dans un texte redirigeant vers d'autres pages du même site Web sont considérées comme la navigation locale. La navigation locale qui consiste en une série de liens affichant la hiérarchie de la page actuelle par rapport à la structure du site, ou les 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 de 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 différentes manières, y compris les barres de navigation, les menus déroulants et les menus déroulants. Le 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 soit intuitive et simple. Cela dit, il n'y a pas d'exigences spécifiques pour les éléments de navigation. Le site MachineLearningWorkshop.com ne comporte qu'une seule page et dispose d'une barre de navigation locale en haut à droite. C'est là que les sites comportant 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 table des matières "sur cette page" après le titre et une table des matières "Apprendre le HTML" qui, en fonction de la largeur de votre écran, s'affiche toujours ou s'affiche d'un simple clic 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.
Lien "Accéder au contenu"
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 clique sur Enter, il fait défiler la page et sélectionne le contenu principal (un point de repère <main> avec un id défini sur 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. Il ne s'affiche que lorsqu'il est sélectionné:
Pour améliorer la facilité d'utilisation et l'accessibilité, il est important de permettre aux utilisateurs de contourner les blocs de contenu qui sont répétés sur chaque page.
Le lien d'ancrage est inclus. Ainsi, lorsqu'un utilisateur du clavier appuie sur tab lors du chargement, il peut accéder rapidement au contenu principal du site, ce qui évite d'avoir à parcourir des liens étendus. Sur cette page, le lien "Ignorer" ignore la navigation dans la barre latérale au niveau de la section et le fil d'Ariane. L'utilisateur est directement redirigé vers le titre de la page.
La plupart des concepteurs n'aiment pas l'apparence d'un lien en haut de la page. Il est possible de masquer le lien tout en gardant à l'esprit que lorsque le lien est sélectionné, ce qui se produit lorsqu'un utilisateur clique sur le lien à l'aide d'un clavier sur la page, ce lien doit être visible par tous les utilisateurs.
Ne masquez le contenu à l'état non sélectionné et inactif qu'à l'aide d'un sélecteur semblable à .visually-hidden:not(:focus):not(:active).
Le texte du lien indique "Passer à l'écran principal". Il s'agit du nom accessible du lien. Il s'agit d'un site technique, et les utilisateurs savent probablement ce que signifie « principal ».
Comme tout texte de lien, le nom accessible doit indiquer clairement où le lien redirige l'utilisateur. La cible du lien doit être le début du contenu principal de la page. Pour vérifier cela, lorsque la page se charge, appuyez sur la touche de tabulation pour accéder au lien "Passer à l'écran principal". Appuyez ensuite sur Enter pour vous assurer qu'il "passe" au contenu principal.
Sommaire
Le lien d'accès au contenu fait défiler le contenu principal pour l'afficher. Le premier élément est l'en-tête <h1> qui correspond au titre de cette section.
Dans le cas présent : <h1>Marking up navigation</h1>. Le titre principal est suivi du slogan, qui est une brève description du contenu de ce tutoriel. Le fait que la navigation dans la table des matières s'affiche avant ou après le titre dans le codebase dépend de la largeur de votre navigateur.
Si la largeur de votre navigateur est supérieure à 80 em, la table des matières apparaît avant l'en-tête du balisage. Elle se présente comme suit (les noms des classes 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 repère.
L'ajout 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 par rapport au texte visible sur la page, il est préférable d'utiliser aria-labelledby pour référencer le texte visible.
Nous pouvons remplacer l'élément <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 des services de traduction, contrairement aux valeurs d'attribut. Dans la mesure du possible, si un texte fournissant une étiquette adéquate est présent, privilégiez-le plutôt que le texte des attributs.
Cette navigation correspond à la table des matières. Si vous souhaitez utiliser aria-label, fournissez ces informations 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 pour 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". Cette information est incluse lorsque vous utilisez des éléments sémantiques.
Les liens eux-mêmes figurent dans une liste à puces. 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 d'éléments de liste (et donc de liens) constituent 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, le widget "Sur cette page" se trouve sous le titre et le slogan. Pour ce faire, vous pouvez inclure deux composants de navigation de table des matières et masquer 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 est un anti-modèle. Les octets supplémentaires sont négligeables. Il est approprié de masquer le contenu HTML à l'aide de CSS display: none. Le problème est que, sur les grands écrans, la table des matières est placée avant #main. Sur les écrans plus étroits, la table des matières est imbriquée dans #main. Si vous utilisez le clavier pour passer au contenu, vous ignorez la table des matières sur un grand écran. Bien que les utilisateurs soient habitués au contenu responsif et évolutif lorsqu'ils changent d'appareil ou augmentent la taille de leur police, ils ne s'attendent pas à ce que l'ordre des tabulations change lors de ces changements. 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 l'emplacement de la page actuelle dans la structure du site. Du point de vue de l'utilisateur, la structure du site peut différer de la structure de 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 naviguer dans votre contenu.
Les fils d'Ariane aident les utilisateurs à naviguer et à comprendre l'organisation de votre site, ce qui leur permet d'accéder rapidement à n'importe quelle section ancêtre sans avoir à revenir en arrière sur chaque page visitée précédemment pour accéder à la page actuelle à l'aide de la fonctionnalité back.
Si le site présente une structure de répertoires hiérarchique simple, comme c'est le cas avec web.dev, le fil d'Ariane sera souvent composé 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 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 entre la page actuelle et la page d'accueil, avec chaque niveau intermédiaire.
Chaque page du module d'apprentissage HTML comporte le même fil d'Ariane. Il affiche la hiérarchie des leçons HTML dans la section learn de web.dev. Le code est semblable au suivant, mais pour plus de clarté, les classes et les détails SVG ont été supprimés:
<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. Il utilise l'élément <nav>, un rôle de repère, de sorte que la technologie d'assistance présente le fil d'Ariane en tant qu'élément de navigation sur la page.
Le nom accessible de "fil d'Ariane", fourni avec aria-label, le différencie des autres points de repère de navigation du document actuel.
Des séparateurs de contenu générés par CSS sont insérés entre les liens. Les séparateurs sont placés 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 les "voiront" pas. Bonne pratique: les séparateurs entre les liens du fil d'Ariane doivent être masqués pour les lecteurs d'écran. Le contraste avec l'arrière-plan doit être suffisant, tout comme un texte ordinaire.
Cette version utilise une liste à puces et des éléments de liste. Il est préférable d'utiliser une liste numérotée, car ses éléments sont énumérés.
Il s'agit également d'une liste: role="list" a été rajouté, car certaines valeurs de propriété 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" plutôt que d'être le logo du site avec le nom du site comme libellé. Toutefois, comme le fil d'Ariane se trouve en haut du document et est la seule occurrence du logo sur la page, il est logique de comprendre 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 fasse pas partie du fil d'Ariane, il est acceptable d'inclure un élément sans rapport dans une <nav>, à condition qu'il soit inclus de manière 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 un fil d'Ariane, le texte ne doit de préférence pas être un lien, et aria-current="page" doit être inclus dans l'élément de liste de la page actuelle. Lorsqu'il n'est pas inclus, il est utile d'indiquer que l'en-tête qui suit correspond à la page actuelle avec une icône ou un autre symbole.
En cas de modification de la conception, 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, la liste du chemin suivi par l'utilisateur pour accéder à la page actuelle ou la liste des étapes suivies jusqu'ici dans une recette peuvent être imbriquées dans un élément <nav>, mais ne doivent pas être étiquetées en tant que fil d'Ariane.
Navigation locale
Cette page comporte un autre composant de navigation. Sur un écran large, une barre latérale s'affiche à gauche. Elle contient le logo "Learn HTML", une barre de recherche et des liens vers chacune des 20 sections de cette page. Chaque lien contient le numéro du chapitre, le titre de la section et une coche à droite des sections que vous avez déjà consultées (peut-être celle-ci si vous avez quitté la page et êtes revenu). Les liens vers toutes les sections du cours "Learn HTML", ainsi que la recherche et l'en-tête local, correspondent à la navigation vers les différentes adresses.
Si vous consultez ce site sur une tablette ou un appareil mobile, ou si vous disposez d'un écran plus étroit, la barre latérale est masquée au chargement de la page. Vous pouvez le 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 grands écrans et la navigation locale sur les écrans plus étroits qui peut apparaître et disparaître est l'affichage du bouton de fermeture sur la version qui peut être masquée. Cette icône est masquée sur les grands écrans 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 utilisateurs voyants qu'il s'agit de la page actuelle. Cette différence visuelle est créée avec le CSS. La page actuelle est également identifiée avec l'attribut aria-current="page". Cela permet de signaler aux 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 à ce qui suit:
<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 ne sera pas visible. Si vous avez déjà consulté cette page, l'attribut personnalisé data-complete est défini sur true et la coche s'affiche. La coche est incluse dans chaque lien, mais CSS la masque pour les utilisateurs qui n'ont jamais accédé à cette page avec display: none, en raison de l'absence de l'attribut et de la 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 du site Web, qui sont les mêmes sur toutes les pages.
La navigation globale d'un site peut également être constituée d'onglets qui ouvrent des listes imbriquées de liens renvoyant vers toutes les sous-sections d'un site ou d'autres menus.
Il peut inclure des sections intitulées, 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 toutes les pages, avec aria-current="page" sur tous les liens vers la page actuelle, bien sûr.
La navigation globale offre un moyen uniforme de se déplacer n'importe où dans l'application ou le site Web. Google n'a pas de navigation globale en haut de la page. Yahoo!. Bien que toutes les propriétés principales de 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 "Actualités" et "Sport" est le même, mais l'icône indiquant que l'utilisateur pratique actuellement le sport ne présente pas un contraste suffisant pour être accessible, même pour les visiteurs qui ne sont pas malvoyants. Les deux sections disposent d'une navigation globale avec une navigation locale spécifique à la section en dessous.
Comme pour les navigations globales, les pieds de page doivent être identiques sur toutes les pages. Mais c’est la seule similitude. La navigation globale permet de naviguer vers toutes les parties du site du point de vue du produit. Les éléments de navigation dans un pied de page n'ont pas d'exigences spécifiques. En règle générale, le pied de page inclura des liens vers l'entreprise, tels que des mentions légales, concernant l'entreprise et ses carrières, et peut conduire à des sources externes, telles que des icônes de réseaux sociaux.
Le pied de page de cette page contient trois éléments <nav> supplémentaires: le pied de page, les développeurs Google, et les conditions d'utilisation et les règles. Chacun est un lien. Le pied de page indique comment contribuer à web.dev sur GitHub, d'autres contenus éducatifs fournis par Google en dehors de web.dev et des liens externes "comment se connecter".
Ces trois navigations dans <footer> sont des éléments <nav> avec un aria-label fournissant un nom accessible pour ces rôles de point de repère.
Toutes les navigations que nous avons vues étaient des liens imbriqués dans des listes à l'intérieur d'une navigation. Nous avons vu tout ce que vous devez savoir pour créer vos propres navigations.
Nous verrons ensuite le balisage des tableaux de données.
Testez vos connaissances
Testez vos connaissances en matière de navigation.
Quel élément est utilisé pour baliser la navigation principale d'un site ?
<navigation><breadcrumb><nav>Une page peut-elle comporter plusieurs éléments de navigation ?