État des lieux de l'accessibilité de HTML5 HTML5 : les titres

HTML5 facilite la gestion des hiérarchies balises

HTML5 définit un algorithme pour déterminer le vrai niveau des Hx d'une page. Concrètement si vous mettez un h1 dans une balise section ou article qui n'est elle même pas enfant d'une autre balise sectionnante, alors votre h1 est en fait un h2. C'est très pratique pour ceux qui développent des sites Web de façon modulaire : on ne s'occupe que de la hiérarchie interne d'un bout de page, sans avoir à se demander quel est le nombre de niveaux de titre déjà introduit. Pour voir cet algorithme en action, vous pouvez utiliser l'outil HTML5 outliner.


Si vous ne gériez pas votre hiérarchie au niveau de la page, autant passer directement à la logique HTML5

En quoi est ce important ? Les titres sont la première manière de naviguer sur une page lorsque l'on utilise un lecteur d'écran et selon le moteur HTML utilisé, la hiérarchie interprétée ne sera pas la même, et vous ne pouvez rien y faire. Honnêtement si vous n'aviez pas prêté attention à la hiérarchie globale des titres jusqu'à présent, HTML5 vous aidera au contraire à mieux vous organiser module par module et obtenir au final quelque chose de cohérent au moins sur les nouveaux navigateurs.

Si vous aviez une belle hiérarchie, alors pour la conserver sur tous les navigateurs, il vous faudra éviter les balises sectionnantes comme article, section ou aside.


Cela dit, une hiérarchie bien maîtrisée de titres n'est réellement importante que si la page comporte beaucoup de titres, par exemple sur des sites à fort contenu textuel (longs articles de journaux, encyclopédie?). La plupart des sites se contentent d'une vingtaine de titres de niveau 1 et 2.


Conclusion : Si vous ne gériez pas votre hiérarchie parfaitement au niveau de la page (site très modulaire, maintenu par plusieurs personnes ou par méconnaissance), autant passer directement à la logique HTML5, vous devrez vivre avec une hiérarchie de titres différente selon le navigateur. Si vous aviez une belle hiérarchie et beaucoup de titres, alors pour la conserver sur tous les navigateurs, il vous faudra éviter les balises sectionnantes comme article, section ou aside.

Javascript / HTML5