Takeaways clés

• L'élément NAV HTML5, qui représente un groupe de liens de navigation, est un outil important pour améliorer l'accessibilité du site Web, car il permet aux lecteurs d'écran de sauter la navigation du site, améliorant l'expérience utilisateur pour ceux qui ont des déficiences visuelles.
• L'élément NAV peut être utilisé plusieurs fois sur une seule page, pour les barres de navigation primaires et les liens secondaires, et bien qu'il ne soit pas obligatoire pour tous les liens de navigation, il est recommandé pour les principaux blocs de navigation pour améliorer l'accessibilité du site et le référencement.
• Bien que les lecteurs d'écran actuels puissent ne pas reconnaître l'élément NAV, son utilisation est encouragée alors que la technologie d'assistance continue d'évoluer, garantissant que les sites Web restent accessibles à l'avenir.

Il est sûr de supposer que cet élément apparaîtra dans pratiquement tous les projets. NAV représente exactement ce que cela implique: un groupe de liens de navigation. Bien que l'utilisation la plus courante pour le NAV soit pour envelopper une liste de liens non ordonnée, il existe d'autres options. Vous pouvez également envelopper l'élément NAV autour d'un paragraphe de texte qui contenait les principaux liens de navigation pour une page ou une section d'une page. Dans les deux cas, l'élément NAV doit être réservé à la navigation qui est d'une importance primordiale. Il est donc recommandé d'éviter d'utiliser NAV pour une brève liste de liens dans un pied de page, par exemple.

nav et accessibilité

Un modèle de conception que vous avez peut-être vu implémenté sur de nombreux sites est le lien «Skip Navigation». L'idée est de permettre aux utilisateurs de lecteurs d'écran de passer rapidement au-delà de la navigation principale de votre site s'ils l'ont déjà entendu - après tout, il est inutile d'écouter le menu de navigation entier d'un grand site chaque fois que vous cliquez sur une nouvelle page! L'élément NAV a le potentiel d'éliminer ce besoin; Si un lecteur d'écran voit une navigation Élément, il pourrait permettre à ses utilisateurs de sauter la navigation sans nécessiter de lien supplémentaire. La spécification indique: Les agents des utilisateurs (tels que les lecteurs d'écran) ciblant les utilisateurs qui peuvent bénéficier des informations de navigation omises dans le rendu initial, ou qui peuvent bénéficier des informations de navigation immédiatement disponibles, peuvent utiliser cet élément comme moyen de déterminer le contenu de la page pour sauter et / ou fournir initialement sur demande. Les lecteurs d'écran actuels ne reconnaissent pas le NAV, mais cela ne signifie pas que vous ne devez pas l'utiliser. La technologie d'assistance continuera d'évoluer, et il est probable que votre page sera sur le Web jusqu'à l'avenir. En s'appuyant maintenant sur les normes, vous vous assurez que lorsque les lecteurs d'écran s'améliorent, votre page deviendra plus accessible au fil du temps.

Qu'est-ce qu'un agent utilisateur?

Vous rencontrerez beaucoup le terme agent utilisateur lorsque vous parcourez les spécifications. Vraiment, c'est juste un terme sophistiqué pour un navigateur - un «agent» logiciel qu'un utilisateur utilise pour accéder au contenu d'une page. La raison pour laquelle les spécifications ne disent pas simplement «navigateur» est que les agents des utilisateurs peuvent inclure des lecteurs d'écran ou tout autre moyen technologique pour lire une page Web. Vous pouvez utiliser NAV plus d'une fois sur une page donnée. Si vous avez une barre de navigation principale pour le site, cela nécessiterait un élément NAV. De plus, si vous aviez un ensemble secondaire de liens pointant vers différentes parties de la page actuelle (en utilisant des ancres en page), cela pourrait également être enveloppé dans un élément NAV. Comme pour la section, il y a eu un débat sur ce qui constitue une utilisation acceptable de la NAV et pourquoi il n'est pas recommandé dans certaines circonstances (comme à l'intérieur d'un pied de page). Certains développeurs pensent que cet élément convient aux liens de pagination ou de chapelure, ou pour un formulaire de recherche qui constitue un moyen principal de naviguer sur un site (comme c'est le cas sur Google). Cette décision dépendra finalement de vous, le développeur. Ian Hickson, l'éditeur principal de la spécification HTML5 de Whatwg, a répondu directement à la question: «Utilisez-le chaque fois que vous auriez utilisé la classe = nav». [Voir commentaire] Ceci est un extrait de HTML5 & CSS3 pour le monde réel, par Alexis Goldstein, Louis Lazaris & Estelle Weyl.

Vous cherchez plus de tutoriels?

Si vous souhaitez en savoir plus sur l'élément HTML5 NAV, SitePoint propose une vaste gamme de didacticiels en ligne sur les menus HTML5 NAV. Construire une barre de navigation interactive par Laura Athanasiou «Une structure de navigation simple peut augmenter la convivialité de votre site et rendre les informations faciles à trouver. En utilisant HTML et CSS de base, vous pouvez créer une barre de navigation horizontale qui fournit une interaction lorsqu'un utilisateur plane sur un lien de navigation.» Créer un menu de navigation déroulant animé dans HTML5 / CSS3 et WebKit par Jean-Pierre Gassin "Ceci est un tutoriel pour les développeurs HTML5 et CSS3 pour débutants et intermédiaires qui ne veulent pas créer un menu déroulant. Créez un site Web réactif et adapté aux mobiles à partir de zéro: SEMANTIC HTML par Annarita Tranfici «D'abord et avant tout, créons un menu classique. Dans ce cas, l'élément le plus adapté à notre objectif est l'élément NAV, qui est un élément sémantique utilisé pour déclarer une section de navigation d'un site Web.» La navigation doit-elle être définie dans les listes? Par Craig Buckler «La question: les éléments de la liste sont-ils nécessaires?» Comment construire un menu coulissant CSS3 par Craig Buckler "Dans cet article, nous allons construire un menu de glissement en utilisant CSS seul. Si vous utilisez un navigateur moderne, il montrera également un bel effet de page 3D."

Questions fréquemment posées sur l'élément de navigation html5

Quel est le but de l'élément HTML5 NAV?

L'élément NAV HTML5 est utilisé pour définir une section d'une page qui contient des liens de navigation. Ces liens peuvent être internes, conduisant à différentes sections de la même page, soit externe, conduisant à différentes pages. L'élément NAV aide à améliorer l'accessibilité de votre site Web, ce qui permet aux utilisateurs de naviguer plus facilement dans votre contenu.

Comment utiliser l'élément HTML5 NAV?

Pour utiliser l'élément HTML5 NAV, vous avez simplement besoin d'envelopper vos liens de navigation dans les bornes

. Par exemple:

section 1
section 2
nav>
Ce code créera une barre de navigation avec les liens vers la section 1 et la section 2 de votre page. page?

Oui, vous pouvez utiliser plusieurs éléments de navigation sur une seule page. Chaque élément NAV doit contenir un ensemble unique de liens de navigation. Cela peut être utile pour créer des barres de navigation distinctes pour différentes sections de votre page.

est-il nécessaire d'utiliser l'élément NAV pour tous les liens de navigation?

Bien qu'il ne soit pas nécessaire d'utiliser l'élément NAV pour tous les liens de navigation, il est recommandé de l'utiliser pour les principaux blocs de navigation. En effet, l'élément NAV aide à améliorer l'accessibilité de votre site Web, ce qui facilite la navigation sur votre contenu.

Par exemple, vous pouvez nicher un élément NAV dans un élément d'en-tête pour créer une barre de navigation en haut de votre page.

Comment l'élément NAV affecte-t-il le référencement?

L'élément NAV peut améliorer le référencement de votre site Web en facilitant les moteurs de recherche pour comprendre la structure de votre page. En utilisant l'élément NAV pour définir vos liens de navigation, vous pouvez aider les moteurs de recherche à comprendre la relation entre les différentes pages ou sections de votre page.

Puis-je styliser l'élément NAV avec CSS?

Oui, vous pouvez styliser l'élément NAV avec CSS. Vous pouvez appliquer toutes les propriétés CSS à l'élément NAV, comme tout autre élément HTML. Par exemple, vous pouvez modifier la couleur d'arrière-plan, la taille de la police et la marge de votre barre de navigation.

Quelle est la différence entre l'élément NAV et l'élément de menu?

L'élément NAV est utilisé pour définir une section d'une page qui contient des liens de navigation, tandis que l'élément de menu est utilisé pour créer un menu de commandes. Bien que les deux éléments puissent être utilisés pour la navigation, l'élément NAV est plus adapté aux principaux blocs de navigation, tandis que l'élément de menu est plus adapté aux menus contextuels.

Cependant, vous pouvez utiliser un polyfill pour ajouter la prise en charge de l'élément NAV dans les anciens navigateurs.

Que se passe-t-il si je n'utilise pas l'élément NAV pour mes liens de navigation?

Si vous n'utilisez pas l'élément NAV pour vos liens de navigation, votre site Web fonctionnera toujours, mais qu'il peut être plus difficile pour les utilisateurs et les moteurs de recherche pour naviguer grâce à votre contenu. L'élément NAV aide à améliorer l'accessibilité et le référencement de votre site Web, il est donc recommandé de l'utiliser pour les principaux blocs de navigation.