Apprends à construire des menus de navigation sémantiques, des fils d'Ariane, des liens d'accès rapide au contenu et de la pagination en utilisant une structure HTML appropriée et des attributs ARIA.
L'élément <nav> représente une section de liens de navigation. Tous les groupes de liens n'ont pas besoin d'un <nav> — réserve-le aux blocs de navigation majeurs comme le menu du site, la navigation latérale ou les fils d'Ariane.
Quand une page contient plusieurs éléments <nav>, donne à chacun un aria-label pour que les technologies d'assistance puissent les distinguer :
<nav aria-label="Primary">
<!-- Main site navigation -->
</nav>
<nav aria-label="Breadcrumb">
<!-- Breadcrumb trail -->
</nav>Les utilisateurs de lecteurs d'écran peuvent accéder directement aux points de repère de navigation, donc les étiqueter est important.
Un menu horizontal ou vertical, généralement dans l'en-tête. Utilise une liste non ordonnée à l'intérieur de <nav> :
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>Un chemin montrant la position de l'utilisateur dans la hiérarchie du site. Utilise une liste ordonnée (puisque l'ordre compte) avec aria-label="Breadcrumb" sur le nav et aria-current="page" sur le dernier élément :
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/courses/html" aria-current="page">HTML</a></li>
</ol>
</nav>Placé comme tout premier élément dans <body>, il permet aux utilisateurs de clavier de sauter la navigation pour accéder directement au contenu principal. Il est visuellement caché jusqu'à ce qu'il reçoive le focus :
<a href="#main" class="skip-link">Skip to main content</a>Les liens de pagination permettent aux utilisateurs de naviguer à travers un contenu sur plusieurs pages. Enveloppe-les dans un <nav> avec aria-label="Pagination" :
<nav aria-label="Pagination">
<ul>
<li><a href="?page=1" aria-label="Page 1">1</a></li>
<li><a href="?page=2" aria-current="page" aria-label="Page 2, current">2</a></li>
<li><a href="?page=3" aria-label="Page 3">3</a></li>
<li><a href="?page=3" aria-label="Next page">Next »</a></li>
</ul>
</nav>Détails clés pour l'accessibilité :
aria-current="page" marque la page actuelle.aria-label sur chaque lien fournit du contexte ("Page 2" au lieu de juste "2").<!-- Skip link (first element in body) -->
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<!-- Primary navigation -->
<nav aria-label="Primary">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a aria-current="page" href="/courses/html">HTML</a></li>
</ol>
</nav>
<main id="main">
<h1>HTML Course</h1>
<p>Welcome to the HTML course.</p>
</main>Pourquoi devrais-tu ajouter aria-label aux éléments <nav> quand une page contient plusieurs navigations ?