5568 sujets

Sémantique web et HTML

Balise nav versus role navigation

re,

Sur alsacreations , je lis que :
a écrit :
<nav> : liens de navigation

et, plus loin, :
a écrit :
navigation : définit le menu de navigation du document. Typique de liens vers d'autres pages du site ou vers d'autres endroits de la page


Comment structurez-vous votre page pour marquer un groupe de liens de navigation ?

En écrivant :
<nav role="navigation">...</nav>

pour chaque groupe (avec un 
id
différent histoire de les identifier pour l'accessibilité) ?

Si oui :
1. ça ne vous semble-t-il pas un peu redondant comme sémantique ?
2. comment distinguez vous dans ce cas la barre de navigation (qui est le groupe de liens principal d'une page) des autre groupes de liens (liens du footer, liens transverse en haut à droite, ...) ?

JF
Salut,

Pour l'accessibilité (plus précisément, pour faire passer la pilule du HTML 5 aux aides techniques, dont les lecteurs d'écran), l'attribut role est fondamental. Quant à l'attribut id, il sert avant tout à identifier un élément pour lui appliquer des styles ou pour s'en servir dans le cadre de la manipulation du DOM.

Cela dit, je ne vois pas en quoi employer conjointement les attributs id et role est redondant.
Modifié par Victor BRITO (23 Nov 2011 - 15:33)
Hello
naudjf a écrit :
2. comment distinguez vous dans ce cas la barre de navigation (qui est le groupe de liens principal d'une page) des autre groupes de liens (liens du footer, liens transverse en haut à droite, ...) ?

Méthode personelle, que j'adapte selon les cas de figure. 
<nav class="main-nav nav" id="main-nav"  role="navigation">
	<ul>(...)</ul>
</nav>

<footer class="nav">
	<ul>(...)</ul>
</footer>
avec

.nav => styles communs a toutes les navigations, typiquement un truc du genre : 
.nav ul {list-style-type: none;}
.nav li {float: left}
.main-nav => style custom pour la barre d'onglets.
#main-nav => Pour le Javascript.

Par contre, je me pose encore des questions sur l'utilisation de l'attribut role sur les blocs de navigations secondaires.
Où as-tu lu que la balise nav, c’était uniquement pour la barre de navigation principale ?
Victor BRITO a écrit :

Cela dit, je ne vois pas en quoi employer conjointement les attributs id et role est redondant.


J'ai mal rédigé mon message.

Je ne voulais pas parler d’accessibilité (le speech sur l'id est une aparte) mais uniquement de sémantique HTML5 et des éléments "nav" et valeur de role "navigation". Utiliser les 2 est redondant sémantiquement.
J'avais squizzé, la note.

Pour les autres je la cite :
a écrit :
major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.


C'est clair. Merci !
je me greffe à la conversation.

nav = navigation principale
role="navigation" = toute navigation ?

du coup :

<nav class="main-nav nav" id="main-nav"  role="navigation">
	<ul>(...)</ul>
</nav>

<footer class="nav"[b] role="navigation"[/b]>
	<ul>(...)</ul>
</footer>

non ?
Modifié par kenor (23 Nov 2011 - 17:21)
kenor a écrit :
je me greffe à la conversation.

nav = navigation principale
role=&quot;navigation&quot; = toute navigation ?


C'est ce que j'ai compris aussi. Quelqu'un ?
Modifié par fvsch (24 Nov 2011 - 09:27)
Victor BRITO a écrit :

Pas forcément.

Euh ... c'est ce qu'on vient d'expliquer juste au dessus avec citation de HTML5doctor Smiley rolleyes
Sujet clos
Aller à