Quiz : Navigation et liens

Diagnostique un vrai extrait PulsaConf : La navigation n'a pas de nom, contient un lien vague et un lien externe sans rel.

Objectifs de la leçon

  • Écrire un lien dont la destination ou l'action reste claire hors contexte.
  • Vérifier la relation entre href, cible et état courant.
  • Contrôler le parcours au clavier et les changements de contexte.

Rendre chaque destination prévisible

Un lien est une promesse de destination ou d'action. Son texte, son URL et son état doivent permettre de savoir ce qui va se passer avant de l'activer.

« Quiz : Navigation et liens » sert ici à rendre les décisions de « Navigation et liens » explicite dans le document.

Décision de navigation

Utilise un lien pour changer de ressource ou de position, un bouton pour déclencher une action, et conserve des libellés explicites hors de leur contexte visuel.

Évite de traiter les décisions de « Navigation et liens » comme un simple détail visuel : le choix doit rester compréhensible dans le DOM et justifiable en revue de code.

Parcours clavier et destinations

Parcours tous les liens au clavier, vérifie chaque cible et relis leur texte isolément. Aucun libellé ne doit dépendre de « ici », d'une icône seule ou d'une destination factice.

Pour html-03-navigation-quiz, commence par le premier test en échec et relie son message à l'élément, l'attribut ou la relation concernée.

Vocabulaire lié

  • nav — Région regroupant des liens de navigation importants.
  • fragment — Partie d'URL commençant par # et visant un id unique.
  • aria-current — Attribut indiquant la page, position ou étape courante.
  • rel — Relation et politique associées à un lien.
  • mailto/tel — Protocoles ouvrant une action email ou téléphone.

Validation

  • Je sais expliquer pourquoi les décisions de « Navigation et liens » améliore PulsaConf.
  • Je peux relier chaque test à une exigence utilisateur.
  • Je garde une structure compréhensible sans style CSS.

Ouvrir la leçon interactive