Auditoria de Acessibilidade

Auditoria de acessibilidade WCAG 2.1 abrangente para páginas do Webflow com detecção detalhada de problemas e correções acionáveis.

Nota Importante

SEMPRE use as ferramentas MCP do Webflow para todas as operações:

Use webflow_guide_tool do MCP Webflow para obter melhores práticas antes de começar
Use data_sites_tool do MCP Webflow com ação list_sites para identificar sites disponíveis
Use data_sites_tool do MCP Webflow com ação get_site para recuperar detalhes do site
Use data_pages_tool do MCP Webflow com ação list_pages para obter todas as páginas e seus IDs
Use data_element_tool do MCP Webflow com ação get_all_elements (passando o ID da página diretamente) para obter informações detalhadas dos elementos
Use data_element_tool do MCP Webflow com ação set_attributes para corrigir problemas de acessibilidade
Use element_snapshot_tool do MCP Webflow para obter pré-visualizações visuais dos elementos — esta é uma ferramenta do Designer e requer conexão com o Designer se usada
NÃO use outras ferramentas ou métodos para operações no Webflow
Todas as chamadas de ferramenta devem incluir o parâmetro context obrigatório (15-25 palavras, perspectiva de terceira pessoa)
Nenhuma conexão com o Designer é necessária para a auditoria ou correções. data_element_tool opera headless em qualquer ID de página de list_pages. O Designer é necessário apenas se você optar por usar element_snapshot_tool para pré-visualizações visuais opcionais.

Instruções

Fase 1: Seleção de Site e Página

Obter informações do site: Use data_sites_tool do MCP Webflow com ação list_sites para identificar o site alvo
Solicitar seleção de página:
- Se o usuário fornecer o ID da página, use-o diretamente
- Caso contrário, use data_pages_tool com ação list_pages para mostrar as páginas disponíveis
- Deixe o usuário selecionar qual(is) página(s) auditar
Confirmar escopo da auditoria: Pergunte ao usuário o que verificar:
- Auditoria completa (todas as verificações de acessibilidade)
- Apenas problemas críticos (WCAG Nível A)
- Categorias específicas (formulários, botões, navegação, etc.)

Fase 2: Extração e Análise de Elementos

Extrair todos os elementos: Use data_element_tool com ação get_all_elements, passando o ID da página alvo da Fase 1, para análise detalhada — nenhuma conexão com o Designer é necessária
- Defina include_style_properties: true para verificar estilos de foco
- Defina include_all_breakpoint_styles: false para minimizar dados
Analisar dados dos elementos: Identifique elementos interativos e de conteúdo:
- Botões (Button, LinkBlock com função de botão)
- Links (TextLink, Link, LinkBlock)
- Entradas de formulário (Input, Select, Textarea)
- Cabeçalhos (elementos Heading com níveis)
- Divs/spans interativos (verificar onClick ou funções interativas)
- Imagens (elementos Image) - PULAR nesta auditoria
Extrair atributos para cada elemento:
- Atributos ARIA (aria-label, aria-describedby, role, tabIndex)
- Atributos DOM (id, domId, href, type, placeholder)
- Conteúdo de texto
- Propriedades de estilo (outline, borda para estados de foco)
- Metadados do elemento (canHaveAttributes, nome da tag)

Fase 3: Verificações de Acessibilidade

Problemas Críticos (Devem Ser Corrigidos - WCAG Nível A)

Botões apenas com ícone sem rótulos (WCAG 4.1.2)
- Encontrar: Elementos Button sem conteúdo de texto
- Verificar: Ausência de aria-label ou aria-labelledby
- Impacto: Leitores de tela não conseguem identificar a finalidade do botão
- Correção: Adicionar atributo aria-label com texto descritivo
Entradas de formulário sem rótulos (WCAG 1.3.1)
- Encontrar: Elementos Input, Select, Textarea
- Verificar: Ausência de label associado ou aria-label
- Impacto: Usuários não sabem para que serve a entrada
- Correção: Adicionar aria-label ou associar a <label> usando id
Manipuladores de clique não semânticos (WCAG 2.1.1)
- Encontrar: Elementos Div ou Span (identificados pelo tipo de elemento)
- Verificar: Comportamento interativo sem função/suporte de teclado adequados
- Impacto: Não acessível por teclado, leitores de tela perdem a interatividade
- Correção: Adicionar role="button", tabIndex="0", sugerir uso de <button> real
Links sem destino (WCAG 2.1.1)
- Encontrar: Elementos Link sem atributo href
- Verificar: Links que usam apenas onClick sem href
- Impacto: Não acessível por teclado, quebra recursos do navegador
- Correção: Adicionar href adequado ou converter para botão

Problemas Sérios (Devem Ser Corrigidos - WCAG Nível AA)

Contorno de foco removido sem substituto (WCAG 2.4.7)
- Encontrar: Elementos com estilo outline: none
- Verificar: Ausência de indicador de foco alternativo visível
- Impacto: Usuários de teclado não conseguem ver o foco
- Correção: Adicionar estilo de foco visível (borda, box-shadow, mudança de fundo)
Manipuladores de teclado ausentes (WCAG 2.1.1)
- Encontrar: Elementos com manipuladores onClick
- Verificar: Ausência de onKeyDown para teclas Enter/Espaço
- Impacto: Não utilizável apenas com teclado
- Correção: Adicionar manipuladores de eventos de teclado
Alvo de toque muito pequeno (WCAG 2.5.5)
- Encontrar: Elementos clicáveis (botões, links)
- Verificar: Largura ou altura < 44px
- Impacto: Difícil de tocar em dispositivos móveis
- Correção: Aumentar padding ou min-width/min-height para 44px

Problemas Moderados (Considere Corrigir)

Problemas de hierarquia de cabeçalhos (WCAG 1.3.1)
- Encontrar: Elementos de cabeçalho (h1-h6)
- Verificar: Níveis pulados (h1 → h3, pulando h2)
- Impacto: Estrutura de documento confusa
- Correção: Usar níveis de cabeçalho sequenciais adequados
tabIndex positivo (WCAG 2.4.3)
- Encontrar: Elementos com tabIndex > 0
- Verificar: Interrompe a ordem natural de tabulação
- Impacto: Navegação por teclado confusa
- Correção: Usar apenas tabIndex="0" ou "-1", deixar a ordem natural do DOM funcionar
Função sem atributos obrigatórios (WCAG 4.1.2)
- Encontrar: Elementos com funções ARIA
- Verificar: Ausência de atributos ARIA obrigatórios (ex.: role="button" sem tabIndex)
- Impacto: Semântica de acessibilidade incompleta
- Correção: Adicionar atributos obrigatórios para a função

Fase 4: Categorização e Pontuação de Problemas

Categorizar todas as descobertas:
- Crítico: Deve corrigir (bloqueia acesso)
- Sério: Deve corrigir (impacta significativamente a usabilidade)
- Moderado: Considere corrigir (melhora a experiência)
Calcular pontuação de acessibilidade (0-100):
- Começar em 100
- Problema crítico: -10 pontos cada
- Problema sério: -5 pontos cada
- Problema moderado: -2 pontos cada
- Pontuação mínima: 0
Gerar resumo de gravidade:
- Total de problemas encontrados
- Detalhamento por gravidade
- Tipos de problema mais comuns
- Páginas/seções mais afetadas

Fase 5: Geração de Relatório

Criar relatório detalhado com formato específico:

═══════════════════════════════════════════════════
AUDITORIA DE ACESSIBILIDADE: [Nome da Página]
═══════════════════════════════════════════════════

CRÍTICOS (X problemas)
───────────────────
[A11Y] Elemento: Botão "Enviar"
  Problema: Botão sem nome acessível
  Localização: Seção do formulário, ID do elemento: {component: "abc", element: "xyz"}
  Atual: <button><CloseIcon /></button>
  Correção: Adicionar aria-label="Fechar"
  WCAG: 4.1.2 Nome, Função, Valor

[A11Y] Elemento: Campo de entrada
  Problema: Entrada de formulário sem rótulo
  Localização: Formulário de contato, ID do elemento: {component: "def", element: "uvw"}
  Atual: <input type="email" />
  Correção: Adicionar aria-label="Endereço de email" ou associar a <label>
  WCAG: 1.3.1 Informações e Relacionamentos

SÉRIOS (X problemas)
──────────────────
[A11Y] Elemento: Link "Leia mais"
  Problema: Contorno de foco removido sem alternativa visível
  Localização: Seção do blog
  Atual: outline: none
  Correção: Adicionar estilo de foco visível (ex.: border: 2px solid blue)
  WCAG: 2.4.7 Foco Visível

MODERADOS (X problemas)
───────────────────
[A11Y] Elemento: Cabeçalho
  Problema: Hierarquia de cabeçalhos pulada (h1 → h3)
  Localização: Seção do artigo
  Atual: <h3>Subseção</h3> após <h1>Título</h1>
  Correção: Alterar para <h2> ou adicionar h2 intermediário
  WCAG: 1.3.1 Informações e Relacionamentos

═══════════════════════════════════════════════════
RESUMO
───────────────────────────────────────────────────
Total de Problemas: X
- Críticos: X problemas
- Sérios: X problemas
- Moderados: X problemas

Pontuação de Acessibilidade: XX/100

Problemas Mais Comuns:
1. [Tipo de problema] - X ocorrências
2. [Tipo de problema] - X ocorrências
3. [Tipo de problema] - X ocorrências
═══════════════════════════════════════════════════

Fornecer insights acionáveis:
- Lista de correções priorizada (críticos primeiro)
- Vitórias rápidas (correções fáceis com grande impacto)
- Recomendações de padrões de design
- Recursos para aprender mais

Fase 6: Sugestões de Correção e Aprovação (Opcional)

Oferecer correção automática de problemas: Correções não exigem o Designer, então ofereça correções automáticas diretamente

Mostrar prévia das correções:

Quais problemas você gostaria de corrigir?

[1] ✓ Adicionar aria-label ao botão Enviar
    Elemento: Botão no formulário de contato
    Correção: Adicionar aria-label="Enviar formulário de contato"
    Seguro: Sim (apenas adicionar atributo)

[2] ✓ Adicionar aria-label à entrada de email
    Elemento: Input no formulário de contato
    Correção: Adicionar aria-label="Endereço de email"
    Seguro: Sim

[3] ⚠️ Corrigir hierarquia de cabeçalhos
    Elemento: h3 na seção do artigo
    Correção: Alterar nível do cabeçalho de h3 para h2
    Seguro: Pode afetar o estilo visual

Digite números para pular (ex.: "3"), "all" para todos, "none" para cancelar

Aplicar correções aprovadas: Use data_element_tool com ação set_attributes
- Processar em lotes
- Mostrar progresso para conjuntos grandes de correções
- Relatar sucesso/fracasso para cada um
Gerar relatório pós-correção:
- Problemas corrigidos: X
- Problemas restantes: Y
- Nova pontuação de acessibilidade: XX/100 (melhorada de YY/100)

Fase 7: Exportação e Recursos (Opcional)

Oferecer formatos de exportação:
- Markdown (documentação legível)
- JSON (legível por máquina para rastreamento)
- CSV (planilha para revisão em equipe)
Fornecer recursos:
- Links de referência rápida WCAG 2.1
- Melhores práticas de acessibilidade do Webflow
- Ferramentas de teste recomendadas (extensões de navegador, leitores de tela)

Considerações Importantes

O Que Esta Skill Verifica

✅ Acessibilidade de botões (rótulos, funções) ✅ Rótulos e associações de entrada de formulário ✅ Semântica de links e acesso por teclado ✅ Visibilidade de foco e navegação por teclado ✅ Hierarquia e estrutura de cabeçalhos ✅ Funções e atributos ARIA ✅ Tamanhos de alvo de toque ✅ Semântica de elementos interativos

O Que Esta Skill NÃO Verifica

❌ Texto alternativo de imagens (use a skill asset-audit) ❌ Taxas de contraste de cores (requer análise visual) ❌ Preferências de animação/movimento ❌ Teste com leitor de tela (requer verificação manual) ❌ Legibilidade do conteúdo (nível de linguagem, clareza)

Limitações

Não consegue detectar problemas apenas visuais (contraste de cores, texto pequeno)
Não consegue testar o comportamento real do leitor de tela
Não consegue validar a qualidade ou clareza do conteúdo
Depende apenas de atributos e estrutura dos elementos

Exemplos

Exemplo 1: Auditoria de Página Completa

Prompt do usuário:

Execute uma auditoria de acessibilidade na minha página inicial

Passo 1: Seleção de Site e Página

🔍 Auditoria de Acessibilidade: Seleção de Página

Vou ajudar você a auditar sua página inicial quanto a problemas de acessibilidade.

Primeiro, deixe-me obter as informações do seu site...

Sites disponíveis:
1. Site da Empresa
2. Site Portfólio

Qual site? (1/2)

Resposta do usuário: 1

Passo 2: Seleção de Página

Páginas disponíveis em Site da Empresa:
1. Início (/)
2. Sobre (/sobre)
3. Contato (/contato)
4. Blog (/blog)

Qual página você gostaria de auditar? (1 para Início)

Resposta do usuário: 1

Passo 3: Escopo da Auditoria

Qual nível de auditoria você gostaria?

1. Auditoria completa (todas as verificações WCAG) - Recomendado
2. Apenas problemas críticos (conformidade Nível A)
3. Categorias específicas (botões, formulários, navegação)

Sua escolha: (1/2/3)

Resposta do usuário: 1

Passo 4: Progresso da Auditoria

🔄 Executando Auditoria de Acessibilidade...

Progresso:
✅ Conteúdo da página extraído (45 elementos)
✅ Analisando botões e elementos interativos
✅ Verificando entradas e rótulos de formulário
✅ Validando hierarquia de cabeçalhos
✅ Verificando navegação por teclado
🔄 Analisando estados de foco...

Análise concluída!

Passo 5: Relatório

═══════════════════════════════════════════════════
AUDITORIA DE ACESSIBILIDADE: Início
═══════════════════════════════════════════════════

CRÍTICOS (3 problemas)
───────────────────
[A11Y] Elemento: Botão (alternância de navegação)
  Problema: Botão apenas com ícone sem nome acessível
  Localização: Navegação do cabeçalho
  ID do Elemento: {component: "nav-01", element: "btn-menu"}
  Atual: <button><MenuIcon /></button>
  Correção: Adicionar aria-label="Abrir menu de navegação"
  WCAG: 4.1.2 Nome, Função, Valor

[A11Y] Elemento: Input (assinatura de email)
  Problema: Entrada de formulário sem rótulo
  Localização: Rodapé, inscrição na newsletter
  ID do Elemento: {component: "footer-01", element: "email-input"}
  Atual: <input type="email" placeholder="Digite o email" />
  Correção: Adicionar aria-label="Endereço de email para newsletter"
  WCAG: 1.3.1 Informações e Relacionamentos

[A11Y] Elemento: Div (cartão clicável)
  Problema: Elemento interativo não semântico
  Localização: Seção de serviços, cartão 2
  ID do Elemento: {component: "services-01", element: "card-02"}
  Atual: <div onClick={...}>Cartão de serviço</div>
  Correção: Converter para <button> ou adicionar role="button" + tabIndex="0"
  WCAG: 2.1.1 Teclado

SÉRIOS (5 problemas)
──────────────────
[A11Y] Elemento: Link "Saiba mais"
  Problema: Contorno de foco removido sem alternativa visível
  Localização: Seção hero
  ID do Elemento: {component: "hero-01", element: "cta-link"}
  Atual: outline: none
  Correção: Adicionar estilo de foco - border: 2px solid #0066cc ou box-shadow
  WCAG: 2.4.7 Foco Visível

[A11Y] Elemento: Botão "Inscrever-se"
  Problema: Alvo de toque muito pequeno (30px × 36px)
  Localização: Formulário de newsletter no rodapé
  ID do Elemento: {component: "footer-01", element: "submit-btn"}
  Atual: Botão pequeno
  Correção: Aumentar padding ou definir min-height: 44px
  WCAG: 2.5.5 Tamanho do Alvo

[continua com mais 3 problemas sérios...]

MODERADOS (4 problemas)
───────────────────
[A11Y] Elemento: Cabeçalho "Nossos Serviços"
  Problema: Hierarquia de cabeçalhos pulada (h1 → h3)
  Localização: Seção de serviços
  ID do Elemento: {component: "services-01", element: "heading"}
  Atual: <h3>Nossos Serviços</h3> segue <h1>Título</h1>
  Correção: Alterar para <h2> ou adicionar h2 intermediário
  WCAG: 1.3.1 Informações e Relacionamentos

[continua com mais 3 problemas moderados...]

═══════════════════════════════════════════════════
RESUMO
───────────────────────────────────────────────────
Total de Problemas: 12
- Críticos: 3 problemas
- Sérios: 5 problemas
- Moderados: 4 problemas

Pontuação de Acessibilidade: 47/100

Problemas Mais Comuns:
1. Botões sem rótulo - 3 ocorrências
2. Entradas sem rótulo - 2 ocorrências
3. Foco removido - 2 ocorrências
═══════════════════════════════════════════════════

Passo 6: Oferecer Correções

Quais problemas você gostaria de corrigir?

[1] ✓ Adicionar aria-label ao botão de menu
    Elemento: Botão na navegação
    Correção: Adicionar aria-label="Abrir menu de navegação"
    Seguro: Sim

[2] ✓ Adicionar aria-label ao campo de email
    Elemento: Input no rodapé
    Correção: Adicionar aria-label="Endereço de email para newsletter"
    Seguro: Sim

[3] ✓ Adicionar role e tabIndex ao cartão de serviço
    Elemento: Div na seção de serviços
    Correção: Adicionar role="button" e tabIndex="0"
    Seguro: Sim (apenas atributos)

[4] ⚠️ Corrigir hierarquia de cabeçalhos
    Elemento: h3 na seção de serviços
    Correção: Alterar para h2
    Seguro: Pode afetar estilos visuais

Aplicar correções 1-3? (s/n):

Resposta do usuário: s

✅ Corrigindo problemas...

Correções aplicadas:
✅ Botão de menu - aria-label adicionado
✅ Campo de email - aria-label adicionado
✅ Cartão de serviço - role e tabIndex adicionados

Relatório Pós-Correção:
- Problemas corrigidos: 3
- Problemas restantes: 9
- Nova pontuação de acessibilidade: 77/100 (melhorada de 47/100)

Deseja exportar o relatório? (markdown/json/csv/não):

Resposta do usuário: markdown

✅ Relatório exportado como accessibility-audit-home.md

Exemplo 2: Auditoria de Categoria Específica

Prompt do usuário:

Verifique apenas os botões da página de contato

🔍 Auditoria de Acessibilidade: Botões na página de Contato

Escopo: Apenas botões
Página: Contato (/contato)

Verificações:
✅ Botões com ícone têm rótulos ARIA
✅ Botões têm texto visível
✅ Botões têm feedback de foco
✅ Tamanho do alvo de toque

Resultados:

CRÍTICOS (1 problema)
───────────────────
[A11Y] Elemento: Botão (ícone de envio)
  Problema: Botão apenas com ícone sem rótulo
  Localização: Formulário de contato
  Atual: <button><SendIcon /></button>
  Correção: Adicionar aria-label="Enviar mensagem"
  WCAG: 4.1.2 Nome, Função, Valor

SÉRIOS (2 problemas)
──────────────────
[A11Y] Elemento: Botão "Enviar"
  Problema: Tamanho do alvo muito pequeno (32px × 40px)
  Localização: Formulário de contato
  Correção: Aumentar padding para min-height: 44px
  WCAG: 2.5.5 Tamanho do Alvo

[A11Y] Elemento: Botão "Enviar"
  Problema: Foco não visível
  Localização: Formulário de contato
  Atual: outline: none (sem alternativa)
  Correção: Adicionar estilo de foco
  WCAG: 2.4.7 Foco Visível

Pontuação do Botão: 83/100

Deseja corrigir esses problemas? (s/n):

Auditoria de Acessibilidade Webflow

O que é Auditoria de Acessibilidade Webflow?

Perguntar na sua IA favorita

Documentação