npx storybook@latest add @storybook/addon-a11y : une commande suffit à ajouter un panneau d’audit d’accessibilité directement dans l’environnement où une équipe développe déjà ses blocs Gutenberg personnalisés, composant par composant, avant même de les assembler dans un thème complet.
Ce texte ne traite pas de l’audit du thème qui affiche ensuite ces blocs en front, sujet distinct, mais de la configuration de l’addon sur les composants React qui constituent l’éditeur de chaque bloc, dans un contexte de bibliothèque partagée entre plusieurs projets.
Pourquoi isoler le bloc plutôt que d’attendre le thème final
Une bibliothèque de blocs personnalisés, une fois publiée en paquet npm interne, se retrouve consommée par plusieurs thèmes différents, chacun avec son propre habillage visuel. Attendre l’intégration finale dans un thème pour détecter un défaut d’accessibilité revient à découvrir le problème une fois multiplié par le nombre de projets consommateurs, bien après la publication du paquet.
Storybook permet de rendre chaque bloc isolément, dans plusieurs états (vide, rempli, en erreur de validation), et de faire tourner l’addon a11y sur chacun de ces états sans dépendre du thème qui l’accueillera ensuite.
Configurer l’addon sur une story de bloc Gutenberg
Chaque bloc personnalisé dispose généralement d’un fichier de story qui décrit ses différentes configurations possibles. L’addon a11y analyse automatiquement le rendu de chaque story affichée, sans configuration supplémentaire dans le cas le plus simple.
// blocs/carte-evenement/carte-evenement.stories.js
export default {
title: 'Blocs/Carte événement',
component: CarteEvenement,
};
export const Rempli = {
args: {
titre: 'Conférence accessibilité',
date: '2023-11-14',
lieu: 'Salle 3',
},
};
export const SansDate = {
args: { titre: 'Atelier ouvert', date: '', lieu: 'Hall principal' },
};
Le panneau « Accessibility » apparaît alors sous l’aperçu du composant, avec la liste des violations détectées, classées par gravité, et un bouton pour surligner directement l’élément fautif dans l’aperçu du bloc.
Fixer un seuil de non-régression par bloc
Storybook permet de faire échouer le build en mode test si une story ne respecte pas les règles configurées de l’addon a11y. Sur une bibliothèque partagée, il vaut mieux fixer ce seuil bloc par bloc plutôt que globalement : un nouveau bloc en cours de stabilisation peut tolérer temporairement des avertissements mineurs sans bloquer l’ensemble du pipeline de publication du paquet.
// .storybook/test-runner.js
module.exports = {
async postVisit(page, context) {
const resultats = await getA11yResults(page);
const critiques = resultats.violations.filter(
v => v.impact === 'critical'
);
if (critiques.length > 0) {
throw new Error(`Violations critiques sur ${context.title}`);
}
},
};
Tester les états dynamiques, pas seulement le rendu initial
Un bloc « Onglets » ou « Accordéon » change de structure DOM à l’interaction. Une story statique ne capture que l’état initial, ce qui laisse passer des défauts qui n’apparaissent qu’après un clic. Utilisez les interactions Storybook pour simuler l’ouverture d’un onglet avant de lancer l’analyse d’accessibilité sur l’état résultant.
- Une story par état significatif du bloc, pas uniquement l’état par défaut
- Un seuil de tolérance ajusté par bloc, documenté dans son fichier de story
- Des interactions simulées avant analyse sur les blocs à comportement dynamique
Partager les résultats avec les équipes consommatrices du paquet
Publiez un rapport d’accessibilité généré automatiquement à chaque version du paquet de blocs, listant les composants conformes et ceux encore en travaux. Les équipes qui consomment la bibliothèque dans leurs propres thèmes savent ainsi précisément quels blocs nécessitent une vérification supplémentaire une fois intégrés dans leur contexte visuel particulier.
Un bloc audité isolément dans Storybook élimine l’essentiel des défauts structurels avant même sa première intégration dans un thème réel.
En résumé
L’addon a11y de Storybook permet d’auditer chaque bloc Gutenberg personnalisé indépendamment du thème qui l’affichera, avec un seuil de non-régression ajusté par composant et une couverture des états dynamiques grâce aux interactions simulées.
