Barre de menu

Description

La navigation principale du site se présente sous forme de liens dans une barre de menu horizontale. Celle-ci facilite l’accès à tout moment aux principales options de navigation d’un site Web, peu importe leur emplacement sur celui-ci.

Avantages

• Prend en charge les mégamenus
• Est conforme à la norme WCAG 2.0 AA
• Améliore l’accessibilité grâce à l’utilisation de WAI-ARIA
• Adopte l’approche d’enrichissement d’images progressive
• Les principaux éléments de navigation peuvent montrer aux utilisateurs l’ensemble du contenu et des services qui sont accessibles à partir du site.
• Des éléments de navigation constamment visibles aident les utilisateurs à comprendre toute la portée du site et facilitent la navigation d’une section à une autre.
• Les utilisateurs ne se rendent pas nécessairement à la page d’accueil d’un site lors de leur première visite (par exemple, quand ils suivent un lien à partir d’une page de résultats d’un moteur de recherche). La première visite d’un utilisateur peut commencer sur une page profondément imbriquée dans le site. Pour cette raison, des éléments de navigation constamment visibles peuvent aider à orienter l’utilisateur.
• Une barre de menu horizontale convient bien aux éléments de navigation constamment visibles parce qu’elle prend très peu de la place qui peut autrement servir à présenter le contenu du site.

Utilisation recommandée

• Navigation principale d'une site Web
• Navigation horizontale

Quand l’utiliser

Ce menu doit être utilisé dans les sites Web du gouvernement du Canada.

Affichage

La barre de navigation horizontale se présente sous forme d’une seule rangée d’éléments, placée en haut de page, au-dessus du contenu du site. Le nom des éléments de navigation dans la barre de menu horizontale ne doivent pas s’étendre sur deux lignes.

Sur la page d’accueil, chaque élément dans la barre de navigation a la même apparence. On accole un triangle inversé aux éléments menant à des fonctionnalités de navigation secondaire, ce qui indique que lorsqu’un curseur plane au-dessus de l’élément, un autre menu sera activé.

Quand le curseur passe au-dessus d’un élément de navigation, celui-ci est souligné et la couleur d’arrière-plan change. Sur les pages autres que la page d’accueil, l’élément sélectionné est mis en évidence visuellement par la couleur d’arrière-plan.

Veuillez lire les spécifications techniques pour la barre de navigation horizontale prescrites par le Programme de coordination de l’image de marque.

Fonctionnement

L’article du menu pour l’article qui est actuellement actif n’est pas lié lorsqu’il est sélectionné. Ne liez pas l’article qui mènerait à la page sur laquelle l’utilisateur se trouve. Exception – si le menu de navigation horizontale est doté d’une navigation secondaire, celui-ci est déclenché même à partir de la page ciblée par l’article qui figure au menu.

Contenu

Les éléments du menu principal de navigation horizontale doivent décrire l’étendue de ce qui est offert sur le site. La barre horizontale peut contenir entre trois et douze éléments, en fonction de la longueur du nom de chacun. Les éléments de menu devraient être assortis de noms courts et clairs, qui décrivent efficacement l’ensemble de ce qui est offert dans la section.

La conception d’une architecture de l’information efficace est essentielle pour la mise en œuvre de menus de navigation efficaces. Les exercices d’essai de l’organisation de l’information comme le tri des cartes peuvent aider à choisir et à mettre à l’essai les noms accolés aux sections d’un site. Ces exercices doivent être effectués dans les deux langues officielles : un terme qui décrit une section dans une langue ne sera pas forcément la traduction littérale du terme utilisé dans l’autre langue. L’architecture de l’information proposée et le nom des éléments de navigation que celle-ci prévoit doivent faire l’objet d’essais de facilité d’emploi avant d’être mis en œuvre sur votre site. Parmi les éléments à vérifier, notons les plateformes et appareils divers, notamment les appareils mobiles et les interfaces tactiles.

Contrairement à ce qui se produit avec une barre de navigation verticale, l’utilisateur doit pouvoir voir toute la barre de navigation horizontale en tout temps (puisque l’utilisateur ne s’attendra pas à devoir défiler vers la droite). Contrairement à ce qui se produit avec une barre de navigation verticale, une barre de navigation horizontale n’est pas facilement en mesure de prendre de l’expansion si d’autres éléments de menu sont requis. Pour cette raison, veuillez choisir attentivement quels éléments devraient figurer dans le menu.

Planifier simultanément une version de la barre de navigation horizontale dans chaque langue officielle, pour éviter de rencontrer des problèmes parce que les traductions sont plus longues que prévu.

Tous les éléments du menu doivent mener vers une page du site. La barre de menu horizontale ne devrait pas contenir d’hyperliens vers des pages à l’extérieur du site en question.

Références

• Gube, Jacon. Module Tabs in Web Design: Best Practices and Solutions. Smashing Magazine, June 24, 2009. Mon. 21 Nov. 2011.
• Lazaris, Louis. The Case Against Vertical Navigation. Smashing Magazine, Jan. 11, 2010. Mon. 21 Nov. 2011.
• Horizontal Navigation Menus: Trends, Patterns and Best Practices. Smashing Magazine, Sept. 7, 2009. Mon. 21 Nov. 2011.
• Outing, Steve and Laura Ruel. The Best Eyetrack III: What We Saw When We Looked Through Their Eyes. Eyetrack !!!, 2004. Mon. 21 Nov. 2011.
• Ross, Tom. Tabbed Navigation — How To Do It Right. PSDFan.com, Oct. 13, 2010. Mon. 21 Nov. 2011.
• van Welie, Martijn. Double Tab Navigation. Welie.com, 2008. Mon. 21 Nov. 2011.
• Main Navigation. Welie.com, 2008. Mon. 21 Nov. 2011.
• Wroblewski, Luke. The History of Amazon’s Tab Navigation. Lukew.com, May 7, 2005. Mon. 21 Nov. 2011.
• Yahoo! Inc. Navigation Tabs. Yahoo! Developer Network, July 15, 2009. Mon. 21 Nov. 2011.