Elément de navigation HTML5 contre role = "navigation"

Question

Tous les éléments suivants ont-ils la même signification sémantique? Sinon, veuillez expliquer votre réponse.

1.

 <nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>
 

2

 <div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>
 

3

 <ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>
 

Answer 1

Comme Alohci noté, selon HTML5, à l'exemple 3 est pas autorisé.

Mais les exemples 1 et 2 sont pas sémantiquement équivalentes.

nav est un élément de sectionnement, div non. Ainsi de l'exemple 1 crée une section sans titre (similaire à un vide-tête), la modification de l'ensemble du document contour.

Aussi nav toujours appartient à son parent de sectionnement de contenu (resp. le sectionnement de la racine), de sorte que vous pouvez avoir un système de navigation pour l'ensemble du site, un système de navigation pour le contenu principal, une navigation uniquement pour le chapitre 3 de l'essentiel du contenu, et/ou une navigation secondaire contenu dans la barre latérale, etc.

Cette différence est représentée dans les définitions de l' navigation rôle

Une collection d'éléments de navigation (généralement des liens) pour naviguer dans le document ou les documents connexes.

et l' nav élément (en gras par moi):

L' nav élément représente une section d'une page de liens vers d'autres pages ou pour des pièces à l'intérieur de la page: une section avec des liens de navigation.

---

À noter également: un HTML5 user-agent qui ne supporte pas de savoir WAI-ARIA ne comprends pas que l'exemple 2 contient la navigation (et vice-versa).

Answer 2

Twitter Bootstrap utilise <nav role="navigation">

Cela semble couvrir tous les besoins plus efficacement.

Assurez-vous d’ajouter un rôle = "navigation" à chaque barre de navigation pour faciliter l’accessibilité.

C'est aussi conseillé par w3.org

Answer 3

Les deux premiers cas sont sémantiquement équivalents. Le troisième ne l'est pas. <ul> a un défaut implicite ARIA sémantique de l' list, et ne peut valablement être réglé soit en directory, list, listbox, menu, menubar, presentation, tablist, toolbar ou tree, de sorte que le paramètre navigation n'est pas valide et les sauts de l' list sémantique que l' <ul> élément a dans les deux premiers cas.

Answer 4

<nav role="navigation"> valide pour moi en utilisant HTML5 dtd sur le service de validation W3C.

Cela me semble une bonne option car il prend en charge l'ancien et le nouveau jusqu'à ce que la technologie d'assistance rattrape son retard.

Answer 5

OK, c'est une bonne question, et c'est ce qui arrive lorsque deux ou plusieurs spécifications de proposer à des problèmes similaires sortir à des moments différents et pris en charge par les différents navigateurs/lecteurs d'écran.

L' <nav> élément devrait être donnée à l' navigation rôle automatiquement, donc, en théorie, vous pouvez simplement utiliser votre option 1. Cependant, certains lecteurs d'écran ne le sais pas encore, donc, à l'aide de 2 serait mieux. Option 3 me semble bizarre, comme c'est plus qu'une liste non ordonnée, c'est un nav.

Bien sûr, c'est un bel exemple – pour de nombreux rôles ARIA, il n'y a pas un élément HTML de match, de sorte que vous pouvez aller pour l'option 2 parce que vous êtes en utilisant d'autres choses à partir d'ARIA, et que vous voulez être explicite.

Personnellement, j'utilise 2 parce que GZIP fait de la taille du fichier sans importance, et il permet de travailler dans le AU j'ai testé avec (Voix et quelque chose d'autre sur Windows, je ne me souviens pas en ce moment).