Storybook-Addons und Accessibility-Tests
@storybook/addon-a11y, Viewport-Addon und Docs-Addon zur automatischen Dokumentation
Storybook-Addons und Accessibility-Tests ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Storybook mit Addons erweitern
Addons binden zusätzliche Panels und Werkzeuge in Storybook ein. Neben Controls und Actions decken Addons auch Barrierefreiheit, responsive Viewports und automatisch generierte Dokumentation ab.
Das Accessibility-Addon
@storybook/addon-a11y führt die axe-core-Engine für jede Story aus und meldet WCAG-Verstöße – etwa Kontrastprobleme, fehlende Beschriftungen oder ungültige Rollen – direkt in einem Panel.
// terminal
// npm install -D @storybook/addon-a11yEin Addon registrieren
Fügen Sie das Addon dem addons-Array in .storybook/main.ts hinzu. Starten Sie Storybook neu, damit es geladen wird.
// .storybook/main.ts
const config = {
addons: [
"@storybook/addon-essentials",
"@storybook/addon-a11y",
],
}Das a11y-Panel lesen
Öffnen Sie eine Story und wählen Sie den Tab „Accessibility“. Jedes Ergebnis ist gruppiert: Violations (müssen behoben werden), Passes und Incomplete (erfordern eine manuelle Prüfung). Wenn Sie auf einen Verstoß klicken, wird das Element hervorgehoben.
Häufige Verstöße, die erkannt werden
- Unzureichender Farbkontrast zwischen Text und Hintergrund.
- Buttons oder Links ohne zugängliche Namen.
- Bilder ohne
alt-Text. - Formulareingaben ohne zugehörige Beschriftungen.
Wenn Sie diese Probleme isoliert erkennen, ist ihre Behebung deutlich günstiger als nach der Veröffentlichung.
a11y-Konfiguration pro Story
Sie können die Regeln pro Story über Parameter anpassen – beispielsweise eine Regel deaktivieren, die Sie an anderer Stelle behandeln, oder Elemente zum Überspringen markieren.
export const NoContrastCheck = {
parameters: {
a11y: {
config: {
rules: [{ id: "color-contrast", enabled: false }],
},
},
},
}Das Viewport-Addon
Mit dem viewport-Addon (Bestandteil von Essentials) können Sie eine Story bei verschiedenen Gerätegrößen – auf Mobilgeräten, Tablets und Desktops – anzeigen, um responsive Breakpoints zu überprüfen.
Einen Viewport auswählen
Über ein Dropdown-Menü in der Toolbar wechseln Sie die Canvas-Ansicht zu vordefinierten Gerätegrößen. Sie können außerdem pro Story einen Standard-Viewport festlegen.
export const Mobile = {
parameters: {
viewport: { defaultViewport: "mobile1" },
},
}Benutzerdefinierte Viewports
Definieren Sie eigene Breakpoints in preview.ts, damit sie genau den Breiten Ihres Designsystems entsprechen.
// .storybook/preview.ts
const preview = {
parameters: {
viewport: {
viewports: {
tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
},
},
},
}Das Docs-Addon
@storybook/addon-docs bildet die Grundlage für die automatisch generierte Dokumentation. Zusammen mit tags: ["autodocs"] erstellt es aus Props und Stories eine Docs-Seite für jede Komponente.
export default {
component: Card,
tags: ["autodocs"],
}Dokumentation, die aktuell bleibt
Da die Dokumentation aus echten Komponenten und Stories generiert wird, kann sie nicht veralten. Prop-Tabellen spiegeln die tatsächlichen Prop-Definitionen wider, und Beispiele sind die Live-Stories.
Kurzer Check
Überprüfen Sie Ihr Verständnis der Storybook-Addons.
Zusammenfassung
Sie haben wichtige Storybook-Addons kennengelernt:
@storybook/addon-a11ymeldet WCAG-Verstöße pro Story (Kontrast, Beschriftungen und Rollen) und kann pro Story angepasst werden.- Das viewport-Addon zeigt responsive Breakpoints mit vordefinierten oder benutzerdefinierten Größen an.
@storybook/addon-docsgeneriert mittags: ["autodocs"]automatisch eine stets aktuelle Dokumentation aus Props und Stories.- Registrieren Sie Addons im
addons-Array vonmain.ts.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Storybook-Addons und Accessibility-Tests“ kostenlos?
Ja — der vollständige Text von „Storybook-Addons und Accessibility-Tests“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Storybook-Addons und Accessibility-Tests“?
@storybook/addon-a11y, Viewport-Addon und Docs-Addon zur automatischen Dokumentation Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Storybook-Addons und Accessibility-Tests“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Storybook für Vue 3 einrichten
- Komponenten-Stories schreiben
- Controls, Actions und Args
- Storybook-Addons und Accessibility-Tests