L’accessibilité ça se travaille

Vous savez l’attention que j’essaie de porter à l’accessibilité du site. J’ai corrigé deux erreurs dont une imputable à un défaut de WordPress concernant le bouton de recherche. Je partage les solutions trouvées si jamais elles vous intéressent.

Le sous-titre de la page d’accueil revient aux couleurs standard

L’évaluation avec Ligthouse (vous faite F12 pour faire le test sur la page concernée) n’acceptait plus mon sous titre rose… Un problème de contraste qui ne m’avait pas été signalé jusque là… mais j’ai donc oublié le rose qui reprenait la couleur de la chemise du petit personnage… Et je comprends que pour des personnes ayant des difficultés visuelles, ça peut être un souci.

La loupe du bloc rechercher de WordPress n’est pas conforme

Ça faisait un moment que je voyais que l’icône loupe de WordPress posait souci.

En faisant le test avec Wave ma page d’accueil notée 10/10 tombait à 9.7/10.

Bon rien de très grave mais tout de même agaçant.

Que se passe-t-il ? L’erreur est liée à l’accessibilité, plus précisément à l’attribut aria-expanded= »false » sur un bouton qui n’a pas de contenu textuel visible ou masqué de manière accessible.

WAVE signale cela comme un problème car un bouton avec aria-expanded doit avoir un libellé clair (via aria-label ou un texte visible) pour indiquer son état et sa fonction aux technologies d’assistance (comme les lecteurs d’écran).

Je pouvais renoncer à la solution en passant au texte simple « rechercher » mais avouez que c’est moins joli. La loupe est bien connue maintenant pour signifier qu’on peut faire une recherche.

J’ai testé en cherchant à droite à gauche et même avec diverses IA. On me proposait d’ajouter un style .css ou du code .php rien ne fonctionnait. J’ai trouvé avec Mistral. Il fallait une solution honnête, c’est à dire qui ne se contente pas de leurrer le test en ligne mais insère vraiment un texte utile pour les lecteurs automatisés.

J’ai utilisé l’extension WP Code et crée un javascript :

document.addEventListener("DOMContentLoaded", function() {
    if (typeof wp !== 'undefined' && wp.domReady) {
        wp.domReady(function() {
            const searchButton = document.querySelector(".wp-block-search__button");
            if (searchButton && !searchButton.getAttribute("aria-label")) {
                searchButton.setAttribute("aria-label", "Rechercher sur le site");
            }
        });
    } else {
        // Fallback si wp.domReady n'est pas disponible
        setTimeout(function() {
            const searchButton = document.querySelector(".wp-block-search__button");
            if (searchButton && !searchButton.getAttribute("aria-label")) {
                searchButton.setAttribute("aria-label", "Rechercher sur le site");
            }
        }, 200);
    }
});

Ce dispositif permet de corriger l’erreur et dans mon cas de revenir à 10/10 sur la page d’accueil avec le test Wave.

Attention toutefois : ça ajoute une requête. Cela fait que ma page d’accueil affiche 10 requêtes et obtient un score de 87 (note A) à l‘ÉcodIndex contre 9 et 88. Ce qui n’est pas honteux non plus !

On peut se demander pourquoi WordPress ne veille pas à l’exemplarité de son CMS incitant certains à installer des plugins externes, ce qui est un peu une facilité et pèse aussi sur les sites et leur maintenance.

Voilà, c’était l’exercice du maniaque du dimanche ! Et vous déjà vécu de telles expériences ?

PS pour moi : il faudra que je pense à glisser ce code dans mon Codeberg.