Sémantique HTML5 et ARIA pour Wordpress

HTML5 Forms et rôles ARIA dans votre layout

Pour le reste du site, nous allons ajouter plus de sémantique. Notez que les rôles ARIA sont déjà correctement définis dans le thème par défaut, mais ce n'est probablement pas celui que vous utilisez, donc je vais les répéter.

Formulaires

Forms 2 a été renommé en HTML5 Forms et continue de définir de nouveaux types de champs ainsi que d'ajouter du comportemental sans JavaScript. Par défaut il n'y a pas de JavaScript qui régisse les formulaires de Wordpress (commentaires et recherche), on ne perd donc pas de fonctionnalité pour les anciens navigateurs : on en rajoute pour ceux qui supportent HTML5 Forms :) Si vous voulez ajouter facilement ces fonctionnalités pour pour d'autres navigateur sans taper de code JS, vous pouvez partir sur la librairie WebForms2

Dans comments.php :

• la <div> avec l'id #respond devient une <section> : comme une <DIV>, la <section> n'a pas de valeur sémantique particulière, sinon qu'elle contient un titre, ce qui est ici le cas avec un <h3> comme enfant direct. Ce <h3> est d'ailleurs promu au rang de <H1> car c'est le titre le plus important de cette <section>
• dans le formulaire de commentaires, on modifie le type de 2 champs : celui de l'email et du site Web pour les passer très logiquement en type="email" et type="url". Cela ne change rien pour la plupart des navigateurs mais outre la lisibilité du code, le seul bénéfice connu actuel est le changement de clavier sur iOS ... Mais dans les mois qui viennent, d'autres clients pourraient l'utiliser pour une meilleure autocomplétion des champs ou pour signaler un type de données invalides. En attendant cela ne coûte rien
• rajouter l'attribut required ainsi que aria-required="true" aux champs obligatoires (au minimum l'email et le champs de commentaires). En code Wordpress cela donne :

<input name="email" id="email" type="email" value="<?php echo $comment_author_email; ?>" tabindex="2" <?php if ( $req ) echo "aria-required='true' required"; ?> />

Les navigateurs supportant required (FF4, Opéra 9+, Webkits) ne laisseront pas l'utilisateur valider le formulaire tant qu'il n'a pas rempli correctement les champs. Voir cette démo faite par Opéra. Vous pouvez ensuite styler en CSS grâce aux pseudo-sélecteurs les champs non ou mal remplis :

input:invalid,
input:invalid + label {
	background-color : red;
}

Votre code final généré pour la zone de saisie de commentaires devrait ressembler à ceci :

<section id="respond">
	<h3 id="leave-a-reply">Laisser un commentaire</h3>
	<!--BEGIN #comment-form-->
	<form action="...">
		<!--BEGIN #form-section-url-->
		<div class="form-section" id="form-section-url">
			<input type="url" required="required" aria-required="true" value="http://braincracking.org/" id="url" name="url">
			<label class="required" for="url">Site Web</label>
		<!--END #form-section-url-->
		</div>
	../..
	<!--END #comment-form-->
	</form>
<!--END #respond-->
</section> 

Notez que l'on pourrait passer de même tous les widgets avec <section> et leur titre en <h1>.

Dans searchform.php :

Si votre thème n'a peut-être pas ce fichier ou équivalent, sachez que le formulaire de recherche par défaut se trouve dans general-template.php, dans la fonction get_search_form. Nous allons rajouter ici 3 choses :

• le rôle ARIA sur le formulaire lui même : <form role="search" ...>
• le type "search" sur le champs de formulaire : <input type="search" />. Notez que sous les webkits sur Mac OS, votre champs apparaît stylé comme Spotlight : arrondi avec une croix d'annulation
• un "placeholder", grand classique du Web : un texte par défaut disparaît lorsque l'on clique sur le champs et ré-apparaît si rien n'a été écrit : <input placeholder="Rechercher" />

Ce qui se devrait se traduire par ce code final :

<form role="search" action="http://braincracking.org/blog" method="get" class="searchform">
	<input type="search" placeholder="Rechercher" name="s" class="search" />
	<button type="submit" class="search-btn">Rechercher</button>
<!--END #searchform-->
</form>