À propos de la navigation
Informations générales à savoir sur les systèmes de navigation
Ce qu’il faut retenir
Apparence et positionnement
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).
Système de navigation multiple
Pour un site qui comporte plusieurs pages différentes qui ne sont pas toutes atteignables depuis la page d’accueil, 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.
Cas où plusieurs systèmes de navigation ne sont pas nécessaires
- Lorsque le site web est constitué d’une seule page ou d’un nombre très limité de pages (c’est à dire quand l’ensemble des pages du site sont atteignables depuis la page d’accueil - la navigation du site ne propose pas de « sous-menu ») ;
- Lorsque les pages d’un ensemble de pages sont le résultat ou une partie d’un processus (un processus de paiement ou de prise de commande, par exemple).
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 nav
ne 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.
Règles d’accessibilité à vérifier sur la navigation
- 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;
}