Objetivo
Auditar e corrigir problemas de acessibilidade em interfaces web seguindo as diretrizes WCAG 2.1 - garantindo que pessoas com deficiências consigam usar o produto - para ampliar o público, cumprir requisitos legais e criar uma experiência inclusiva.
Quando usar
- Antes de lançar um site ou app
- Em auditorias periódicas de acessibilidade
- Quando receber feedback de usuários com deficiência
- Para cumprir requisitos legais (Lei Brasileira de Inclusão, ADA)
Como usar
- 1Copie o prompt abaixo no Claude ou ChatGPT
- 2Descreva o site/app ou cole trechos do HTML
- 3Receba a auditoria completa com correções
- 4Implemente as correções por prioridade
Você é um especialista em acessibilidade web que audita interfaces seguindo WCAG 2.1 nível AA. Você sabe que: (1) acessibilidade não é feature - é requisito, (2) 15% da população mundial tem alguma deficiência, (3) boas práticas de acessibilidade melhoram a UX para TODOS, (4) a maioria dos problemas é simples de corrigir. Você prioriza impacto real sobre conformidade burocrática.
Faça a auditoria de acessibilidade para:
**Tipo de interface:** [site, web app, e-commerce, dashboard, landing page]
**Stack frontend:** [HTML/CSS, React, Vue, Angular]
**URL ou código:** [cole URL ou trechos do HTML para análise]
**Público:** [quem usa - incluir se há usuários com deficiências conhecidas]
**Componentes interativos:** [formulários, modais, dropdowns, carrosséis, tabelas]
**Status atual:** [nunca auditado, parcialmente acessível, em conformidade]
Avalie usando o checklist WCAG 2.1 AA:
**1. Perceptível** - Alt text, legendas, contraste, redimensionamento
**2. Operável** - Teclado, foco visível, skip links, animações
**3. Compreensível** - Idioma, labels, erros claros, navegação consistente
**4. Robusto** - HTML semântico, ARIA roles, aria-live
**Resumo:** Nível atual, problemas críticos/sérios/melhorias, prioridades.
**Código corrigido:** Antes e depois para cada problema.
**Ferramentas:** Lista de ferramentas para validar correções.
Exemplo de uso
Input
Tipo: E-commerce (listagem de produtos + checkout)
Stack: React + Tailwind CSS
Problemas conhecidos: botões sem label, imagens sem alt, formulário difícil com leitor de tela
Output
**Problema crítico 1 - Botão sem label:**
<!-- ANTES (inacessível) -->
<button class="bg-blue-500 p-2" onclick="addToCart(id)">
<svg>...</svg>
</button>
<!-- DEPOIS (acessível) -->
<button
class="bg-blue-500 p-2"
onclick="addToCart(id)"
aria-label="Adicionar Camiseta Básica ao carrinho"
>
<svg aria-hidden="true">...</svg>
</button>
**Problema crítico 2 - Imagem sem alt:**
<!-- ANTES -->
<img src="produto.jpg" />
<!-- DEPOIS -->
<img src="produto.jpg" alt="Camiseta branca básica de algodão, modelo unissex, vista frontal" />
**Ferramentas:** axe DevTools, WAVE, Lighthouse (Accessibility), NVDA (leitor de tela gratuito).