Sémantique HTML5 et ARIA pour Wordpress

Layout : sidebar, header, footer

Poursuivons avec les les différentes grandes zones composant la page.

sidebar.php

Ceci affiche la ou les colonnes latérales, qui est donc un contenu sans forcément un rapport direct avec le contenu principal du site. ARIA et HTML5 ont tout prévu pour cela : role="complementary" et balise <aside>. Vous devez donc modifier une (ou plusieurs selon le thème) <DIV> parentes pour obtenir ceci :

<aside role="complementary" id="..." class="...">
	widget et contenus relatifs
</aside>

header.php

Nous avons déjà modifié ce fichier pour y rajouter le doctype, notre JS et le CSS afin de préparer le blog à HTML5. Passons maintenant aux ajouts sémantiques :

• la balise <header>, pour marquer cette zone
• la balise <nav> pour indiquer une zone de liens. Selon votre thème, cela peut être la liste des catégories ou des pages à part. Nous lui ajouterons le rôle ARIA navigation qui lui correspond exactement
• le rôle ARIA banner qui signale titre et logo
• si votre formulaire de recherche n'est pas déjà modifié, c'est le moment de rajouter role="search" sur le formulaire et type="search" placeholder="Rechercher" dans le champs de recherche

Les résultats varient grandement selon le thème, mais voici un exemple simplifié à partir du code du thème par défaut Wordpress 3 :

<header class="header">
	<nav id="access" role="navigation">
		<ul class="nav">
			<li class="current_page_item"><a href="http://braincracking.org/blog/" title="Accueil">Accueil</a></li>
			<li class="page_item page-item-2"><a href="http://braincracking.org/blog/a-propos/" title="A propos">A propos</a></li>
		</ul>
	</nav>
	<!-- END #access -->
	<div id="branding" role="banner">
		<h1 id="blog_header"><a href="http://braincracking.org/blog">BrainCracking</a></h1>
	</div> <!-- #branding -->
</header><!-- #header -->

footer.php

Là aussi, sans grande surprise nous allons utiliser la balise <footer> ainsi que le role=contentinfo qui sont tous deux faits pour baliser une zone contenant copyrights, liens vers mentions légales et autres textes relatifs au site, mais pas forcément au contenu de cette page. Attention, chez Wordpress cela ne correspond pas exactement à la div id="footer" du template par défaut, celle ci contenant également d'autres widgets.

Concrètement :

<!--BEGIN #footer-->
<div id="footer">
	<div id="footer-widget-area">
		code généré par les widgets
	</div><!-- End #footer-widget-area -->
	<footer id="copyright" role="contentinfo">© 2009-2010
		<nav role="navigation">
			Liens vers mentions légales, vie privée, qui somme nous ...
		</nav>
	</footer>
<!--END #footer-->
</div>

Notez que pour ceux qui font des liens, on peut tout à fait rajouter la balise <nav>.