L’accessibilité d’un site ne s’arrête pas à la livraison du code. Et publier un contenu accessible à tous et à toutes, c’est possible : voici quelques bonnes pratiques à adopter au moyen d’extensions ou de fonctionnalités déjà existantes dans l’éditeur de blocs de WordPress que vous ne connaissez peut-être pas encore.
Les critères du RGAA (Référentiel général d’amélioration de l’accessibilité) sont indiqués pour chacune des solutions proposées.
Correctement indiquer les changements de langue au sein de votre contenu sur l’éditeur Gutenberg
Il arrive très fréquemment qu’on emploie des termes en anglais ou issus d’une autre langue dans un texte. Ce changement de langue ne sera pas vocalisé correctement, ni même indiqué dans le code. Cela risque d’être incompréhensible pour les utilisateurs et utilisatrices de technologies d’assistance comme les lecteurs d’écran. Cette recommandation fait aussi l’objet d’une règle Opquast (« Règle n° 132 – Chaque changement de langue est signalé. »)
Un exemple : l’European Accessibility Act est entré en vigueur au mois de juin 2025.
La solution
Pas de panique, aucun besoin de développer quoi que ce soit pour ça. C’est déjà intégré à WordPress, il n’y a pas besoin d’une extension ou de code personnalisé à ajouter. L’ajout de l’attribut lang dans le code HTML se fait dans l’éditeur de blocs tout simplement, via la barre d’outil en sélectionnant la portion de texte concernée.
Dans l’éditeur de blocs : barre d’outils de l’éditeur > options de formatage (plus) « Langue ».
Quelle destination : les personnes utilisant des lecteurs d’écrans et autres technologies d’assistance.
En détail : pour mieux comprendre un article très complet de Sylvie Duchateau et Flore Vannier, « Comment gérer les changements de langue pour l’accessibilité numérique ? », donne des exemples concrets. L’article date de 2024.
L’article de Jean-Baptiste « Histoire d’une fonctionnalité d’accessibilité », à l’origine de cette amélioration dans WordPress, revient sur le chemin vers l’implémentation du bouton de formatage de langue.
Le critère du RGAA concerné
Critère 8.7 du RGAA : Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
Indiquer les changements de sens de lecture pour les pages présentant du contenu multilingue
C’est sûrement un cas de figure moins fréquent que d’avoir un changement de sens de langue de droite à gauche, pour un texte principal écrit en français (de gauche à droite) par exemple. En tout cas, il est nécessaire ici aussi de l’indiquer dans le code.
La solution
Là encore c’est déjà intégré à WordPress, il n’y a pas besoin d’une extension ou de code à ajouter. L’ajout dans le code HTML se fait dans l’éditeur de blocs tout simplement, via la barre d’outil en sélectionnant la portion de texte concernée.
Dans l’éditeur de blocs : barre d’outils de l’éditeur > options de formatage (plus) « Langue » > « Direction du texte »
Le critère du RGAA concerné
Critère 8.10 du RGAA : Dans chaque page web, les changements du sens de lecture sont-ils signalés ?
Utiliser une hiérarchie des titres pertinente avec l’aide de l’éditeur Gutenberg
Une hiérarchie cohérente des titres de la page permet d’améliorer la compréhension de la personne qui lit le contenu. Et accessoirement d’optimiser la page pour le référencement. La règle 234 d’Opquast, « Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée. » couvre cette recommandation.
La solution
La cohérence de la structure de votre contenu est vérifiable grâce au panneau Structure sur la gauche au sein de l’éditeur de blocs. Vous y trouverez sous forme de liste, les titres et leur niveaux respectifs. Et pourrez ainsi vous assurer qu’aucun titre h4 par exemple, ne suit un titre h2. C’est indispensable pour les personnes naviguant à l’aide d’un clavier dans la page et lorsque les contenus sont lus par une synthèse vocale.
Dans l’éditeur de blocs : le panneau Structure sur la gauche dans l’éditeur de blocs est accessible via le bouton Vue d’ensemble du document, situé dans la barre supérieure de l’éditeur.
Quelle destination ? Les personnes utilisant des lecteurs d’écrans et autres technologies d’assistance.
Le critère du RGAA concerné
Critère 9.1 du RGAA : Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Baliser les citations dans un paragraphe pour une meilleure accessibilité
Les citations contenues dans un paragraphe (inline) doivent être balisées en utilisant l’élément HTML q pour être conforme en termes d’accessibilité. Une extension de Jean-Baptiste Audras ajoutera cette fonctionnalité dans la barre d’outil de formatage de l’éditeur de blocs.
Un exemple : Comme le disait très justement Jules César « qui veut la paix prépare la guerre »
.
nb : le bloc de citation natif est déjà balisé avec <blockquote>, donc pas d’intervention nécessaire ici.
La solution
Dans l’éditeur de blocs : barre d’outils de l’éditeur > options de formatage (plus) «
Citation en ligne »
.
Quelle destination ? Les personnes utilisant des lecteurs d’écrans et autres technologies d’assistance.
L’extension à installer : Inline Quote Format Button for the Block Editor ajoute un bouton de formatage HTML dans la barre d’outils de formatage de l’éditeur.
En détail : vous trouverez une explication fouillée de l’auteur de l’extension dans l’article « Assurer l’accessibilité des citations sur l’éditeur Gutenberg ».
Le critère du RGAA concerné
Critère 9.4 du RGAA : dans chaque page web, chaque citation est-elle correctement indiquée ?
q dans le code HTML.L’accessibilité des abréviations dans WP
On utilise beaucoup d’abréviations ou d’initiales dans les articles avec des contenus rédactionnels techniques en particulier. Une bonne pratique est d’en donner le détail ou la définition sur la première occurence dans le contenu (règle n°5 de la checklist Opquast, Règle n° 5 – La première occurrence d’une abréviation ou d’un acronyme dans le corps de chaque page donne accès à sa signification.).
L’extension à installer : Abbreviation Button for the Block Editor ajoute un nouveau bouton de formatage HTML abbr dans la barre d’outils de l’éditeur. Cet élément HTML permet de s’assurer que les abréviations soient comprises comme telles par les technologies d’assistance, en les informant que les caractères concernés constituent une abréviation et en fournissant la signification de celle-ci via l’attribut title.
Dans l’éditeur de blocs : barre d’outils de l’éditeur > options de formatage (plus) «
Abréviation »
qui vous permet de donner une définition de l’abréviation.
Quelle destination ? Les personnes utilisant des lecteurs d’écrans et autres technologies d’assistance.
Mais aussi :
- Permet d’accéder rapidement à la signification d’un sigle.
- Permet l’exploitation du contenu par un robot (pour l’établissement d’un index des sigles).
- Favorise le référencement du contenu.
Le critère des WCAG concerné
Critère 3.1.4 WCAG Abbreviations (abréviations).
abbr dans le code HTML. La description fourni la signification de l’abréviation via l’attribut title.Sources et références
95% des sites dans le monde présentent des échecs de conformité
Ce chiffre est issu d’un rapport sur l’accessibilité publié par WebAIM (Web Accessibility In Mind) « The WebAIM Million ». Cette étude, conduite depuis 6 ans, analyse chaque année un échantillon de 1 million de pages d’accueil de sites en ligne. Le rapport 2025 conclut que 94.8% des pages auditées ne sont pas conformes aux directives sur l’accessibilité des contenus en ligne.
WebAIM est un organisme à but non lucratif basé à l’université de l’Utah aux États Unis. L’organisation fournit des solutions en matière d’accessibilité. Parmi ses outils les plus connus figure le WAVE (Web Accessibility Evaluation Tool), un outil gratuit utilisable pour identifier les problèmes d’accessibilité sur les sites.
Les Web Content Accessibility Guidelines
Les Web Content Accessibility Guidelines (WCAG) sont les directives pour l’accessibilité des contenus web, soit un ensemble de recommandations publiées par le W3C (World Wide Web Consortium) pour rendre les contenus en ligne plus accessibles aux personnes handicapées.
Opquast : un projet qui nous tient à cœur !
Opquast est une entreprise à mission qui propose un référentiel, des formations et une certification de compétences dans le but de promouvoir et développer l’assurance qualité pour le numérique.
L’acronyme Opquast signifie « Open Quality Standards », normes de qualité ouvertes.
L’agence Whodunit est très impliquée dans cet écosystème. Nous sommes partenaires Opquast, nous avons élaboré un outil pour générer un inventaire des règles d’assurance qualité Opquast s’appliquant à votre projet WordPress, et nous portons les valeurs de ce projet auprès de nos clients.
Pour résumer
Grâce à l’éditeur Gutenberg, il est possible :
- d’indiquer les changements de langue dans le texte,
- d’indiquer les changements de sens de lecture dans un contenu multilingue,
- de vérifier que la hiérarchie des titres est pertinente.
En ajoutant une extension à son site il est possible de :
- baliser une citation dans un paragraphe,
- baliser une abréviation et renseigner une description.
Et ainsi vous assurer que le contenu est accessible à tous et à toutes.
Laisser un commentaire