WordPress et accessibilité : comment enrichir la structure d’un article ?

Précision : les indications données dans ces articles sont basées sur l’éditeur classique et l’éditeur Gutenberg de la version 6.1.1 de WordPress.
De plus, nous parlons ici plus précisément du CMS WordPress, mais toutes les recommandations présentes dans cette série d’articles sont des principes d’accessibilité que l’on doit respecter, que l’on utilise un CMS, ou pas.

Les technologies d’assistance, notamment les lecteurs d’écran, offrent de nombreux raccourcis clavier afin de faciliter et d’accélérer l’accès aux contenus. Les éléments de structure comme les titres, les listes, les citations et les paragraphes ont chacun une sémantique particulière et sont atteignables avec des raccourcis clavier dédiés.

Il est donc essentiel d’utiliser les éléments de structure à votre disposition à bon escient et de ne pas les détourner de leur fonction première.

Définir une hiérarchie de titres cohérente

Les personnes aveugles naviguent très souvent avec leur lecteur d’écran en s’appuyant sur les titres pour aller directement à la section qui les intéresse.

C’est pour cette raison qu’il faut veiller à définir un titrage correct lors de la rédaction d’un article, c’est-à-dire structurer les titres nécessaires et avoir une hiérarchie des titres cohérente.

Il existe 6 niveaux de titres : h1, h2, h3, h4, h5, h6. Ces 6 niveaux de titres sont présents dans l’éditeur WordPress.

Note : l’affichage de ces titres est différent selon que vous utilisez l’éditeur Gutenberg ou l’éditeur classique.

Pour en savoir plus sur la création d’une bonne hiérarchie de titres, je vous renvoie à notre article WordPress et accessibilité : bien structurer les modèles de pages de son thème, dans la partie « Titres et hiérarchie de titres ».

Note: l’extension HeadingsMaps, disponible sur Firefox et Chrome, est très simple d’utilisation. Elle permet d’afficher en un clic toute la structure de la page afin de vérifier l’arborescence des titres d’une page web.

Référence RGAA4

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

Créer une distinction nette entre des éléments grâce aux listes

Utiliser des listes dans vos articles et vos pages WordPress présente de nombreux avantages pour l’accessibilité.

En effet, parmi les raccourcis fournis par un lecteur d’écran, il en existe pour naviguer de liste en liste et d’item de liste en item de liste. Le lecteur d’écran peut aussi restituer le nombre d’items présents dans chaque liste.

D’autre part, quand plusieurs liens se succèdent, les structurer dans une liste permet aux personnes se servant d’un lecteur d’écran de faire une distinction nette entre chaque lien.

Cela leur permet de ne pas confondre le lien précédent avec le lien suivant, en particulier si le lecteur d’écran interrompt la restitution au mauvais moment (cela arrive !).

Comment structurer une liste dans WordPress ?

Pour structurer une suite de phrases ou une suite de liens dans une liste, il existe deux façons de faire :

• les listes ordonnées: pour avoir un ordre hiérarchique des contenus. Une liste ordonnée est pertinente pour structurer les étapes d’une recette de cuisine, par exemple, parce que l’ordre des étapes est important ;
• les listes non ordonnées: pour toutes les autres listes dont l’ordre des items n’a pas d’importance.

Dans WordPress, ces deux options sont disponibles dans l’éditeur de contenus.

Référence RGAA 4

• [Critère 9.3 A] Dans chaque page web, chaque liste est-elle correctement structurée ?

Structurer les blocs de citations

La structuration correcte des citations permet aux lecteurs d’écran d’indiquer qu’il s’agit bien d’un contenu cité et non d’un contenu écrit par l’auteur ou l’autrice de la page.

Il existe deux formes de structuration des citations :

• le bloc de citation ;
• la citation en ligne, généralement utilisée pour des citations, présentes au sein d’un paragraphe.

Comment insérer une citation dans WordPress ?

Dans WordPress, il est possible de déclarer une citation en bloc (blockquote) avec le bouton « Bloc de citation ».

La mise en page du bloc de citation diffère en fonction de la charte graphique. Celui-ci est souvent mis en exergue par rapport au corps de l’article.

Note : il n’est pas possible d’ajouter une citation en ligne avec les deux éditeurs de WordPress. Il est nécessaire de vous adresser à l’équipe technique afin de procéder à des adaptations du CMS.

Référence RGAA 4

• [Critère 9.4 A] Dans chaque page web, chaque citation est-elle correctement indiquée ?

Ne jamais détourner les éléments de structuration

Les éléments de structuration sont souvent utilisés pour leur apparence à des fins de mise en forme. Il s’agit d’une pratique à proscrire absolument.

Ainsi, vous ne devez pas utiliser de bloc de citation pour mettre en avant des passages de texte qui n’en sont pas. Il en va de même pour les styles de titres ou les items de listes.

Prenez soin, lors de la rédaction de vos articles, de ne pas ajouter des sauts de ligne pour créer des marges.

En effet, cela pourrait par exemple générer un titre vide par erreur, ce qui détériorerait la bonne structure de votre article et gênerait le déplacement de titre en titre pour les personnes qui se servent d’un lecteur d’écran.

Évitez également d’ajouter plusieurs sauts de ligne vides à la suite avec les touches « Entrée » ou des marges avec « Espace » entre deux contenus pour ne pas créer de paragraphes vides. En effet, cela serait restitué comme « Vide » par les lecteurs d’écran, ce qui n’est pas pertinent et peut, à la longue, gêner la navigation.

C’est d’ailleurs pour cela que les paragraphes vides constituent une non-conformité pour le RGAA.

Il est désormais possible, grâce à l’éditeur Gutenberg, de voir si des titres ou des paragraphes vides sont présents dans votre article. En effet, lors de la saisie, ceux-ci sont signalés en gris clair.

Retenez que si le rendu visuel de vos contenus ne vous plait pas ou que vous avez besoin d’autres effets de mise en forme, il faudra alors demander des adaptations à l’équipe technique et ne pas chercher à détourner la sémantique des balises pour ajouter des marges.

Référence RGAA 4

• [Critère 8.9 A] Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?

Conclusion

En respectant les niveaux de titres et en structurant tous les textes dans des paragraphes, vous permettez aux personnes handicapées d’accéder plus facilement et plus vite à toute l’information textuelle de votre site.

Pensez aussi à définir toutes vos suites de contenus dans des listes et à indiquer les textes cités au moyen de citations HTML en bonne et due forme.