Deux navigations — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 7)

Deux navigations

HTML sémantique · niveau 2

Énoncé

La fiche du « Petit Prince » a un menu principal (Accueil, Catalogue, Contact — on est dans le catalogue) et un fil d'Ariane (Accueil › Catalogue › Le Petit Prince). Écrire la page de façon que le lecteur d'écran distingue les deux navigations et sache quelle rubrique du menu est active.

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Fiche — Le Petit Prince</title>
</head>
<body>
  <header>
    <p>La Librairie du Campus</p>
    <nav aria-label="Navigation principale">
      <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="catalogue.html" aria-current="page">Catalogue</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <nav aria-label="Fil d'Ariane">
    <ol>
      <li><a href="index.html">Accueil</a></li>
      <li><a href="catalogue.html">Catalogue</a></li>
      <li>Le Petit Prince</li>
    </ol>
  </nav>
  <main>
    <h1>Le Petit Prince</h1>
    <p>Saint-Exupéry — 8,50 €</p>
  </main>
</body>
</html>

Les deux <nav> ont chacun un aria-label différent ; le lecteur d'écran annonce « navigation, Navigation principale » et « navigation, Fil d'Ariane ». Le fil d'Ariane est une liste ordonnée (l'ordre des niveaux compte), et sa dernière étape — la page courante — n'est pas un lien. Dans le menu, aria-current="page" signale la rubrique active.