À propos de la navigation

Informations générales à savoir sur les systèmes de navigation

Ce qu’il faut retenir

Pour un site qui comporte plus de 5 pages différentes, il faut veiller à prévoir au moins 2 systèmes de navigation parmi :

Un menu de navigation et un plan du site
Un menu de navigation et un moteur de recherche

L’apparence et le positionnement du menu principal doit être cohérent sur toutes les pages du site (le menu est placé au même endroit sur toutes les pages, le visuel est identique).

Ordre de tabulation

Naviguez dans la page au clavier et assurez-vous que :

L’ordre de tabulation est cohérent
la page ne comporte pas de piège au clavier (vérifiez les composants d’interface riche tels que les fenêtres modales)
le focus est bien visible
les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont contrôlables par l’utilisateur.

Différencier visuellement la position courante

Dans un menu de navigation principale ou secondaire, il faut veiller à indiquer la position courante pas uniquement par la couleur mais aussi par une autre mise en forme telle que : une mise en gras, une taille de police différente pour l’item actif, de l’italique…

Sémantique HTML

Dans quel cas utiliser l’élément HTML `nav` ?

Les menus de navigation seront implémentés avec l’élément HTML nav auquel on pourra rajouter l’attribut aria role : <nav role="navigation">...</nav>.
À cette balise on posera aussi un attribut aria-label pour préciser de quel type de navigation il s’agit. Exemple :

pour le menu de navigation principal du site :

<nav role="navigation" aria-label="Navigation principale">...</nav>

pour un menu de navigation secondaire ou contextuel :

<nav role="navigation" aria-label="Navigation secondaire">...</nav>

pour un fil d’ariane :

<nav role="navigation" aria-label="Vous êtes ici : ">...</nav>

pour un processus par étapes :

<nav role="navigation" aria-label="Étapes de la démarche">...</nav>

Dans quel cas ne pas utiliser l’élément HTML `nav` ?

Tous les groupes de liens d’une page n’ont pas besoin d’être dans un élément de navigation l’élément est principalement destiné aux sections constituées de blocs de navigation majeurs. En particulier, il est courant que les pieds de page contiennent une courte liste de liens vers diverses pages d’un site, telles que les conditions d’utilisation, la page d’accueil et une page de copyright. L’élément de pied de page suffit à lui seul dans de tels cas : bien qu’un élément de navigation puisse être utilisé dans de tels cas, il est généralement inutile.

L’élément navne sera donc pas utilisé :

Pour présenter les liens inscrits dans la zone de pied de page footer
Pour présenter une collection de liens pointant vers d’autres sites.

Chaque lien dont la nature de lien n’est pas évidente (typiquement, on a supprimé le soulignement qui identifie nativement le lien) est bien visible et distinct du texte environnant.
La prise de focus doit être bien visible :
Pour cela, déplacez-vous dans la page uniquement à l’aide du clavier (touche “tabulation”). Si vous ne savez pas où se trouve votre curseur, c’est que cette règle n’est pas respectée. Ajoutez alors un style spécifique pour l’état “focus” dans votre feuille de style.
Exemple :

:focus {
    outline: 3px solid purple;
}