Ajouter des attributs ARIA sur WordPress avec Gutenberg

Il y a des sujets qui semblent techniques, presque intimidants au premier abord, et qui pourtant cachent un enjeu essentiel. Les attributs ARIA font clairement partie de ceux‑là. On en entend souvent parler quand on s’intéresse à l’accessibilité web, mais dès que l’on ouvre WordPress et l’éditeur Gutenberg, tout se complique. On ajoute un attribut Aria, on enregistre… et il disparaît. Frustrant, non ?

• Comprendre pourquoi Gutenberg supprime ou bloque certains attributs ARIA, afin d’arrêter de perdre du temps.
• Savoir ajouter des attributs ARIA sur WordPress de manière fiable, durable et compatible avec l’éditeur Gutenberg.
• Améliorer concrètement l’accessibilité de son site pour tous les utilisateurs.

Si vous avez déjà vécu ce moment où vous pensiez bien faire pour l’accessibilité de votre site, avant de voir Gutenberg « nettoyer » votre code sans vous demander votre avis, rassurez‑vous : vous n’êtes pas seul. C’est même l’une des problématiques les plus fréquentes quand on débute avec ARIA sur WordPress.

Dans ce guide complet, nous allons prendre le temps de comprendre pourquoi cela arrive, comment Gutenberg fonctionne réellement, et surtout comment ajouter des attributs ARIA sur WordPress de façon propre, durable et compatible avec l’éditeur de blocs. L’objectif est simple : que vous puissiez améliorer l’accessibilité de votre site sans vous battre contre l’outil.

Comprendre ce que sont les attributs ARIA

Avant d’entrer dans le vif du sujet, faisons un pas en arrière. Les attributs ARIA, pour Accessible Rich Internet Applications, sont des attributs HTML conçus pour aider les technologies d’assistance, comme les lecteurs d’écran, à mieux comprendre le contenu d’une page.

Pour en savoir plus : Les attributs ARIA en HTML : rendre le web accessible à tous

Concrètement, ARIA sert à donner du sens là où le HTML seul ne suffit pas. Par exemple, un bouton visuellement clair pour un utilisateur voyant peut être ambigu pour un lecteur d’écran s’il n’est pas correctement décrit. Un simple aria-label="Ouvrir le menu" peut alors faire toute la différence.

Il est important de comprendre une chose dès le départ. ARIA n’est pas là pour remplacer le HTML sémantique. Il vient en complément. Quand une balise native fait le travail, elle doit toujours être privilégiée. ARIA intervient quand le HTML atteint ses limites.

C’est précisément ce point qui explique une partie des problèmes rencontrés avec Gutenberg.

Pourquoi les attributs ARIA posent problème avec Gutenberg

Gutenberg n’est pas un simple éditeur de texte. C’est un éditeur de blocs qui repose sur une structure très contrôlée. Chaque bloc possède une liste précise d’attributs autorisés. Tout ce qui sort de ce cadre est considéré comme suspect ou inutile.

Lorsque vous passez en mode HTML et que vous ajoutez manuellement un attribut ARIA sur un bloc standard, Gutenberg peut décider de le supprimer au prochain enregistrement. Ce n’est pas un bug, mais un mécanisme de sécurité et de cohérence. L’éditeur cherche à éviter les erreurs, les attributs invalides et les mauvaises pratiques.

Il y a aussi une autre raison, plus subtile. WordPress part du principe que beaucoup d’attributs ARIA sont mal utilisés. Trop souvent, ils dupliquent des informations déjà présentes ou contredisent le HTML natif. Gutenberg préfère donc limiter leur usage plutôt que de laisser tout passer.

Lors de mes premières tentatives d’optimisation de l’accessibilité sur un site WordPress, j’avais ajouté consciencieusement des role="navigation" sur toutes mes balises <nav>. Tout semblait parfait… jusqu’à ce que je découvre que ces rôles étaient inutiles, voire déconseillés. Gutenberg les supprimait, et pour une fois, il avait raison.

Comprendre ce fonctionnement est essentiel. Cela permet d’arrêter de lutter contre Gutenberg et de commencer à travailler avec lui.

Méthode 1 : utiliser le champ « Attributs HTML supplémentaires »

C’est la méthode la plus simple, la plus propre et la plus adaptée aux débutants. Beaucoup de personnes passent à côté, alors qu’elle est intégrée nativement à Gutenberg.

Lorsque vous sélectionnez un bloc dans l’éditeur, un panneau « Avancé » apparaît dans la colonne de droite. À l’intérieur, vous trouverez un champ nommé « Attributs HTML supplémentaires ». Ce champ permet d’ajouter des attributs personnalisés sans casser la structure du bloc.

Prenons un exemple concret. Vous avez un bouton qui ouvre un menu ou une fenêtre modale. Visuellement, tout est clair, mais pour un lecteur d’écran, l’action reste floue.

Dans le champ « Attributs HTML supplémentaires », vous pouvez écrire :

aria-label="Ouvrir le menu"
aria-expanded="false"

Gutenberg va conserver ces attributs et les intégrer correctement au HTML généré. Aucun risque qu’ils disparaissent à l’enregistrement.

Cette méthode fonctionne parfaitement pour les attributs ARIA les plus courants, comme aria-label, aria-hidden, aria-expandedou aria-current. Elle est idéale pour une gestion éditoriale, accessible même sans connaissances techniques avancées.

Malheureusement, cette technique ne fonctionne pas avec tous les éditeurs Guntenberg …

Méthode 2 : utiliser un bloc HTML personnalisé

Parfois, le champ des attributs supplémentaires ne suffit pas ou ne fonctionne pas. C’est notamment le cas quand vous avez besoin d’un contrôle total sur la structure HTML.

Le bloc « HTML personnalisé » permet d’écrire votre code à la main. Vous pouvez alors ajouter librement tous les attributs ARIA nécessaires.

Voici un exemple simple pour une navigation secondaire :

<nav aria-label="Navigation secondaire">
    <a href="#contenu">Aller au contenu</a>
</nav>

Cette méthode est très fiable, car Gutenberg n’essaie pas d’interpréter ou de modifier le contenu du bloc HTML. En revanche, elle demande un peu plus de rigueur. Une erreur de balisage peut casser l’affichage ou nuire à l’accessibilité.

Elle reste toutefois une excellente solution pour des cas précis, notamment quand vous suivez une recommandation WCAG très spécifique.

Méthode 3 : automatiser les attributs ARIA avec PHP

Lorsque votre site commence à prendre de l’ampleur, ajouter manuellement des attributs ARIA bloc par bloc devient vite fastidieux. C’est souvent à ce moment-là que l’on découvre la vraie puissance de WordPress. Grâce à ses filtres, il est possible d’ajouter ou de modifier des attributs ARIA automatiquement, sans toucher au contenu éditorial.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Gutenberg génère le HTML final de chaque bloc au moment de l’affichage. WordPress propose un filtre nommé render_block qui permet d’intercepter ce HTML avant qu’il ne soit envoyé au navigateur. C’est l’endroit idéal pour agir proprement.

Prenons un cas très courant. Une image décorative, sans texte alternatif, ne devrait pas être lue par un lecteur d’écran. Plutôt que de demander à chaque rédacteur d’ajouter un attribut ARIA, on peut automatiser le processus.

Voici un exemple simple à placer dans le fichier functions.php de votre thème ou, mieux encore, dans un petit plugin maison :

add_filter('render_block', function ($block_content, $block) {
    if ($block['blockName'] === 'core/image') {
        if (strpos($block_content, 'alt=""') !== false) {
            $block_content = str_replace('<img', '<img aria-hidden="true"', $block_content);
        }
    }
    return $block_content;
}, 10, 2);

Ce code détecte les blocs image sans texte alternatif et ajoute automatiquement aria-hidden="true". Le résultat est transparent pour l’éditeur, mais très bénéfique pour l’accessibilité.

Cette approche est idéale pour appliquer des règles globales et cohérentes. Elle demande un peu de PHP, mais reste accessible même à un débutant qui suit le code ligne par ligne.

Méthode 4 : améliorer l’accessibilité des menus WordPress

Les menus sont un élément clé de l’accessibilité. WordPress génère déjà une structure correcte, mais certains attributs ARIA utiles ne sont pas ajoutés par défaut.

Un exemple fréquent concerne la page courante. Les lecteurs d’écran peuvent annoncer plus clairement la navigation si l’élément actif est identifié avec aria-current="page".

Toujours dans le fichier functions.php de votre theme, voici comment ajouter automatiquement cet attribut aux menus WordPress :

add_filter('nav_menu_link_attributes', function ($atts, $item) {
    if (in_array('current-menu-item', $item->classes)) {
        $atts['aria-current'] = 'page';
    }
    return $atts;
}, 10, 2);

Ce code analyse les classes CSS générées par WordPress et ajoute l’attribut ARIA uniquement lorsque cela a du sens. C’est exactement l’esprit d’une bonne implémentation ARIA.

Méthode 5 : gérer les attributs ARIA dans les formulaires

Les formulaires sont souvent une source de confusion pour les utilisateurs de lecteurs d’écran. Heureusement, quelques attributs ARIA bien placés peuvent grandement améliorer l’expérience.

Prenons un champ obligatoire. Visuellement, une petite étoile suffit. Mais pour un lecteur d’écran, l’information doit être explicite.

Dans un bloc HTML ou via les attributs supplémentaires de Gutenberg, vous pouvez écrire :

<input type="email" aria-required="true" aria-describedby="email-help">
<p id="email-help">Adresse utilisée uniquement pour vous répondre.</p>

L’attribut aria-describedby permet de lier un champ à une aide textuelle. Le lecteur d’écran lira cette information automatiquement, ce qui évite toute ambiguïté.

Extensions légères pour gérer ARIA sur WordPress

Si vous préférez éviter le code, certaines extensions peuvent vous aider à améliorer l’accessibilité et la gestion des attributs ARIA sur WordPress. Il est important de rester prudent et de choisir des solutions légères.

Parmi les plus connues, WP Accessibility se distingue par sa sobriété. Elle ajoute automatiquement plusieurs améliorations ARIA, notamment sur les formulaires et la navigation, sans surcharger le site.

Une autre extension intéressante est Accessibility Checker. Elle ne modifie pas directement le HTML, mais signale les problèmes ARIA et d’accessibilité dans l’éditeur. C’est un excellent outil pédagogique pour progresser.

Enfin, One Click Accessibility ajoute des fonctionnalités utiles comme des liens d’évitement et des ajustements ARIA simples, tout en restant compatible avec Gutenberg.

Quelle que soit l’extension choisie, gardez à l’esprit qu’aucun plugin ne remplace une bonne compréhension des principes d’ARIA.

Les erreurs courantes à éviter absolument

Quand on découvre ARIA sur WordPress, il est tentant d’en ajouter partout. C’est souvent une mauvaise idée. Ajouter un rôle ARIA inutile sur une balise sémantique peut dégrader l’accessibilité au lieu de l’améliorer.

Il faut également éviter les attributs contradictoires, comme un aria-hidden="true" sur un élément interactif. Ce genre d’erreur peut rendre un contenu totalement inaccessible.

Enfin, ne cherchez pas à corriger l’accessibilité uniquement avec ARIA. Un bon HTML, clair et sémantique, reste la base de tout site accessible.

Ajouter des attributs ARIA sur WordPress, surtout avec Gutenberg, peut sembler complexe au départ. Pourtant, une fois que l’on comprend la logique de l’éditeur de blocs, tout devient plus fluide. Gutenberg ne bloque pas ARIA par caprice. Il cherche à protéger la structure et la cohérence du contenu.

En combinant les outils natifs de l’éditeur, quelques filtres PHP bien placés et, si nécessaire, une extension légère, vous pouvez améliorer significativement l’accessibilité de votre site sans le rendre plus fragile. C’est un investissement qui profite à tous les utilisateurs, pas seulement aux personnes en situation de handicap.

L’accessibilité n’est pas une contrainte technique. C’est une manière plus humaine de concevoir le web. Et une fois que vous aurez pris l’habitude d’utiliser ARIA correctement sur WordPress, vous verrez que ce réflexe devient naturel, presque évident.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr