Vue Academy · Leçon

Modules complémentaires Storybook et tests d’accessibilité

@storybook/addon-a11y, module complémentaire viewport et module docs pour la documentation automatique

Modules complémentaires Storybook et tests d’accessibilité est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Étendre Storybook avec des extensions

Les extensions ajoutent des panneaux et des outils à Storybook. Au-delà des contrôles et des actions, elles prennent en charge l’accessibilité, les affichages adaptés aux différentes tailles d’écran et la documentation générée automatiquement.

L’extension d’accessibilité

@storybook/addon-a11y exécute le moteur axe-core sur chaque récit et signale les violations des règles WCAG — problèmes de contraste, libellés manquants et rôles incorrects — directement dans un panneau.

// terminal
// npm install -D @storybook/addon-a11y

Enregistrer une extension

Ajoutez l’extension au tableau addons dans .storybook/main.ts. Redémarrez Storybook pour la charger.

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

Lire le panneau d’accessibilité

Ouvrez un récit et consultez l’onglet Accessibilité. Chaque résultat est regroupé : Violations (à corriger), Réussites et Incomplet (nécessite une vérification manuelle). Cliquez sur une violation pour mettre l’élément en évidence.

Violations courantes détectées

Contraste de couleurs insuffisant entre le texte et l’arrière-plan.
Boutons ou liens sans nom accessible.
Images sans texte alt.
Champs de formulaire sans libellé associé.

Détecter ces problèmes de manière isolée coûte bien moins cher qu’après la mise en production.

Configuration d’accessibilité par récit

Vous pouvez ajuster les règles pour chaque récit à l’aide des paramètres : par exemple, désactiver une règle que vous gérez ailleurs ou indiquer les éléments à ignorer.

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

L’extension viewport

L’extension viewport (incluse dans les extensions essentielles) vous permet de prévisualiser un récit à différentes tailles d’appareil — Mobile, tablette et ordinateur de bureau — afin de vérifier les points de rupture adaptatifs.

Choisir un viewport

Une liste déroulante de la barre d’outils adapte le canevas à des cadres d’appareils prédéfinis. Vous pouvez également définir un viewport par défaut pour chaque récit.

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

Viewports personnalisés

Définissez vos propres points de rupture dans preview.ts pour les faire correspondre aux largeurs exactes de votre système de conception.

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

L’extension de documentation

@storybook/addon-docs alimente la documentation générée automatiquement. Associée à tags: ["autodocs"], elle produit une page de documentation par composant à partir de ses propriétés et de ses récits.

export default {
  component: Card,
  tags: ["autodocs"],
}

Une documentation toujours à jour

Comme la documentation est générée à partir de composants et de récits réels, elle ne peut pas devenir obsolète. Les tableaux de propriétés reflètent les définitions réelles des propriétés et les exemples sont les récits interactifs.

Vérification rapide

Vérifiez votre compréhension des extensions de Storybook.

Récapitulatif

Vous avez découvert les principales extensions de Storybook :

@storybook/addon-a11y signale les violations WCAG pour chaque récit (contraste, libellés et rôles) et peut être ajustée pour chaque récit.
L’extension viewport prévisualise les points de rupture adaptatifs avec des tailles prédéfinies ou personnalisées.
@storybook/addon-docs, avec tags: ["autodocs"], génère automatiquement une documentation toujours à jour à partir des propriétés et des récits.
Enregistrez les extensions dans le tableau addons de main.ts.

Questions Fréquemment Posées

La leçon « Modules complémentaires Storybook et tests d’accessibilité » est-elle gratuite ?

Oui — le texte complet de « Modules complémentaires Storybook et tests d’accessibilité » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modules complémentaires Storybook et tests d’accessibilité » ?

@storybook/addon-a11y, module complémentaire viewport et module docs pour la documentation automatique Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Modules complémentaires Storybook et tests d’accessibilité » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer Storybook pour Vue 3
Écrire des stories de composants
Contrôles, actions et args
Modules complémentaires Storybook et tests d’accessibilité

← Retour à Vue Academy