L’accessibilité des boutons dans la galerie WordPress

Le bug est connu mais pas corrigé. J’avoue que ça m’agace un peu de voir WordPress négliger un problème d’accessibilité qui nuit à celles et ceux qui ne voient pas bien. Là, il s’agit de la galerie image sans texte visible ni « aria label ». J’ai trouvé une solution.

L’accessibilité, c’est aussi un devoir quand on met un site en ligne.

J’avais déjà écrit là dessus il y a un moment : j’essaie de veiller à l’accessibilité du site. En gros, il y a ce que je peux faire moi directement (comme la mise en forme du texte, le choix des couleurs) mais aussi le code ou les blocs que j’utilise pour écrire ce site.

Il y a quelques temps, j’avais bricolé pour permettre une meilleure lisibilité des commentaires.

J’ai découvert également plus récemment, ce qu’on appelle l’évaluation agentique du site, pas liée uniquement à ce point mais qui garantit qu’un lecteur vocal saura lire la page (et une IA aussi oui, je sais).

La galerie de WordPress problématique

Le problème est repéré : il est au niveau de la fonctionnalité « lightbox » des blocs Image/Galerie de Gutenberg. Le bouton lightbox-trigger n’a pas d’attribut aria-label statique dans le HTML servi . Du coup les tests avec les auditeurs d’accessibilité comme WAVE ou Lighthouse voient un bouton totalement vide de texte accessible. Ça faisait bien « baisser la note »

J’ai trouvé des pistes dans Github : https://github.com/WordPress/gutenberg/issues/79380

Après recherches et tests, j’ai appliqué un bout de code que j’utilise par l’application WP Code. C’est un extrait Javascript.

/**
 * Correction aria-label boutons Lightbox
 * Compatible Twenty Twenty-Five + Twentig + Interactivity API
 */
function fixLightboxAria() {
    document.querySelectorAll('button.lightbox-trigger').forEach(function(button) {
        const figure = button.closest('figure.wp-block-image');
        const img = figure ? figure.querySelector('img') : null;

        if (img && img.alt && img.alt.trim() !== '') {
            const label = `Ouvrir en grand : ${img.alt.trim()}`;
            button.setAttribute('aria-label', label);
        } else {
            button.setAttribute('aria-label', 'Ouvrir l\'image en grand');
        }
    });
}

// Première exécution
document.addEventListener('DOMContentLoaded', fixLightboxAria);

// Suivi des ajouts dynamiques (Interactivity API)
const observer = new MutationObserver(fixLightboxAria);
observer.observe(document.documentElement, { 
    childList: true, 
    subtree: true 
});

La « note » est repassée à 100% avec Ligthouse même si par ailleurs pour les performances, il faut veiller au bon format des images notamment pour mobile.

Plus de vidéo ? Plus d’images ?

Parfois j’en serais à me dire qu’il faut abandonner l’idée de diffuser des images ou des vidéos. J’ai eu l’autre jour à traiter la question des vidéos PeerTube.

La question des images dont il faut choisir un format adapté reste à mes yeux très mal traitée. WordPress délègue ça à des plugins ou alors il faut savoir adapter les images avant de les charger. De nombreux sites mangent de la bande passante. Sans compter l’absence de de description des images.

---

Au lieu de courir après l’IA, il me semble qu’un CMS devrait s’attacher à la lisibilité, l’accessibilité, la légèreté. J’ai le temps de bricoler, mais quid des personnes qui ne le peuvent ?