5568 sujets

Sémantique web et HTML

Plusieurs role="main"

Bonjour,

Je cherche à organiser une page d'accueille html5.
Je sèche sur les fameux "roles" à utiliser lorsque la page est complexe.

J'aimerai savoir si il était possible d'utiliser plusieurs fois role="main".

En effet, j'ai plusieurs articles important sur la page d'accueille du site, que je considère comme appartenant au "main".
Pour indiquer cela, il faudrait que j'utilise au moins deux fois role="main" à cause de l'organisation particulière de la page d'accueille.

1) Est ce correcte ?

2) Est il correcte d'indiquer la navigation principale avec <nav role="navigation main">...</nav> ?

3) En passant, pouvez vous me dire si ces "roles" sont utiles pour le référencement ?

Cordialement.
Modérateur
Bonjour, ces rôles sont du ARIA (Accessible Rich Internet Applications) et ce n'est pas directement lié à Html5.

Voilà la bible: http://www.w3.org/TR/wai-aria/

En gros on utilise dans les interface non-riches (des sites internet standard quoi) souvent que quelques rôles de régions et parfois quelques rôles structurels.

Pour Main: Le but est proche de celui des lien d'échappement, pouvoir accéder directement au contenu sans passer par la case bannière/menus divers/blocs divers d'informations qui n'intéressent personne, etc. Il faut qu'il y en ait qu'un seul. Si tu as plusieurs articles sur une page, place les à la suite. le rôle main, c'est le contenu qui est propre à une page.

Pour la navigation, si tu as deux ou trois menus avec des titres approprié, ce n'est pas un problème de passer de l'un à l'autre et de lire l'intitulé. Si tu as plus de menus, remet en question ta structure car c'est beaucoup trop, accessibilité ou pas.
main , veut dire principale, mais chaque balise a aussi sa fonction, sémantique.

Généralement, on met role="main" sur le nav de la navigation/menu principal du site.

Ensuite, si tu utilises <section>, <article> , le titrage , <header> et <footer>, voir <aside>, le reste du contenu prendra aussi l'importance que tu lui accorderas.
Chaque <article> peut-être consideré comme une entité a part entière avec un titrage commençant avec un <h1>, mettant ainsi chacunes de ces balises comme d'importance similaire avec des contenus qui ne seront pas lié ni dependant les uns des autres par ton titrage.

Un role="main" sur des balises differentes comme <nav> / <article> ne me parait pas mauvais (sauf contre-indications claire sur le W3C) mais ne me parait pas non plus utile si le contenu est bien structuré.

Cordialement, GC
Modérateur
gc-nomade a écrit :
Généralement, on met role=&quot;main&quot; sur le nav de la navigation/menu principal du site.

Pourquoi pas, sauf que non, rien à voir entre main et navigation.
gc-nomade a écrit :
Un role=&quot;main&quot; sur des balises differentes comme &lt;nav&gt; / &lt;article&gt; ne me parait pas mauvais (sauf contre-indications claire sur le W3C)

Si si, c'est vraiment mauvais:

w3c a écrit :
This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies.

User agents SHOULD treat elements with the role of main as navigational landmarks.

Within any document or application, the author SHOULD mark no more than one element with the main role.


a écrit :
Ensuite, si tu utilises &lt;section&gt;, &lt;article&gt; , le titrage , &lt;header&gt; et &lt;footer&gt;, voir &lt;aside&gt;, le reste du contenu prendra aussi l'importance que tu lui accorderas.
Chaque &lt;article&gt; peut-être consideré comme une entité a part entière avec un titrage commençant avec un &lt;h1&gt;, mettant ainsi chacunes de ces balises comme d'importance similaire avec des contenus qui ne seront pas lié ni dependant les uns des autres par ton titrage.

La sémantique peut et va certainement aider à l'accessibilité. Mais pour l'heure ce n'est pas encore le cas. Attention à ne pas confondre sémantique et ARIA
Ok, merci pour ces infos.

J'ai bien (j'èspère) compris le rôle des articles et section etc.

A la limite, je peux construire la page principale comme cela :

<header>
<div role="main">...</div>
<footer>

Ensuite je découpe le contenu du main en section, articles, nav etc.

Si j'ai voulu plusieurs <nav> c'est pour indiquer une navigation interne à la page (articles recent, dossiers, selection d'article, bonus ...) en plus de la navigation principale (catégories, qui somme nous etc.)
Le but étant de simplifier les accès à certaine rubrique de la page d'accueille (qui est assez remplie en hauteur) depuis le haut du site ou le bas du site.

Pour info, j'utilise Dotclear.
Peut être que ce moteur de blog utilise une autre méthode que aria ?

Une idée sur l'impacte pour le référencement (est ce un plus pour aujourd hui ou demain de bien respecter aria) ?

Merci à vous.
Modifié par pressecologie (12 Jul 2012 - 20:23)
Modérateur
pressecologie a écrit :

A la limite, je peux construire la page principale comme cela :

&lt;header&gt;
&lt;div role=&quot;main&quot;&gt;...&lt;/div&gt;
&lt;footer&gt;

Ensuite je découpe le contenu du main en section, articles, nav etc.

ça dépend, le contenu qui est vraiment relevant selon la page. ça peut changer d'une page à l'autre, si tu as une structure de contenu différente… Difficile de répondre comme cela, ça dépend du contexte.
pressecologie a écrit :

Une idée sur l'impacte pour le référencement (est ce un plus pour aujourd hui ou demain de bien respecter aria) ?

Merci à vous.

Pas vraiment d'idée claires, mais ce n'est pas vraiment en rapport, à moins que google ne sorte une option de recherche de sites accessibles…

Le principe c'est plutôt d'appliquer des bonnes pratiques, parce qu'elles sont bonnes… pas parce qu'il y a un gâteau au bout. Ensuite on peut parler de référencement, mais il faut bien garder les deux séparés.
@kustolovic , merci pour cet éclaircissement, cependant , je ne vois personnellement d'utilité pour cet attribut que sur des élément de navigation, Pour le reste le titrage me semble assez efficace, voir quelque tabindex supplementaire (pas toujours efficace non plus selon les navigateurs et totalement inconsistant pour le référencement).

Cordialement,GC
Modérateur
role=main c'est juste "aller au contenu principal" de manière plus robuste et intégrée.

par contre certains rôles structurels risque de perdre de leur utilité avec html5:


  <nav role="navigation">
  <article role="article">

Y'a comme un parfum de redondance…

pour le reste, ARIA c'est fait pour les "Interfaces riches" à la base, pas pour les sites web simples. Par interface riches, on entand une application complexes avec plein d'outils qui ne sont pas systèmes (sliders, boutons à états, etc. ) des menus, des palettes complexes, des évènements, etc.

Dans le complexe d'un site web, c'est clair que ça ne change pas le monde, mais ça ne mange pas de pain de les utiliser.
pressecologie a écrit :
Ok, merci pour ces infos.

Tu peux aller voir sur mon site, j'utilise les landmark. Comme dit plus avant "main" doit être unique car c'est le contenu principal de ta page. J'utilise "search" pour le champs de recherche, "banner" pour le header principal de la page, "contentinfo" pour le pied de page, "navigation" pour la colonne de droite, "article" sur les billets (mais là ce n'est pas encore bien utilisé par les lecteurs d'écran, mais ça viendra).

VoiceOver (mac, ios) permet de sauter d'un landmark à l'autre facilement.
Sujet clos
Aller à