plusieurs balises <nav>

97

Pouvons-nous utiliser plusieurs balises sur la même page en html5?

J'ai lu cet article sur Zeldman.com mais ce n'est pas tout à fait clair pour moi

c'est à dire

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>
html stephenmurdoch
la source
1
Role = 'main' sert à identifier le contenu principal de votre site w3.org/TR/wai-aria/roles#main , et il n'y a pas de rôle pour blogroll. Je pense que vous voulez utiliser des microdonnées - schema.org .
Andrew Luhring

Réponses:

142

Oui absolument. Vous pouvez avoir plusieurs header, navet footerpeine sans balises.

Tant que vous vous assurez que vous utilisez des balises sémantiquement et que vous ne les placez pas dans des endroits non valides (ce sont des éléments de niveau bloc, vous ne pouvez donc pas les mettre dans un élément en ligne, par exemple) alors vous ne devriez pas ne vous inquiétez pas trop de ce que disent les sticklers. Il est trop facile de se faire prendre à discuter de petits détails au lieu d'avancer sur votre projet.

coreyward
la source
2
Que diriez-vous de plusieurs nav dans le même pied de page?
igasparetto
4
@igasparetto Complètement valide, surtout si vous l'utilisez d'une manière qui représente la structure du contenu et pas simplement pour la commodité du style.
coreyward
Existe-t-il des indications sur les étiquettes standard à utiliser pour les types de navigation? Plus précisément: navigation principale, sous-navigation, navigation utilitaire (par exemple, liens rapides) et navigation en pied de page? De plus, si se <nav>trouve déjà à l'intérieur d'une <footer>balise, est-il redondant d'appliquer ensuite aria-label="footer navigation"?
chunk_split
1
@chunk_split Je pense que vous feriez mieux de poser une nouvelle question, même si je ne suis pas sûr que StackOverflow soit la bonne communauté. En ce qui concerne les attributs ARIA, il est prudent de les ajouter même s'ils semblent redondants.
coreyward
3

La réponse est oui. Vous pouvez avoir une <nav>balise dans le pied de page, pour plus d'informations, consultez la documentation mdn<nav> .

harold ramos
la source
Bon travail fournissant un lien faisant autorité. La page liée, dans ses notes d'utilisation, indique spécifiquement "un document peut avoir plusieurs <nav>éléments".
Ed Gibbs
2

Oui, avoir plusieurs <nav>éléments est tout à fait acceptable.

Vous devez simplement vous assurer de les distinguer des personnes utilisant des lecteurs d'écran. Vous pouvez le faire en étiquetant chaque <nav>utilisation aria-label.

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

Ou, si l'un des <nav>textes visibles à l'écran peut être identifié comme élément d'étiquetage, vous pouvez utiliser aria-labelledbycomme suit:

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

Vous pouvez en savoir plus sur l'utilisation de plusieurs repères de navigation .

Lucalanca
la source