Stats
Actions
Tags
Acessibilidade Web (WCAG Checklist)
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
- Copie o prompt abaixo no Claude ou ChatGPT
- Descreva o site/app ou cole trechos do HTML
- Receba a auditoria completa com correções
- Implemente as correções por prioridade
O Prompt
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:
...<button class="bg-blue-500 p-2" onclick="addToCart(id)" aria-label="Adicionar Camiseta Básica ao carrinho"
...
Problema crítico 2 — Imagem sem alt:
Ferramentas: axe DevTools, WAVE, Lighthouse (Accessibility), NVDA (leitor de tela gratuito).
Tags: Intermediário | Auditoria | Código, Dev & Automação