acessibilidade-web-wcag-checklist

Code

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.

MIT (declared in README; LICENSE file missing)Source: tiagopgr/skills-ia

Download SKILL.md View on GitHub

Acessibilidade Web (WCAG Checklist)

Objetivo

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)"> <svg>...</svg> </button>

<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:  <img src="produto.jpg" />

<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).

Tags: Intermediário | Auditoria | Código, Dev & Automação

Bundle files

Files included in the skill's folder on GitHub. Only SKILL.md is hosted here — get the full bundle from the source repository.

SKILL.md