Vue Academy · Aula

Complementos do Storybook e testes de acessibilidade

@storybook/addon-a11y, complemento de viewport e complemento de documentação para documentação automática.

Complementos do Storybook e testes de acessibilidade é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Estendendo o Storybook com complementos

Os complementos adicionam painéis e ferramentas extras ao Storybook. Além de Controles e Ações, os complementos abrangem acessibilidade, áreas de visualização responsivas e documentação gerada automaticamente.

O complemento de acessibilidade

@storybook/addon-a11y executa o mecanismo axe-core em cada história e informa violações das WCAG — problemas de contraste, rótulos ausentes e papéis incorretos — diretamente em um painel.

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

Registrando um complemento

Adicione o complemento à matriz addons em .storybook/main.ts. Reinicie o Storybook para carregá-lo.

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

Lendo o painel de acessibilidade

Abra uma história e verifique a aba Acessibilidade. Cada resultado é agrupado em: Violações (é necessário corrigir), Aprovados e Incompletos (precisam de revisão manual). Ao clicar em uma violação, o elemento é destacado.

Violações comuns detectadas

Contraste de cores insuficiente entre o texto e o plano de fundo.
Botões ou links sem nomes acessíveis.
Imagens sem texto alt.
Campos de formulário sem rótulos associados.

Detectar esses problemas isoladamente é muito mais barato do que depois do lançamento.

Configuração de acessibilidade por história

Você pode ajustar as regras por história usando parâmetros — por exemplo, desativando uma regra tratada em outro lugar ou marcando elementos a serem ignorados.

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

O complemento de área de visualização

O complemento de área de visualização (parte dos recursos essenciais) permite visualizar uma história em diferentes tamanhos de dispositivo — celular, tablet e computador — para verificar os pontos de interrupção responsivos.

Escolhendo uma área de visualização

Uma lista suspensa na barra de ferramentas altera o canvas para molduras de dispositivos predefinidas. Você também pode definir uma área de visualização padrão por história.

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

Áreas de visualização personalizadas

Defina seus próprios pontos de interrupção em preview.ts para corresponder às larguras exatas do seu sistema de design.

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

O complemento de documentação

@storybook/addon-docs fornece a documentação gerada automaticamente. Combinado com tags: ["autodocs"], ele produz uma página de documentação por componente a partir das propriedades e histórias.

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

Documentação que permanece atualizada

Como a documentação é gerada a partir de componentes e histórias reais, ela não fica desatualizada. As tabelas de propriedades refletem as definições reais, e os exemplos são as histórias interativas.

Verificação rápida

Verifique sua compreensão sobre os complementos do Storybook.

Recapitulação

Você aprendeu sobre os principais complementos do Storybook:

@storybook/addon-a11y informa violações das WCAG por história (contraste, rótulos e papéis) e pode ser ajustado por história.
O complemento de área de visualização exibe pontos de interrupção responsivos com tamanhos predefinidos ou personalizados.
@storybook/addon-docs com tags: ["autodocs"] gera automaticamente uma documentação sempre atualizada a partir das propriedades e histórias.
Registre os complementos na matriz addons de main.ts.

Perguntas Frequentes

A aula “Complementos do Storybook e testes de acessibilidade” é grátis?

Sim — o texto completo de “Complementos do Storybook e testes de acessibilidade” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Complementos do Storybook e testes de acessibilidade”?

@storybook/addon-a11y, complemento de viewport e complemento de documentação para documentação automática. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Complementos do Storybook e testes de acessibilidade”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração do Storybook para Vue 3
Escrita de histórias de componentes
Controles, ações e args
Complementos do Storybook e testes de acessibilidade

← Voltar para Vue Academy