Navigation

Critère 12.1Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?

Ce que ça vérifie — Chaque ensemble de pages doit proposer au moins deux moyens différents pour accéder à ses pages, par exemple un menu de navigation et un moteur de recherche, ou un menu et un plan du site. Cela permet à chacun de naviguer selon ses préférences ou ses capacités.

Comment corriger — Mettez en place au moins deux des trois systèmes suivants : un menu de navigation principal, un moteur de recherche, une page « plan du site ». Balisez le menu avec <nav> et exposez le moteur de recherche avec role="search".

<!-- Système 1 : menu -->
<nav aria-label="Menu principal">…</nav>
<!-- Système 2 : recherche -->
<form role="search" action="/recherche">
  <label for="q">Rechercher</label>
  <input type="search" id="q" name="q" />
</form>

Critère 12.2Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?

Ce que ça vérifie — Le menu et les barres de navigation présents sur plusieurs pages doivent toujours apparaître au même endroit et dans le même ordre. Cette stabilité aide notamment les personnes malvoyantes ou ayant des troubles cognitifs à se repérer.

Comment corriger — Positionnez les blocs de navigation de manière identique d'une page à l'autre grâce à un gabarit (template) commun. Conservez le même ordre des éléments et la même présentation visuelle.

Critère 12.3La page « plan du site » est-elle pertinente ?

Ce que ça vérifie — Lorsqu'une page « plan du site » existe, elle doit refléter fidèlement l'organisation du site et donner accès à ses principales rubriques. Elle offre une vue d'ensemble utile pour se repérer et atteindre rapidement un contenu.

Comment corriger — Structurez le plan du site sous forme de listes de liens hiérarchisées reprenant l'arborescence réelle des rubriques. Vérifiez que les liens sont valides et couvrent l'ensemble des sections importantes.

<h1>Plan du site</h1>
<ul>
  <li><a href="/services">Nos services</a>
    <ul>
      <li><a href="/services/audit">Audit RGAA</a></li>
      <li><a href="/services/formation">Formation</a></li>
    </ul>
  </li>
  <li><a href="/contact">Contact</a></li>
</ul>

Critère 12.4Dans chaque ensemble de pages, la page « plan du site » est-elle accessible à partir d’une fonctionnalité identique ?

Ce que ça vérifie — Si une page « plan du site » existe, le lien qui y mène doit se trouver au même endroit et sous la même forme sur tout l'ensemble de pages. L'utilisateur retrouve ainsi ce point d'accès sans avoir à le chercher.

Comment corriger — Placez le lien vers le plan du site à un emplacement constant, généralement dans le pied de page, et intégrez-le au gabarit commun. Utilisez systématiquement le même intitulé.

<footer>
  <a href="/plan-du-site">Plan du site</a>
</footer>

Critère 12.5Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ?

Ce que ça vérifie — Si un moteur de recherche est présent sur plusieurs pages, il doit être atteignable de façon identique partout : même emplacement, même présentation, même fonctionnement. La recherche devient ainsi un repère fiable.

Comment corriger — Intégrez le formulaire de recherche au gabarit commun pour qu'il apparaisse au même endroit sur chaque page. Identifiez-le avec role="search" et un champ correctement étiqueté.

<form role="search" action="/recherche" method="get">
  <label for="q">Rechercher sur le site</label>
  <input type="search" id="q" name="q" />
  <button type="submit">Rechercher</button>
</form>

Critère 12.6Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?

Ce que ça vérifie — Les grandes zones de la page (en-tête, navigation, contenu principal, pied de page, recherche) doivent être identifiées par des repères (landmarks) afin que les technologies d'assistance permettent de les atteindre ou de les éviter directement. Cela accélère grandement la navigation au lecteur d'écran.

Comment corriger — Utilisez les éléments HTML5 <header>, <nav>, <main> et <footer>, et ajoutez role="search" sur le formulaire de recherche. Veillez à ce que chaque zone significative soit couverte par un repère unique et bien positionné.

<header>…</header>
<nav aria-label="Menu principal">…</nav>
<form role="search">…</form>
<main id="main">…</main>
<footer>…</footer>

Critère 12.7Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ?

Ce que ça vérifie — Un lien d'évitement (ou d'accès rapide) permet d'atteindre directement le contenu principal en sautant les zones répétées comme l'en-tête et le menu. Il est indispensable aux utilisateurs du clavier et des lecteurs d'écran pour ne pas parcourir les mêmes éléments sur chaque page.

Comment corriger — Placez en tout premier dans la page un lien pointant vers l'ancre du contenu principal (par exemple #main), et assurez-vous qu'il devienne visible à la prise de focus. La cible doit correspondre à l'élément <main> ou à son identifiant.

<body>
  <a class="lien-evitement" href="#main">Aller au contenu</a>
  <header>…</header>
  <main id="main" tabindex="-1">…</main>

<!-- CSS : visible au focus -->
<style>
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 0; }
</style>

Critère 12.8Dans chaque page web, l’ordre de tabulation est-il cohérent ?

Ce que ça vérifie — L'ordre de parcours au clavier (tabulation) doit suivre un enchaînement logique et cohérent avec la lecture visuelle et le sens du contenu. Un ordre désordonné désoriente les personnes naviguant sans souris.

Comment corriger — Faites correspondre l'ordre du DOM à l'ordre de lecture attendu et évitez les valeurs de tabindex positives qui perturbent la séquence naturelle. Réservez tabindex="0" pour rendre focusable un élément interactif personnalisé.

<!-- À éviter : ordre forcé et fragile -->
<input tabindex="3" />
<input tabindex="1" />

<!-- Recommandé : ordre naturel du DOM -->
<input />
<input />

Critère 12.9Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?

Ce que ça vérifie — La navigation au clavier ne doit jamais enfermer l'utilisateur : depuis n'importe quel composant, il doit pouvoir continuer sa progression et en sortir avec les touches habituelles. Un piège au clavier bloque totalement les personnes qui n'utilisent pas la souris.

Comment corriger — Vérifiez que le focus peut entrer et sortir de chaque composant (notamment fenêtres modales, widgets et lecteurs multimédias) avec Tab et Échap. Pour une modale, gérez le focus de façon à le libérer à la fermeture plutôt que de le confiner définitivement.

<!-- La modale doit se fermer et rendre le focus -->
<div role="dialog" aria-modal="true" aria-label="Détails">
  <button type="button" aria-label="Fermer">×</button>
  <!-- Échap ferme et renvoie le focus au déclencheur -->
</div>

Critère 12.10Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ?

Ce que ça vérifie — Un raccourci clavier activé par une seule touche (lettre, chiffre, ponctuation ou symbole) peut se déclencher par erreur, notamment via la reconnaissance vocale. L'utilisateur doit pouvoir le désactiver, le remapper ou en limiter l'action au focus.

Comment corriger — Offrez un moyen de désactiver ces raccourcis, de les reconfigurer, ou combinez-les avec une touche modificatrice (Ctrl, Alt). À défaut, ne les activez que lorsque le composant concerné a le focus.

<!-- À éviter : « s » déclenche la recherche partout -->
<!-- Recommandé : exiger un modificateur ou permettre la désactivation -->
<label>
  <input type="checkbox" id="raccourcis" /> Activer les raccourcis clavier
</label>

Critère 12.11Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?

Ce que ça vérifie — Les contenus additionnels qui apparaissent au survol, à la prise de focus ou à l'activation (infobulles, sous-menus, aides contextuelles) doivent pouvoir être atteints et utilisés au clavier lorsqu'ils sont nécessaires. Sans cela, les utilisateurs du clavier n'accèdent pas à ces informations.

Comment corriger — Déclenchez ces contenus aussi bien au focus qu'au survol et rendez leur contenu navigable au clavier. Associez-les à leur élément déclencheur avec aria-describedby ou aria-expanded selon le cas, et laissez-les affichés tant que le focus s'y trouve.

<button aria-describedby="aide-mdp">Mot de passe</button>
<span id="aide-mdp" role="tooltip">8 caractères minimum, dont un chiffre</span>