Addons de Storybook y pruebas de accesibilidad
@storybook/addon-a11y, addon de viewport y addon de docs para generar documentación automáticamente
Addons de Storybook y pruebas de accesibilidad es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Ampliación de Storybook con addons
Los addons incorporan paneles y herramientas adicionales a Storybook. Además de Controls y Actions, ofrecen funciones de accesibilidad, viewports adaptables y documentación autogenerada.
El addon de accesibilidad
@storybook/addon-a11y ejecuta el motor axe-core en cada story e informa de las infracciones de WCAG, como problemas de contraste, etiquetas ausentes o roles incorrectos, directamente en un panel.
// terminal
// npm install -D @storybook/addon-a11yRegistro de un addon
Añada el addon al arreglo addons de .storybook/main.ts. Reinicie Storybook para cargarlo.
// .storybook/main.ts
const config = {
addons: [
"@storybook/addon-essentials",
"@storybook/addon-a11y",
],
}Lectura del panel a11y
Abra una story y consulte la pestaña Accessibility. Cada resultado está agrupado en Violations (deben corregirse), Passes y Incomplete (requieren revisión manual). Al hacer clic en una infracción, se resalta el elemento.
Infracciones comunes que detecta
- Contraste de color insuficiente entre el texto y el fondo.
- Botones o enlaces sin nombres accesibles.
- Imágenes sin texto
alt. - Campos de formulario sin etiquetas asociadas.
Detectar estos problemas de forma aislada es mucho más barato que hacerlo después del lanzamiento.
Configuración de a11y por story
Puede ajustar las reglas por story mediante parámetros; por ejemplo, desactivar una regla que gestione en otro lugar o marcar elementos para omitirlos.
export const NoContrastCheck = {
parameters: {
a11y: {
config: {
rules: [{ id: "color-contrast", enabled: false }],
},
},
},
}El addon viewport
El addon viewport (incluido en essentials) permite previsualizar una story con distintos tamaños de dispositivo, como móvil, tablet y escritorio, para comprobar los breakpoints adaptables.
Selección de viewport
Un menú desplegable de la barra de herramientas cambia el canvas a marcos de dispositivos preestablecidos. También puede definir un viewport predeterminado para cada story.
export const Mobile = {
parameters: {
viewport: { defaultViewport: "mobile1" },
},
}Viewports personalizados
Defina sus propios breakpoints en preview.ts para ajustarlos a los anchos exactos de su sistema de diseño.
// .storybook/preview.ts
const preview = {
parameters: {
viewport: {
viewports: {
tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
},
},
},
}El addon de documentación
@storybook/addon-docs proporciona la documentación autogenerada. Combinado con tags: ["autodocs"], produce una página Docs por componente a partir de sus props y stories.
export default {
component: Card,
tags: ["autodocs"],
}Documentación siempre actualizada
Como la documentación se genera a partir de componentes y stories reales, no puede quedar desactualizada. Las tablas de props reflejan las definiciones reales de las props y los ejemplos son las stories interactivas.
Comprobación rápida
Compruebe su comprensión de los addons de Storybook.
Resumen
Ha aprendido sobre addons clave de Storybook:
@storybook/addon-a11yinforma de las infracciones de WCAG por story (contraste, etiquetas y roles) y puede configurarse por story.- El addon viewport previsualiza los breakpoints adaptables con tamaños preestablecidos o personalizados.
@storybook/addon-docs, junto contags: ["autodocs"], genera automáticamente documentación siempre actualizada a partir de las props y las stories.- Registre los addons en el arreglo
addonsdemain.ts.
Preguntas frecuentes
¿La lección «Addons de Storybook y pruebas de accesibilidad» es gratis?
Sí — el texto completo de «Addons de Storybook y pruebas de accesibilidad» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Addons de Storybook y pruebas de accesibilidad»?
@storybook/addon-a11y, addon de viewport y addon de docs para generar documentación automáticamente Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Addons de Storybook y pruebas de accesibilidad»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de Storybook para Vue 3
- Escritura de stories de componentes
- Controles, acciones y args
- Addons de Storybook y pruebas de accesibilidad