web-dev-qa-db-fra.com

Élément de navigation HTML5 vs role = "navigation"

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>


.

<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>
html5semantic-markupnav
48
Web_Designer

Comme Alohci a noté , selon HTML5, l'exemple 3 est non autorisé .

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

nav est un élément de sectionnement, div pas. Ainsi, l'exemple 1 crée une section sans titre (semblable à un en-tête vide), en changeant le document entier contour .

nav toujours appartient à son contenu de sectionnement parent (resp. Racine de sectionnement), afin que vous puissiez avoir une navigation pour l'ensemble du site, une navigation pour le contenu principal, une navigation uniquement pour le chapitre 3 du contenu principal, et/ou une navigation pour le contenu secondaire dans la barre latérale, etc.

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

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

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

L'élément nav représente une section d'une page qui renvoie à d'autres pages ou à des parties de la page: une section avec des liens de navigation.

Notez également: un agent utilisateur HTML5 qui ne prend pas en charge/ne connaît pas WAI-ARIA ne comprendrait pas que l'exemple 2 contient la navigation (et vice-versa).

45
unor

Twitter Bootstrap utilise <nav role="navigation">

Cela semble couvrir tous les besoins de la manière la plus efficace.

Assurez-vous d'ajouter un role = "navigation" à chaque barre de navigation pour faciliter l'accessibilité.

Il est également conseillé par w3.org

21
bdanin

<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 les anciens et les nouveaux jusqu'à ce que la technologie d'assistance rattrape.

5
sam

Les deux premiers cas sont sémantiquement équivalents. Le troisième ne l'est pas. <ul> a un sémantique ARIA implicite par défaut de list, et ne peut être valablement défini que sur directory, list, listbox, menu, menubar, presentation, tablist, toolbar ou tree, donc définissez-le sur navigation n'est pas valide et rompt la sémantique list que le <ul> l'élément a dans les deux premiers cas.

5
Alohci

WAVE Web Accessibility Tool peut être utilisé pour obtenir des informations sur des choses comme celle-ci.

Bien que je trouve la documentation là-bas et la vue des résultats lors de la vérification un peu confuse. Je pense que ce serait bien avec des exemples clairs car tout le monde ne sait pas grand-chose sur l'accessibilité sur le Web. (La vue des résultats semble très bonne, mais des exemples seraient néanmoins utiles.)

2
Leo

OK, c'est une bonne question, et en bref, c'est ce qui se passe lorsque deux ou plusieurs spécifications proposant des problèmes similaires sont publiées à des moments différents et prises en charge par différents navigateurs/lecteurs d'écran.

L'élément <nav> Doit se voir attribuer automatiquement le rôle navigation, donc en théorie, vous pouvez simplement utiliser votre option 1. Cependant, certains lecteurs d'écran ne le savent pas encore, il serait donc préférable d'utiliser 2 . L'option 3 semble étrange, car c'est plus qu'une liste non ordonnée, c'est un nav.

Bien sûr, ceci est un bel exemple - pour de nombreux rôles ARIA, il n'y a pas d'élément HTML à faire correspondre, vous pouvez donc opter pour l'option 2 parce que vous utilisez d'autres choses d'ARIA et que vous voulez être explicite.

Personnellement, j'utilise 2 parce que GZIP rend la taille du fichier non pertinente et le fait fonctionner dans le AT j'ai testé avec (Voiceover et autre chose sur Windows, je ne me souviens pas pour le moment).

2
Rich Bradshaw