[Résolu] Balises sémantiques html5

Salut,

Le code que tu nous montres est suffisant. Cela dit, j'en profiterais pour remplacer le div dont l'id est "main" par… l'élément main. Et pour la touche d'accessibilité, j'ajouterais les rôles ARIA qui vont bien : role="banner" pour l'élément header situé en premier, role="main" pour la partie que tu as estampillée « main », role="article" pour l'élément article, role="complementary" pour l'élément aside et role="contentinfo" pour l'élément footer situé en tout dernier.

Quant à l'élément section, il correspond à une section générique d'un document, qui n'a pas la sémantique d'un élément article (autrement dit, qui n'est ni un article ni un billet ni un commentaire ni tout autre contenu susceptible d'être récupéré par un outil ou un format de syndication de contenu comme les agrégateurs de flux de type Netvibes ou les flux RSS), mais a une sémantique suffisante pour que l'emploi de div ne soit pas pertinent (div étant, pour rappel, un élément neutre du point de vue sémantique). L'élément section aime bien comporter comme premier élément enfant un h1 à h6.

Soit dit en passant, leftCol et rightCol ne me semblent pas judicieux comme valeurs d'id (ou de classe) : quand tu auras à faire afficher les blocs correspondant les uns en-dessous des autres pour les petits écrans, tu comprendras (enfin… je l'espère).

Salut Victor et merci beaucoup pour tes réponses.

Donc concernant la balise <section>, si j'ai bien compris, je dois la mettre à la place de la balise <article> pour les pages statiques, et laisser <article> pour les pages dynamiques ?

De plus, la balise <header> qui entourent le <h1>, est-elle utile quand il n'y a qu'un h1 par page ?
Ou faut-il la mettre uniquement quand une page comportent plusieurs <h1> ?

Attention ! ce n'est pas une question de page statique ou de page dynamique : tu peux très bien avoir un site complètement statique avec du contenu qui peut parfaitement répondre aux critères rendant pertinent le choix de l'élément article. Par ailleurs, j'en profite pour te mettre en garde contre la tentation de la « sectionite » (qui peut être considérée comme le successeur de la « divite »), à savoir l'abus de l'élément section quand la sémantique ne le justifie pas.

Dans le cas d'un élément header contenu dans un élément comme article, s'il ne comporte qu'un élément, comme dans ton exemple, il est inutile. L'élément header dans ce contexte peut s'avérer judicieux quand il y a plusieurs éléments pouvant faire partie d'un tout signifiant l'en-tête de l'article, par exemple :

<article role="article">
  <header>
    <h1>Intitulé de l'article</h1>
    <p>Par tel auteur, le <time datetime="2014-12-03T13:37:00+01:00">3 décembre 2014 à 13h37</time></p>
    <p>Un petit chapeau pour l'article.</p>
  </header>
  <!-- Ici le corps de l'article -->
</article>

Et ce n'est pas une question de h1.

OK, donc je supprime <header> qui entoure le <h1>. Merci beaucoup.

Et donc est-ce que je garde <article> pour mes textes, voici le site en question : http://www.essentieldevie.fr/

Sur toutes les pages, j'ai englobé le texte de la colonne de droite avec <article> (il n'y a que 8 pages pour l'instant)

Bonjour,

a écrit :
role="article" pour l'élément article, role="complementary" pour l'élément aside et role="contentinfo" pour l'élément footer

Ces trois rôles sont implicites, inutile donc de les indiquer explicitement .

Quant à <section>, il ne me paraît pas utile d'en ajouter sur ta page.

Dans les pages web, <section> peut s'utiliser :
1 - Pour grouper plusieurs articles
2 - Pour diviser un long article
3 - Pour des parties de contenu qui ne sont ni des articles, ni des encarts, ni des en-têtes, ni des pieds, et pour lesquels aucune autre balise structurante n'est pertinente

Une très grosse majorité des sites modernes souffrent de sectionnite; c'est plus grave que la divite dans la mesure où <section> déclare implicitement une région (landmark), et quand il y a trop de régions ou plusieurs régions qui se suivent consécutivement sans contenu entre, la navigation devient plus difficile avec les aides techniques qui en tirent habituellement profit comme les lecteurs d'écran; tandis que les div passent généralement totalement inaperçues.

Ok merci.
Je comprends mieux l'utilité de cette balise.
Encore merci pour votre réactivité les gars, c'est cool ! C'est le 1er site que je crée et la 1ère fois que je m'inscris à des forums pour avoir des réponses à ce genre d'interrogations, et ce forum est mega tip top !

QuentinC a écrit :
Ces trois rôles sont implicites, inutile donc de les indiquer explicitement .

En théorie, oui. Mais, ces rôles ne sont pas encore systématiquement restitués aux lecteurs d'écrans par tous les navigateurs (je te renvoie au tableau sur l'accessibilité du HTML 5). Et si le critère 12.10 du référentiel Accessiweb HTML 5 / ARIA en parle, ce n'est pas pour rien.

Victor BRITO a écrit :

En théorie, oui. Mais, ces rôles ne sont pas encore systématiquement restitués aux lecteurs d'écrans par tous les navigateurs (je te renvoie au tableau sur l'accessibilité du HTML 5).

IL me semblais pourtant que ce problème était enterré depuis déjà belle lurette. Pour moi qui suis sous jaws et un peu NVDA avec IE et firefox, ça fait déjà un bon moment que ces rôles sont automatiques dans toutes mes configurations (au moins 2 ou 3 ans, peut-être même plus).

Intéressante la page que tu proposes, je la garde sous le coude, merci! Par contre pour IE, ils ne semblent pas vraiment à jour.

Si je vais sur leur page de test:
http://www.html5accessibility.com/html5elements/

Par exemple j'ai bien les landmark navigation et article implicites, alors que d'après leur tableau ceux-ci ne sont pas eensés être exposés à l'API d'accessibilité, et donc je ne devrais logiquement pas les avoir quand je lis la page avec mon lecteur d'écran. IE10+JFW14
Modifié par QuentinC (05 Dec 2014 - 09:43)