Auditoria de acessibilidade mobile-first com WCAG 2.2 e LBI

Realize uma auditoria completa de acessibilidade mobile-first para [NOME DO PRODUTO], um [TIPO: app nativo/PWA/web] construido com [TECNOLOGIA].

**Contexto legal:**
- LBI (Lei 13.146/2015): obrigatorio para servicos publicos e empresas
- NBR 9050: acessibilidade em edificacoes (referencia para UX)
- WCAG 2.2 nivel AA: criterio minimo recomendado

**Parte 1 — Feramentas de Auditoria (executar em ordem):**

Automatizado (roda primeiro — pega 30-40% dos problemas):
```bash
# Web/PWA
npx axe-core-cli https://[URL] --include main --reporter json > auditoria-axe.json
npm run lighthouse -- --only-categories=accessibility --output json

# Resultados esperados:
# - axe: lista de violacoes com elemento, impacto e solucao
# - Lighthouse: score + oportunidades ordenadas por impacto
```

Teste manual com leitores de tela (obrigatorio):
- **iOS VoiceOver**: Configuracoes > Acessibilidade > VoiceOver
- **Android TalkBack**: Configuracoes > Acessibilidade > TalkBack
- Testar fluxo critico: [LISTA DOS 3-5 FLUXOS MAIS IMPORTANTES]

Teste de contraste:
- Colour Contrast Analyser (desktop)
- Stark (plugin Figma)

Teste de zoom:
- 200% de zoom no browser: todo o conteudo ainda visivel?
- Texto grande no iOS/Android: layout quebra?

**Parte 2 — Checklist por Criterio WCAG 2.2:**

**Perceptivel:**

| Criterio | Nivel | O que verificar | Status |
|---------|-------|-----------------|--------|
| 1.1.1 Texto alternativo | A | Todas as imagens tem alt descritivo? | [OK/FALHA/N/A] |
| 1.1.1 Imagens decorativas | A | Imagens decorativas tem alt=""? | [OK/FALHA/N/A] |
| 1.3.1 Info e relacionamentos | A | Headings em hierarquia correta? | [OK/FALHA/N/A] |
| 1.3.3 Caracteristicas sensoriais | A | Instrucoes nao dependem apenas de cor/forma? | [OK/FALHA/N/A] |
| 1.3.4 Orientacao | AA | Funciona em portrait E landscape? | [OK/FALHA/N/A] |
| 1.3.5 Finalidade do campo | AA | Campos com autocomplete correto? | [OK/FALHA/N/A] |
| 1.4.1 Uso de cor | A | Informacao nao passada somente por cor? | [OK/FALHA/N/A] |
| 1.4.3 Contraste (minimo) | AA | Ratio 4.5:1 para texto normal? | [OK/FALHA/N/A] |
| 1.4.4 Redimensionar texto | AA | 200% zoom sem perda de conteudo? | [OK/FALHA/N/A] |
| 1.4.10 Refluxo | AA | 320px sem scroll horizontal? | [OK/FALHA/N/A] |
| 1.4.11 Contraste de elementos nao-texto | AA | Ratio 3:1 para UI elements? | [OK/FALHA/N/A] |
| 1.4.12 Espacamento de texto | AA | Conteudo intacto com espacamento aumentado? | [OK/FALHA/N/A] |

**Operavel:**

| Criterio | Nivel | O que verificar | Status |
|---------|-------|-----------------|--------|
| 2.1.1 Teclado | A | Todo o produto operavel sem mouse? | [OK/FALHA/N/A] |
| 2.1.4 Atalhos de teclado | A | Atalhos conflitam com SO ou leitores de tela? | [OK/FALHA/N/A] |
| 2.4.3 Ordem de foco | A | Foco segue ordem logica de leitura? | [OK/FALHA/N/A] |
| 2.4.7 Foco visivel | AA | Foco claramente visivel em todos os elementos? | [OK/FALHA/N/A] |
| 2.4.11 Foco nao obscurecido (minimo) | AA (novo 2.2) | Foco nao coberto por elementos fixos? | [OK/FALHA/N/A] |
| 2.5.3 Label no nome | A | Botoes com icone+texto: accessible name inclui o texto? | [OK/FALHA/N/A] |
| 2.5.5 Tamanho do alvo | AA (novo 2.2) | Alvos tocaveis >= 44x44px? | [OK/FALHA/N/A] |
| 2.5.8 Tamanho do alvo (minimo) | A (novo 2.2) | Alvos tocaveis >= 24x24px? | [OK/FALHA/N/A] |

**Compreenssivel:**

| Criterio | Nivel | O que verificar | Status |
|---------|-------|-----------------|--------|
| 3.1.1 Idioma da pagina | A | HTML lang="pt-BR" definido? | [OK/FALHA/N/A] |
| 3.3.1 Identificacao de erro | A | Erros descrevem o problema e solucao? | [OK/FALHA/N/A] |
| 3.3.2 Labels ou instrucoes | A | Todos os campos tem label visivel? | [OK/FALHA/N/A] |
| 3.3.7 Entrada redundante | A (novo 2.2) | Dados ja inseridos sao pre-preenchidos? | [OK/FALHA/N/A] |
| 3.3.8 Autenticacao acessivel | AA (novo 2.2) | Login sem depender de tarefa cognitiva? | [OK/FALHA/N/A] |

**Robusto:**

| Criterio | Nivel | O que verificar | Status |
|---------|-------|-----------------|--------|
| 4.1.2 Nome, funcao, valor | A | Todos os componentes tem role+name+state corretos? | [OK/FALHA/N/A] |
| 4.1.3 Mensagens de status | AA | Erros/sucessos anunciados por leitores de tela? | [OK/FALHA/N/A] |

**Parte 3 — Otimizacoes Especificas Mobile:**

**Touch targets (critico no mobile):**
- Tamanho minimo: 44x44px (Apple HIG) / 48x48dp (Material)
- Espacamento minimo entre alvos: 8px
- Verificar: botoes de fechar modal, icones de acao, checkboxes

**Formularios mobile:**
- `inputmode` correto: `numeric` para CPF, `email` para email, `tel` para telefone
- `autocomplete` para dados pessoais (nome, email, endereco, CPF)
- Labels visiveis sempre (nao usar placeholder como label)
- Teclado virtual nao cobre o campo ativo (scroll para visibilidade)

**Gestos:**
- Toda acao de gesto tem alternativa por botao
- Swipe para deletar: botao alternativo visivel
- Pinch-to-zoom: nunca desabilitado via viewport meta

**Parte 4 — Relatorio de Auditoria:**

Para cada violacao encontrada:
```
ID: WCAG-[CRITERIO]-[NUMERO]
Criterio: [NUMERO] [NOME]
Nivel: A / AA / AAA
Descricao: [O QUE ESTA ERRADO]
Impacto: Critico / Serio / Moderado / Leve
Elementos afetados: [SELETOR CSS ou DESCRICAO DO COMPONENTE]
Solucao: [COMO CORRIGIR — com codigo se possivel]
Prazo sugerido: [SPRINT X]
Responsavel: [FRONTEND / DESIGN / PRODUTO]
```

**Dashboard de resultado:**
- Total de criterios testados: [NUMERO]
- Aprovados: [NUMERO] ([%])
- Reprovados: [NUMERO] ([%])
- Criticos (impedem uso): [NUMERO]
- Score de acessibilidade: [NUMERO]/100

**Parte 5 — Roteiro de Correcao por Sprint:**
- Sprint 1: Todos os criticos (nivel A falhando)
- Sprint 2: Moderados (nivel AA falhando)
- Sprint 3: Leves + melhorias pro-ativas
- Sprint 4: Teste de regressao + documentacao

**Entregue:** relatorio PDF completo + planilha de rastreamento + tickets criados no [Jira/Linear/GitHub Issues].