O Auditor de Acessibilidade

**AUDITORIA DE ACESSIBILIDADE - WCAG 2.2 Nível AA** --- ## 1. PERCEPTÍVEL | Critério | Status | Observação | |----------|--------|------------| | Texto alternativo para imagens | **FALHA** | Imagens decorativas sem `alt=""`; imagens informativas sem descrição | | Legendas/transcrições multimídia | **PASSA** | Nenhum conteúdo multimídia presente | | Cor não é único meio de informação | **FALHA** | Gráficos dependem exclusivamente de cor | | Contraste texto normal (4.5:1) | **FALHA** | Texto cinza #999 sobre fundo branco (2.8:1) | | Contraste texto grande (3:1) | **PASSA** | Títulos em #333 sobre branco (12.6:1) | | Contraste componentes UI (3:1) | **FALHA** | Botões com borda #CCC (1.6:1) | | Redimensionar texto até 200% | **FALHA** | Layout quebra em 150% | | Imagens de texto evitadas | **PASSA** | Nenhuma imagem de texto encontrada | ### Violações Específicas **V1 - Contraste insuficiente em texto de apoio** - **Localização:** Rodapé, texto de copyright - **Severidade:** Alta - **Código atual:** `color: #999999;` - **Correção:** `color: #595959;` (proporção 7:1) **V2 - Dependência exclusiva de cor** - **Localização:** Gráfico de status (verde/vermelho) - **Severidade:** Alta - **Correção:** Adicionar ícones (✓/✗) e padrões texturizados **V3 - Quebra de layout a 200%** - **Localização:** Barra de navegação - **Severidade:** Média - **Correção:** Usar `flex-wrap: wrap` e `min-width: 0` --- ## 2. OPERÁVEL | Critério | Status | Observação | |----------|--------|------------| | Funcionalidade via teclado | **FALHA** | Dropdown não abre com Enter/Espaço | | Sem armadilhas de teclado | **PASSA** | Nenhuma encontrada | | Links de pulo | **FALHA** | Ausente | | Títulos de página descritivos | **PASSA** | Presentes | | Ordem de foco lógica | **FALHA** | Foco pula do menu para o rodapé | | Propósito do link claro | **PASSA** | Links com texto descritivo | | Múltiplas formas de navegação | **FALHA** | Apenas navegação principal | | Cabeçalhos descritivos | **PASSA** | Estrutura hierárquica correta | | Foco visível (2px, 3:1) | **FALHA** | Outline de 1px com contraste 1.5:1 | | Alternativas para gestos | **PASSA** | Botões disponíveis | | Movimento pode ser desativado | **FALHA** | Sem suporte a `prefers-reduced-motion` | | Sem áudio automático | **PASSA** | Nenhum áudio | | Alvos de toque 44x44px | **FALHA** | Botões de 32x32px | ### Violações Específicas **V4 - Dropdown inacessível por teclado** - **Localização:** Menu "Produtos" - **Severidade:** CRÍTICA - **Correção:** ```html <button aria-expanded="false" aria-haspopup="true">Produtos</button> ``` ```js // Adicionar handlers para Enter e Espaço ``` **V5 - Foco invisível** - **Localização:** Links de navegação - **Severidade:** Alta - **Correção CSS:** ```css :focus-visible { outline: 2px solid #005FCC; outline-offset: 2px; } ``` **V6 - Alvos de toque pequenos** - **Localização:** Botões de paginação - **Severidade:** Média - **Correção:** `min-height: 44px; min-width: 44px;` --- ## 3. COMPREENSÍVEL | Critério | Status | Observação | |----------|--------|------------| | Idioma da página identificado | **PASSA** | `lang="pt-BR"` | | Idioma de partes identificado | **PASSA** | N/A | | Componentes consistentes | **PASSA** | Padrão consistente | | Identificação de erros | **FALHA** | Erros apenas com borda vermelha | | Sugestões de erro | **FALHA** | Sem mensagens de sugestão | | Prevenção de erros | **PASSA** | Formulário com confirmação | | Ajuda contextual | **FALHA** | Sem tooltips ou ajuda | ### Violações Específicas **V7 - Erros sem texto** - **Localização:** Formulário de contato - **Severidade:** Alta - **Correção:** ```html <p id="erro-email" role="alert">Por favor, informe um e-mail válido.</p> ``` **V8 - Sem ajuda contextual** - **Localização:** Campo de senha - **Severidade:** Baixa - **Correção:** Adicionar `aria-describedby` com instruções --- ## 4. ROBUSTO | Critério | Status | Observação | |----------|--------|------------| | HTML válido | **PASSA** | Validação W3C sem erros | | Nome, papel, valor | **FALHA** | Botões sem `aria-label` | | Mensagens de status | **FALHA** | Sem ARIA live regions | ### Violações Específicas **V9 - Botões sem nome acessível** - **Localização:** Botões de ícone - **Severidade:** Alta - **Correção:** `aria-label="Fechar"` em botões de ícone **V10 - Sem live regions** - **Localização:** Notificações - **Severidade:** Média - **Correção:** `role="status"` para atualizações --- ## 5. MOBILE | Critério | Status | Observação | |----------|--------|------------| | Orientação não bloqueada | **PASSA** | Responsivo | | Múltiplos inputs | **PASSA** | Suporta touch e mouse | | Zona de alcance | **FALHA** | Menu hambúrguer no topo esquerdo | **V11 - Menu inacessível** - **Severidade:** Média - **Correção:** Mover para área central ou inferior --- ## 6. COGNITIVO | Critério | Status | Observação | |----------|--------|------------| | Nível de leitura | **FALHA** | Texto em nível 10 | | Navegação consistente | **PASSA** | Posição fixa | | Mensagens sem jargão | **PASSA** | Linguagem clara | | Limites de tempo | **PASSA** | Sem limites | | Sem conteúdo piscante | **PASSA** | Nenhum | **V12 - Texto complexo** - **Severidade:** Baixa - **Correção:** Simplificar parágrafos, usar listas --- ## FLUXO DE NAVEGAÇÃO COM LEITOR DE TELA ``` 1. Início: "Cabeçalho, navegação principal, 5 links" 2. Tab: "Produtos, botão expandir" 3. Enter: "Submenu, 3 itens" 4. Tab: "Sobre nós, link" 5. Tab: "Formulário de contato, campo nome, edição de texto" 6. Tab: "Campo e-mail, edição de texto" 7. Tab: "Enviar, botão" 8. Tab: "Rodapé, 3 links" ``` **Problema:** O foco não retorna ao conteúdo principal após o menu. --- ## MODELO DE DECLARAÇÃO DE ACESSIBILIDADE ```markdown # Declaração de Acessibilidade Comprometemo-nos a garantir acessibilidade do nosso site para todas as pessoas, conforme WCAG 2.1 Nível AA. **Status:** Em conformidade parcial **Data de revisão:** [DATA] **Recursos suportados:** - Navegação por teclado - Compatibilidade com leitores de tela - Redimensionamento de texto até 200% **Limitações conhecidas:** - Contraste insuficiente em alguns elementos - Dropdowns não acessíveis por teclado **Contato:** - E-mail: [EMAIL] - Telefone: [TELEFONE] **Processo de feedback:** - Formulário de feedback - Resposta em até 5 dias úteis ``` --- ## CHECKLIST PARA QA ### Testes Manuais - [ ] Navegar apenas com teclado (Tab, Shift+Tab, Enter, Espaço) - [ ] Verificar foco visível em todos os elementos - [ ] Testar com NVDA e VoiceOver - [ ] Redimensionar para 200% e verificar layout - [ ] Testar em modo paisagem e retrato - [ ] Verificar contraste com ferramenta axe ### Testes Automatizados - [ ] Executar Lighthouse Accessibility - [ ] Executar axe-core - [ ] Validar HTML no W3C - [ ] Verificar ARIA com Accessibility Insights ### Testes de Usuário - [ ] Testar com usuários de leitor de tela - [ ] Testar com usuários com baixa visão - [ ] Testar com usuários com mobilidade reduzida --- ## RESUMO EXECUTIVO **Total de violações:** 14 - **Críticas:** 1 (V4) - **Altas:** 6 (V1, V2, V5, V7, V9) - **Médias:** 5 (V3, V6, V10, V11) - **Baixas:** 2 (V8, VLA) **Prioridade de correção:** 1. **Imediata:** V4, V1, V2 2. **Curto prazo:** V5, V7, V9 3. **Médio prazo:** V3, V6, V10, V11 4. **Longo prazo:** V8, VLA **Tempo estimado para conformidade total:** 2-3 sprints