Accessibilité numérique : un bon plan

Dans un site créé et édité via Osuny, les différentes pages sont bien organisées et l’information est visuellement accessible. Les préceptes de la sémantique HTML sont bien respectés, ce qui permet de naviguer dans une page depuis une navigation, puis un titre de premier niveau (h1). Le contenu de la page est ensuite créé par les personnes en charge de l’édition du site.

Pour ajouter un titre de deuxième niveau (h2), il faut utiliser la fonctionnalité « Ajouter un nouveau titre » dans le back-office. Ceux de troisième niveau sont automatiquement créés par les blocs de liste.

Mais il est possible que la contribution à un site perde les utilisateurs et utilisatrices de technologies d’assistance (lecteurs d’écran notamment) : le plan de la page devient incohérent, avec un titre de premier niveau, puis une multitude de titres de deuxième niveau, sans différence de hiérarchie entre chacun.

Les titres de troisième niveau sont-ils réellement de bons alliés ? Ont-ils leur place dans la navigation ?

Depuis le remaniement du système de titres sur Osuny, le plan HTML des pages est construit de sorte à ce que chaque élément HTML <article> soit doté d’un titre de niveau 3. Mais si aucun h2 n’est ajouté avant ce dernier (ce qui arrive régulièrement), l’harmonie est brisée, tant du point de vue de la sémantique que de l’accessibilité.

Prendre en compte ces problématiques et trouver des solutions n’est pas évident, mais il est essentiel de ne pas discriminer l’accès aux informations qu’elles et ils souhaitent transmettre.

La question est : comment ?

Aux origines : le contenu sectionnant

Si l’on s’intéresse au langage HTML, dont la sémantique est en général transparente, il est nécessaire avant d’entreprendre toute réflexion de comprendre à quoi cette problématique est liée. Ainsi, on doit distinguer l’élément <section> du “contenu sectionnant”.

En effet, une <section> est un élément sectionnant, mais d’autres composants HTML appartiennent à aussi cette catégorie : <header>, <footer>, <article>, <aside>, <nav> et <section>, ainsi que les contenus de titre.

Or, nos titres de troisième niveau, parfois orphelins d’un parent de deuxième niveau, apparaissent notamment dans des éléments <article>. Il semble donc cohérent d’utiliser des titres à l’intérieur de ceux-ci.

Il est important de noter que de nombreux sites expérimentés en matière d’accessibilité utilisent également cette technique, ce qui peut nous rassurer quant à la méthodologie employée.

À titre d’exemple, le blog d’Access 42 s’organise de cette manière :

NB : il est tout à fait possible d’employer plutôt les attributs WAI-ARIA complémentaires role="heading" et aria-level.

Déchiffrer les guides

Génèse du code : les standards HTML

Lorsque l’on tente de rendre accessibles les contenus web, l’harmonie, voire la pureté, du HTML est l’une des armes sur lesquelles s’appuyer.

Or, au sujet des titres, les spécifications de HTML sur les sections font des titres une sorte d’instrument de navigation. Ainsi, la hiérarchisation du contenu est une sorte de carte au trésor. Ainsi, le <h1> indique par exemple l’objectif de la page consultée.

Si cette carte est incorrecte ou manquante, de nombreuses personnes, notamment celles utilisant des technologies d’assistances, seront immédiatement perdues dans la navigation.

[...] h1–h6 elements have a heading level, which is given by the number in the element's name.
[...] Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.

Règles de navigation : WCAG & RGAA

Pour rendre la navigation accessible à tous et toutes, il faut respecter un certain nombre de règles et de bonnes pratiques. Ainsi, les balises de titres (h2, h3, etc.) sont comme des latitude et de longitude sur notre page. Les titres de deuxième niveau séparent le contenu en régions claires, définissant les zones importantes, tandis que les ceux de troisième niveau aident à repérer les contenus plus précis.

Les principes du WCAG

Pour valider la bonne pratique d’organisation du contenu d’une page en section et titres, le WCAG propose une technique de vérification, résumée dans leur procédure de cette façon :

Check that a heading for each section exists.

Mais le WCAG renvoie également vers une source externe au sujet de la hiérarchisation des titres (article en anglais : How to structure headings for web accessibility) et celle-ci précise également qu’il ne faut qu’un seul h1, déterminant pour une page web :

Heading 1 is the most important and is the heading for the page, this typically corresponds to the title of the page. It gives users an indication of what the page is about – you should have a single Heading 1 on each page.

Au sujet des titres de niveau 2, il est écrit ceci :

Each heading 2 creates a section of content. They divide pages into consumable sections which help to organize the content.

En définitive, cet article nous donne un moyen de pouvoir statuer sur ce qu’est une bonne structure HTML :

When you get to the next heading, ask yourself: Is it a new section? If so then a Heading 2 would be appropriate. If it’s a sub-section of the last heading 2, then a Heading 3 would be suitable. If it’s a sub-section of the last Heading 3, then a Heading 4 would be a good fit, and so on.

De nombreux exemples(BBC, GOV.UKs), joints à l’article nous montrent qu’il est possible, et surtout logique, de bien signaler chaque section par l’emploi d’un h2. Chaque enfant de cette section est alors reconnaissable, visuellement et vocalement, par la présence de titres de troisième niveau.

Critères du RGAA

Lorsque l’on s’intéresse au Référentiel Général de l’Amélioration de l’Accessibilité, nous obtenons une nouvelle corde à notre arc de réflexion. En effet, le critère 9.1 s’intitule ainsi : « Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ? »

Il impose également de respecter la hiérarchie des titres :

Dans chaque page web, la hiérarchie entre les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-elle pertinente ?

Utiliser les bons niveaux de titre, au bon endroit, c’est donc de permettre à tout le monde de trouver chaque information aisément, en naviguant d’une façon ou d’une autre. Cela bénéficie à tous les utilisateurs et utilisatrices, utilisant ou non des technologies d’assistance.

Sensibilisation ou contrainte ?

Approche technique : la solution de repli d’Osuny

Auparavant, nous avions mis en place un système permettant de détecter la présence ou non d’un h2 dans un bloc. Si le champ de titre était laissé vide, nous ajoutions un titre masqué générique (exemple : <h2>Bloc de pages</h2>, uniquement disponible pour la navigation via les technologies d’assistance, ce qui permettait de respecter la hiérarchie des titres et la structure HTML.

Pourquoi ne pas simplement reproduire ce fonctionnement ?

Approche humaine : la prise de conscience

Au-delà des complications techniques demandées par l’ajout d’un titre par défaut, pour pallier son absence, cela signifie que les éditeurs et éditrices du site ne peuvent comprendre les enjeux qui se cachent derrière l’ajout d’un simple titre à leur page.

Ainsi, nous préférons emprunter le chemin de la sensibilisation : éduquer les contributeurs et contributrices sur l'accessibilité, grâce à des helpers dans le back-office. Cela permet d’encourager de meilleures pratiques web et de valoriser l’accessibilité web.

Cette solution est à double tranchant : cela penche en faveur d’une sensibilisation des internautes au soin de l’accessibilité, mais donne cependant la liberté aux éditeurs et éditrices des sites, en l’absence de contrainte, de respecter ou non ces règles.

Les différents cas d’usages nous permettront d’éventuellement revenir sur cette décision.

Consolidation : la gestion technique des différents cas

Éduquer les contributeurs et contributrices s’inscrit dans notre logique, mais il n’empêche que pour les sites déjà publiés, ou ceux pour lesquels les éditeurs et éditrices ne seraient pas sensibles à ces questions, nous nous devons de nous assurer de leur accessibilité.

En effet, nous souhaitons maintenir tous nos sites au même niveau d'exigence, sans régression.

Nous pouvons ainsi épauler les conseils présents dans back-office d’un système automatisé détectant la présence ou non d’un titre avant un bloc, pour permettre de déterminer si le contenu de ce dernier est un titre de second, troisième voire quatrième niveau. Le titre se met ensuite automatiquement à jour dans les blocs publiés sur le site.

Olivia Simonet

Développeuse