Barre de navigation

Mots-clés

• Navigation : Un cadre permettant aux utilisateurs de se déplacer à travers un site web.
• Menu : Comprend les options ou actions que les utilisateurs peuvent sélectionner.
• Élément de menu parent : Représente un élément principal dans le menu sous lequel se trouvent des sous-éléments, appelés éléments enfants. Ces éléments peuvent également être considérés comme des éléments de menu de niveau supérieur.
• Sous-menu : Un ensemble d'éléments de navigation secondaires affichés lorsqu'un utilisateur interagit avec un élément de menu parent.
• Liste : Un élément qui organise des articles ou des valeurs dans une séquence ordonnée (numérotée) ou non ordonnée (avec des puces).
• Lien : Permet aux utilisateurs de passer d'un endroit à un autre, soit au sein de la même page web, soit entre différentes pages.

Détail des composants

Navigation

Identifie une partie de la page comme un repère de navigation. Il existe différents types de navigation (principale, secondaire, fil d'Ariane, latérale), la barre de navigation servant de navigation principale d'un site web.

1. Identifiez le menu à l'intérieur, idéalement en utilisant la balise HTML5 <nav> pour permettre aux utilisateurs d'accéder directement au menu.
2. Étiquetez les menus pour les rendre plus faciles à comprendre. Utilisez des étiquettes simples et descriptives pour permettre aux utilisateurs de différencier les différentes navigations. Utilisez l'attribut aria-label pour étiqueter une navigation, par exemple aria-label="Navigation principale".

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

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

Menu

1. Définissez la structure du menu sous forme de liste. Ce détail structurel permet aux outils d'assistance d'annoncer le nombre d'éléments et de faciliter la navigation.
2. Utilisez la balise de lien <a> pour définir chaque élément du menu, chacun dirigeant vers une destination spécifique, qu'il s'agisse d'une section de la page ou d'une nouvelle page.
3. Utilisez un marquage pour indiquer l'élément de menu actuel, comme la page web en cours sur un site, afin d'améliorer la navigation dans le menu. Cette indication doit être accessible à la fois aux utilisateurs visuels et aux technologies d'assistance.

<ul>
    <li><a href="javascript:void(0);" aria-current="page" class="active">Accueil</a></li>
    <li><a href="javascript:void(0);">Produits</a></li>
    <li><a href="javascript:void(0);">A propos</a></li>
    <li><a href="javascript:void(0);">Contact</a></li>
</ul>

<ul>
    <li><a href="javascript:void(0);" aria-current="page" class="active">Accueil</a></li>
    <li><a href="javascript:void(0);">Produits</a></li>
    <li><a href="javascript:void(0);">A propos</a></li>
    <li><a href="javascript:void(0);">Contact</a></li>
</ul>

Sous-menu

Les sous-menus apparaissent sous forme de listes déroulantes, offrant un aperçu de la structure des pages d'un site web. Cela évite aux utilisateurs de naviguer jusqu'à la page parente pour saisir la structure de ses pages enfants.

1. Spécifiez les sous-menus avec des indices visuels et des attributs d'accessibilité pour désigner les éléments de navigation ayant des sous-menus.
   • Un indice visuel, tel qu'une icône de chevron vers le bas, peut mettre en évidence la présence de sous-menus.
   • Utilisez les attributs WAI-ARIA aria-haspopup="true" et aria-expanded="false" pour indiquer qu'un sous-menu est présent et replié. Modifier la valeur de cet attribut à aria-expanded="true" indiquera que le sous-menu est ouvert.
2. Le sous-menu doit fonctionner à la fois avec la souris et le clavier.

<li class="has-submenu">
    <a href="javascript:void(0);" aria-haspopup="true" aria-expanded="false">
        Produits
    </a>
    <ul>
        <li><a href="javascript:void(0);">Produit 1</a></li>
        <li><a href="javascript:void(0);">Produit 2</a></li>
    </ul>
</li>

<li class="has-submenu">
    <a href="javascript:void(0);" aria-haspopup="true" aria-expanded="false">
        Produits
    </a>
    <ul>
        <li><a href="javascript:void(0);">Produit 1</a></li>
        <li><a href="javascript:void(0);">Produit 2</a></li>
    </ul>
</li>

Interagir avec les sous-menus

Les sous-menus doivent rester fermés lors de la navigation dans le menu à l'aide de la touche Tab. Cela empêche les utilisateurs au clavier de devoir naviguer à travers tous les éléments du sous-menu pour atteindre l'élément suivant de niveau supérieur. En revanche, envisagez les approches suivantes :

1. Utiliser l'élément de menu parent comme bascule :
   • Cette méthode est adaptée lorsque l'élément de menu parent sert simplement à donner un aperçu du sous-menu et n'effectue pas d'action, comme un lien vers une page web.
2. Utiliser un bouton comme bascule :
   • Lorsque l'élément de menu parent est un lien vers une page web, vous pouvez ajouter un bouton séparé à l'élément parent. Ce bouton peut servir à ouvrir et fermer le sous-menu.