Sémantique HTML5 et ARIA pour Wordpress

Les articles

La sémantique en théorie

Il y a 4 nouvelles balises toutes trouvées (en plus du <hx>) qui vont enrichir sémantiquement nos articles. Ce qui change avec HTML5, c'est que non seulement la balise a un sens, mais ce sens peut varier en fonction des éléments parents :

• <article> : surpris ? Allons un peu plus loin : la définition du W3C dit qu'elle représente une section isolable du site, qui peut s'autosuffire en dehors du contexte de la page (dans un lecteur RSS par exemple). Cette balise peut aussi être enfant d'un autre <article>, comme dans l'interprétation qu'en a fait HTML5 Doctor, auquel cas elle pourrait représenter les commentaires relatifs à un article. Nous n'allons pas le faire ici car ce point est parfois discuté et cela demande beaucoup plus de modifications dans wordpress car les styles de l'articles et des commentaires n'ont pas été prévus pour s'imbriquer.
• <header> : cette balise n'est pas exclusivement réservée à l'en-tête du site ! A l'intérieur d'un <article>, elle sert à repérer les titres et méta-données de l'article comme la date de publication et le nom de l'auteur. Dans WordPress, cela correspond exactement aux éléments avec les classes .entry-title, .entry-header, .author, .published et .comment-count
• <footer> : elle non plus n'est pas réservée au pied de page du site. Placée dans un <article>, elle marque les informations relatives à l'article mais non indispensables, telles que tags et catégories. Dans WordPress, cela correspond aux classes .entry-footer, .entry-categories et .entry-tags
• <time> : elle sert à indiquer une date. Rajoutez y l'attribut pubdate pour signifier au parseur qu'il s'agit de la date de publication de l'<article> parent. L'attribut datetime doit contenir la date à un format standardisé qui peut varier de "2010-08-20" à "2010-08-20T20:00+09:00". PHP à la rescousse : il y a une constante pour ce format qui s'appelle DATE_W3C et que vous pouvez passer à la fonction wordpress d'affichage de la date.

Le code final :

Voici le code original simplifié d'une installation Wordpress 3 avec le thème par défaut :

<div class="hentry" id="post-777">
	<h2 class="entry-title">Titre + lien</h2>
	<div class="entry-meta">
		<span class="meta-prep meta-prep-author">Publié le</span>
		<span class="entry-date">Vendredi 20 août 2010</span>
		<span class="author vcard">Auteur</span>
	</div><!-- .entry-meta -->
	<div class="entry-content">
		corps de l article
	</div><!-- .entry-content -->
	<div class="entry-utility entry-footer">
		catégories, tags, commentaires ...
	</div><!-- .entry-utility -->
</div><!-- .hentry -->

Notez les très pratiques commentaires qui marquent les balises de fermeture.

Nous allons donc :

• remplacer la div.hentry par une balise article, en conservant les classes
• remplacer la div.entry-utility (ou .entry-footer dans mon thème) par une balise footer, en conservant les classes
• entourer le <h2> et la div.entry-meta par une balise header
• remplacer le <h2> par un <h1> : en HTML5, les Hx sont relatifs à l'élément parent pour lequel cela a un sens : <article>, <section> ou BODY. Contrairement à certaines recommandations SEO, il est donc possible d'avoir plusieurs H1 par page
• entourer ou remplacer le span.entry-date par ce code : <time pubdate datetime="<?php the_time( DATE_W3C ); ?>"> ... </time>

Pour obtenir ce markup :

<article class="hentry" id="post-777">
	<header>
		<h1 class="entry-title">Titre + lien</h1>
		<div class="entry-meta">
			<span class="meta-prep meta-prep-author">Publié le</span>
			<time pubdate datetime="2010-08-20T11:34:47+00:00"
					class="entry-date">
				Vendredi 20 août 2010
			</time>
			<span class="author vcard">Auteur</span>
		</div><!-- .entry-meta -->
	</header>
	<div class="entry-content">
		corps de l article
	</div><!-- .entry-content -->
	<footer class="entry-utility entry-footer">
		catégories, tags, commentaires ...
	</footer><!-- .entry-utility -->
</article><!-- .hentry -->

Que modifier ?

Il va falloir apporter ces modifications à beaucoup d'endroits, voici une liste non exhaustive (selon votre thème) :

• archive.php
• single.php
• page.php
• index.php
• category.php
• author.php
• tag.php
• search.php (à la différence que <article> ne doit pas remplacer le <li> mais être son premier et unique fils)
• date.php

Je déteste dupliquer le code, donc si vous êtes bons en Wordpress vous devriez peut être inclure un template unique d'article dans tous ces fichiers, car c'est quasiment le même markup à chaque fois. La partie difficile étant bien sur de coder le "quasiment" :)

Voilà, vous êtes passé à la sémantique HTML5 sur la partie importante du blog que sont les articles. Logiquement les robots indexeurs tels que celui de Google ou d'autres programmes devraient utiliser un jour ce standard (si ce n'est pas déjà le cas), au même titre que les microformats, microdata ou RDFa pour comprendre plus facilement votre site et donc proposer des fonctionnalités spécifiques à vos lecteurs (un affichage spécifique dans les résultats Google, une meilleure indexation, les navigateurs pourraient mettre en avant l'article ...).