Fluxo de Trabalho Superpoderoso de Testes de Acessibilidade

# Fluxo de Trabalho de Testes de Acessibilidade

## Configuração

- **Nível WCAG**: ${wcag_level:AA} - **Componente em Teste**: ${component_name:Page} - **Padrão de Conformidade**: ${compliance_standard:WCAG 2.1} - **Pontuação Mínima do Lighthouse**: ${lighthouse_score:90} - **Leitor de Tela Principal**: ${screen_reader:NVDA} - **Framework de Teste**: ${test_framework:jest-axe}

## Árvore de Decisão de Auditoria

``` Solicitação de acessibilidade recebida | +-- Novo componente/página? | +-- Executar varredura automatizada primeiro (axe-core, Lighthouse) | +-- Teste de navegação por teclado | +-- Verificação de anúncio do leitor de tela | +-- Verificação de contraste de cores | +-- Violação existente para corrigir? | +-- Identificar critério de sucesso WCAG | +-- Verificar se HTML semântico resolve | +-- Aplicar ARIA somente quando HTML for insuficiente | +-- Verificar correção com tecnologia assistiva | +-- Auditoria de conformidade? +-- Varredura automatizada (detecta ~30% dos problemas) +-- Checklist de testes manuais +-- Documentar violações por gravidade +-- Criar roteiro de remediação ```

## Referência Rápida WCAG

### Classificação de Gravidade

| Gravidade | Impacto | Exemplos | Prazo de Correção | |-----------|---------|----------|-------------------| | Crítica | Bloqueia acesso totalmente | Sem foco de teclado, botões vazios, alt ausente em imagens funcionais | Imediato | | Grave | Barreiras principais | Contraste ruim, rótulos de formulário ausentes, sem links de pular | Dentro do sprint | | Moderada | Difícil mas utilizável | Navegação inconsistente, mensagens de erro pouco claras | Próximo lançamento | | Menor | Inconveniência | Texto alt redundante, problemas menores de ordem de títulos | Backlog |

### Violações Comuns e Correções

**Nome acessível ausente** ```html ...

...

Fechar diálogo ... ```

**Associação de rótulo de formulário** ```html Email

Email

Email ```

**Falha de contraste de cores** ``` Proporções mínimas (WCAG ${wcag_level:AA}): - Texto normal ( =${large_text_size:18}px ou >=${bold_text_size:14}px em negrito): ${contrast_ratio_large:3}:1 - Componentes de UI e gráficos: 3:1

Ferramentas: Verificador de Contraste WebAIM, DevTools do navegador ```

**Visibilidade do foco** ```css /* Nunca faça isso sem alternativa */ :focus { outline: none; }

/* Foco personalizado adequado */ :focus-visible { outline: ${focus_outline_width:2}px solid ${focus_outline_color:#005fcc}; outline-offset: ${focus_outline_offset:2}px; } ```

## Estrutura de Decisão ARIA

``` Precisa transmitir informações à tecnologia assistiva? | +-- HTML semântico pode fazer isso? | +-- SIM: Use HTML ( , , , ) | +-- NÃO: Continue para ARIA | +-- Que tipo de ARIA é necessário? +-- Papel: O que É este elemento? (role="dialog", role="tab") +-- Estado: Qual condição? (aria-expanded, aria-checked) +-- Propriedade: Qual relação? (aria-labelledby, aria-describedby) +-- Região viva: Conteúdo dinâmico? (aria-live="${aria_live_mode:polite}") ```

### Padrões ARIA para Widgets Comuns

**Divulgação (mostrar/ocultar)** ```html Mostrar detalhes Conteúdo aqui ```

**Interface de abas** ```html Geral Privacidade ... ... ```

**Diálogo modal** ```html Confirmar ação Tem certeza de que deseja continuar?

Cancelar Confirmar ```

## Checklist de Navegação por Teclado

``` [ ] Todos os elementos interativos focáveis com Tab [ ] Ordem de foco corresponde à ordem visual/lógica [ ] Foco visível em todos os elementos [ ] Sem armadilhas de teclado (sempre possível sair com Tab) [ ] Link de pular como primeiro elemento focável [ ] Escape fecha modais/menus suspensos [ ] Setas navegam dentro de widgets (abas, menus, grades) [ ] Enter/Espaço ativa botões e links [ ] Atalhos personalizados documentados e configuráveis ```

### Padrões de Gerenciamento de Foco

**Armadilha de foco modal** ```javascript // Ao abrir modal: // 1. Salvar elemento previamente focado // 2. Mover foco para o primeiro elemento focável no modal // 3. Prender Tab dentro dos limites do modal

// Ao fechar modal: // 1. Retornar foco ao elemento salvo ```

**Conteúdo dinâmico** ```javascript // Após adicionar conteúdo: // - Anunciar via região aria-live, OU // - Mover foco para o título do novo conteúdo

// Após remover conteúdo: // - Mover foco para o próximo elemento lógico // - Nunca deixar foco em elemento removido ```

## Testes com Leitor de Tela

### Verificação de Anúncios

| Elemento | Deve Anunciar | |----------|---------------| | Botão | Papel + nome + estado ("Botão Enviar") | | Link | Nome + "link" ("Link Página inicial") | | Imagem | Texto alt OU "decorativa" (pular) | | Título | Nível + texto ("Nível de título 2, Sobre nós") | | Campo de formulário | Rótulo + tipo + estado + instruções | | Erro | Mensagem de erro + associação ao campo |

### Comandos de Teste (Referência Rápida)

**VoiceOver (macOS)** - VO = Ctrl + Option - VO + A: Ler tudo - VO + Direita/Esquerda: Navegar elementos - VO + Cmd + H: Próximo título - VO + Cmd + J: Próximo controle de formulário

**${screen_reader:NVDA} (Windows)** - NVDA + Seta para baixo: Ler tudo - Tab: Próximo elemento focável - H: Próximo título - F: Próximo campo de formulário - B: Próximo botão

## Integração de Testes Automatizados

### axe-core em testes ```javascript // ${test_framework:jest-axe} import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);

test('${component_name:component} é acessível', async () => { const { container } = render( ); const results = await axe(container); expect(results).toHaveNoViolations(); }); ```

### Limite CI do Lighthouse ```javascript // lighthouserc.js module.exports = { assertions: { 'categories:accessibility': ['error', { minScore: ${lighthouse_score:90} / 100 }], }, }; ```

## Matriz de Prioridade de Remediação

``` Impacto vs Esforço: Baixo Esforço Alto Esforço Alto Impacto | FAÇA PRIMEIRO | PLANEJE DEPOIS | | texto alt | redesenho | | rótulos | reconstrução nav| ----------------|------------------|-------------------| Baixo Impacto | VITÓRIA RÁPIDA | BACKLOG | | contraste | bom ter | | ajustes | melhorias | ```

## Checklist de Verificação

Antes de marcar o trabalho de acessibilidade como concluído:

``` Testes Automatizados: [ ] axe-core relata zero violações [ ] Acessibilidade do Lighthouse >= ${lighthouse_score:90} [ ] Validador HTML passa (afeta análise de TA)

Testes de Teclado: [ ] Conclusão completa da tarefa sem mouse [ ] Foco visível em todos os momentos [ ] Ordem lógica de tabulação [ ] Sem armadilhas

Testes com Leitor de Tela: [ ] Testado com pelo menos um leitor de tela (${screen_reader:NVDA}) [ ] Todo o conteúdo anunciado corretamente [ ] Elementos interativos têm papéis/estados [ ] Atualizações dinâmicas anunciadas

Testes Visuais: [ ] Proporções de contraste verificadas (${contrast_ratio_normal:4.5}:1 mínimo) [ ] Funciona com zoom de ${zoom_level:200}% [ ] Nenhuma informação transmitida apenas por cor [ ] Respeita prefers-reduced-motion ```

Fluxo de Trabalho Superpoderoso de Testes de Acessibilidade

Conteúdo do PromptSalvar

Uso

Referências

Discussão