0Pricing
Vue Academy · Lezione

Addon di Storybook e test di accessibilità

@storybook/addon-a11y, addon viewport, addon docs per la documentazione automatica.

Addon di Storybook e test di accessibilità è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Estendere Storybook con gli addon

Gli addon aggiungono pannelli e strumenti extra a Storybook. Oltre a Controls e Actions, gli addon gestiscono accessibilità, viewport responsive e documentazione generata automaticamente.

L'addon per l'accessibilità

@storybook/addon-a11y esegue il motore axe-core su ogni story e segnala le violazioni delle WCAG, come problemi di contrasto, etichette mancanti e ruoli non corretti, direttamente in un pannello.

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

Registrazione di un addon

Aggiunga l'addon all'array addons in .storybook/main.ts. Riavvii Storybook per caricarlo.

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

Lettura del pannello a11y

Apra una story e controlli la scheda Accessibilità. Ogni risultato è raggruppato in Violazioni (da correggere), Superati e Incompleti (richiedono una revisione manuale). Facendo clic su una violazione, l'elemento viene evidenziato.

Violazioni comuni rilevate

  • Contrasto cromatico insufficiente tra testo e sfondo.
  • Pulsanti o link privi di nomi accessibili.
  • Immagini prive di testo alt.
  • Campi di input dei moduli privi di etichette associate.

Rilevare questi problemi in isolamento è molto meno costoso che farlo dopo il rilascio.

Configurazione a11y per story

Può personalizzare le regole per ogni story tramite i parametri, ad esempio disabilitando una regola gestita altrove oppure indicando quali elementi ignorare.

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

L'addon viewport

L'addon viewport (parte di essentials) consente di visualizzare una story a diverse dimensioni dei dispositivi, come mobile, tablet e desktop, per verificare i breakpoint responsive.

Scelta di un viewport

Un menu a discesa nella barra degli strumenti imposta il canvas su dimensioni predefinite dei dispositivi. Può anche impostare un viewport predefinito per ogni story.

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

Viewport personalizzati

Definisca i Suoi breakpoint in preview.ts per adattarli alle larghezze esatte del Suo design system.

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

L'addon Docs

@storybook/addon-docs gestisce la documentazione generata automaticamente. In combinazione con tags: ["autodocs"], produce una pagina Docs per ogni componente a partire da props e story.

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

Documentazione sempre aggiornata

Poiché la documentazione viene generata da componenti e story reali, non può diventare obsoleta. Le tabelle delle props riflettono le definizioni effettive delle props e gli esempi sono le story interattive.

Verifica rapida

Verifichi la Sua comprensione degli addon di Storybook.

Riepilogo

Ha imparato a usare gli addon principali di Storybook:

  • @storybook/addon-a11y segnala le violazioni WCAG per ogni story (contrasto, etichette e ruoli) e può essere configurato per ogni story.
  • L'addon viewport visualizza i breakpoint responsive con dimensioni predefinite o personalizzate.
  • @storybook/addon-docs, insieme a tags: ["autodocs"], genera automaticamente una documentazione sempre aggiornata a partire da props e story.
  • Registri gli addon nell'array addons di main.ts.

Domande Frequenti

La lezione «Addon di Storybook e test di accessibilità» è gratuita?

Sì — il testo completo di «Addon di Storybook e test di accessibilità» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Addon di Storybook e test di accessibilità»?

@storybook/addon-a11y, addon viewport, addon docs per la documentazione automatica. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Addon di Storybook e test di accessibilità»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Storybook per Vue 3
  2. Scrittura delle storie dei componenti
  3. Controls, Actions e Args
  4. Addon di Storybook e test di accessibilità
← Torna a Vue Academy