Nous allons voir l'application d'HTML5 et ARIA dans un cas spécifique d'application au CMS bien connu : Wordpress. Cependant, si vous n'êtes pas un utilisateur Wordpress, les remarques sur la sémantique HTML5 et les rôles ARIA restent valables quel que soit le site. Vous pourrez donc ainsi voir en détails :
-
les nouvelles balises
<article>, <time>, <nav> ... - certains rôles ARIA
- des améliorations pour les formulaires
- les ajouts JS/CSS à apporter
- les fichiers à modifier dans WordPress
Le tout bien sur compatible sur tous les navigateurs, IE6 inclus.
image issue d'Aria, la BD Heroic Fantasy
Travail préparatoire
Tout passage à HTML5 doit passer par 2 ajouts à votre site, afin d'avoir un comportement normal des nouveaux éléments, que les anciens navigateurs ne pouvaient bien sur pas connaître. Je les reprend de mon précédent article sur le passage à HTML5, la situation n'ayant pas évolué depuis.
JavaScript
IE ne sait pas styler les éléments inconnus. Heureusement il existe une solution JS reconnue appelée HTML5 shim pour contourner ce problème, qui consiste à créer dynamiquement au moins une fois ce nouvel élément. Ceci marche avec IE6 et supérieur. Notez que ce code doit être exécuté obligatoirement dans <HEAD>. Plusieurs choix alors :
-
pour des gains de performances, vous avez enlevé les inclusions de fichiers JS du
<HEAD>. Il vous faut alors éditer header.php pour rajouter ce script inline, avant<HEAD> -
vous ou votre thème inclue déjà modernizr, ce script est déjà inclus dedans. Si modernizr est dans le
<HEAD>vous n'avez rien à ajouter -
vous avez un fichier javascript global inclus dans le
<HEAD>, c'est dans ce fichier qu'il faut rajouter ces lignes.
// Inspiré de http://code.google.com/p/html5shim/source/browse/trunk/html5.js
// Crée tous les tags HTML5 au moins une fois pour que IE sache les styler
// Commentaires et discussions, voir http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){
if(!/*@cc_on!@*/0)
return;
var e = 'abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video'
.split(',');
for(var i=0, iTotal = e.length; i<iTotal;i++) {
document.createElement(e[i]);
}
})();
CSS
Tous les éléments inconnus pour les navigateurs sont de type display:inline par défaut, ce qui peut rapidement casser un design : si vous passez d'une <DIV> à un <ARTICLE>, vous allez être obligé de rétablir display:block pour chaque élément. Il est préférable de s'inspirer de la stratégie des CSS reset et de définir un comportement par défaut à toutes les balises HTML5 possibles. Notez que l'on définit également les balises qui devraient être inline, ceci afin de prévenir le cas où un navigateur déciderait de mettre une des ces balises en display:block. Dans le fichier style.css, après le CSS reset :
/* tags HTML5 qui se comportent comme des blocs */
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, menu, nav, section, video { display: block; }
/* tags de type en ligne */
abbr, eventsource, mark, meter, time, progress, output, bb { display:inline; }
Doctype
Nous allons maintenant remplacer votre doctype par le désormais célèbre nouveau doctype HTML5. dans header.php, première ligne : <!DOCTYPE html>. Vérifiez que votre blog s'affiche toujours comme avant sur tous vos navigateurs cible, je n'ai jamais entendu que ce nouveau doctype posait problème. Vous êtes officiellement passé en HTML5 :)