On continue à explorer l’accessibilité des contenus rédigés en ligne avec les titres de section.

Ce que j’ai fait :

• lire l’article Donner des titres aux rubriques(lien externe) issu des guidelines accessibilité d’Orange
• lire la notice “Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>“(lien externe) d’AcceDe Web
• lire la page Discussions – SEO et hiérarchie de titres(lien externe) sur le blog d’Atalan

Ce que j’ai appris

Structurer le contenu des pages à l’aide de titres

Le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) pose le critère suivant :

Critère 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?

Les éléments suivants doivent être testés :

• le contenu des titres est pertinent
• la hiérarchie des titres doit être logique
• les titres sont matérialisés à l’aide d’une balise <hn> ou d’une balise possédant un role ARIA role="heading" associé à un attribut aria-level.

Concrètement cela signifie que sur chaque page, les contenus doivent être structurés avec des balises de titres allant de <h1> jusqu’à <h6>.

Il ne doit pas y avoir de saut dans la hiérarchie des titres : on ne passe pas directement d’un titre <h2> à un titre <h4>.

Tous les titres nécessaires à l’architecture de l’information doivent être présents afin de proposer un plan clair de la page.

Par exemple :

<h1>Accueil – Mon site CV</h1>
    <h2>Mon portfolio</h2>
    <h2>A propos de moi</h2>
        <h3>Ma formation</h3>
        <h3>Mon expérience</h3>

En tant qu’intégratrice, il m’est déjà arrivé (même si cela reste rare) de recevoir des maquettes qui ne présentaient pas clairement de structure de titres hiérarchisée. Dans ce cas, il convient de discuter avec la personne en charge du design afin de dégager ensemble un plan de page clair et cohérent, déclinable ensuite en code.

Remarques

On peut utiliser plusieurs <h1> dans une même page. Le site d’Atalan donne notamment dans un article [Discussions] – SEO et hiérarchie de titres <h1>, <h2>…(lien externe) un exemple de situation où l’emploi de plusieurs <h1> est nécessaire. L’étude de Daniel Roche(lien externe), expert en référencement, montre par ailleurs que l’utilisation de plusieurs <h1> par page ne pénalise nullement le positionnement d’un site dans les moteurs de recherche.

Il est possible de simuler des titres de section via l’usage de role="heading" et de l’attribut aria-level. Par exemple :

<div role="heading" aria-level="2">Titre de niveau 2</div>

Cette technique présente cependant des problèmes :

• si les feuilles de styles sont désactivés, les styles par défaut du navigateur prévus pour les balises de titres ne peuvent être appliqués à ce type d’éléments
• si les personnes malvoyantes utilisent une CSS personnalisée selon leur besoin d’affichage, elles peuvent rencontrer des difficultés pour cibler ces éléments et modifier leurs apparences

Les titres masqués à l’aide des propriétés visibility: hidden;, display: none; ou aria-hidden="true" ne peuvent être lus par les lecteurs d’écran.

Bénéfices

Pour tous les utilisateurs : mieux visualiser la structure de la page et identifier rapidement le contenu recherché.

Pour les utilisateurs déficients visuels, déficients cognitifs ou ayant des difficultés de lecture : naviguer plus facilement et accéder rapidement au contenu.

Bonus : améliorer le référencement du site en indiquant aux moteurs de recherche les informations les plus importantes que comportent la page.

Outils

L’extension HeadingsMap de Firefox(lien externe) permet de générer le plan d’une page en indiquant les niveaux de titres et leur imbriquation. On peut ainsi rapidement visualiser la cohérence de la hiérarchie des titres. Je l’ai personnellement installée sur mon navigateur et je m’en sers régulièrement.