Especialista em Sistema de Acessibilidade

--- name: especialista-em-acessibilidade description: Testa e corrige problemas de acessibilidade para conformidade com WCAG e compatibilidade com tecnologias assistivas. Use quando (1) auditar a interface para violações de acessibilidade, (2) implementar navegação por teclado ou suporte a leitores de tela, (3) corrigir problemas de contraste de cores ou indicadores de foco, (4) garantir acessibilidade de formulários e tratamento de erros, (5) criar implementações ARIA. --- # Teste e Correção de Acessibilidade ## Configuração - **Nível WCAG**: ${wcag_level:AA} - **Componente Alvo**: ${component_name:Application} - **Padrão de Conformidade**: ${compliance_standard:WCAG 2.1} - **Escopo de Teste**: ${testing_scope:full-audit} - **Leitor de Tela**: ${screen_reader:NVDA} ## Referência Rápida WCAG 2.1 ### Níveis de Conformidade | Nível | Requisito | Problemas Comuns | |-------|-------------|---------------| | A | Base mínima | Texto alternativo ausente, sem acesso por teclado, rótulos de formulário ausentes | | ${wcag_level:AA} | Padrão alvo | Contraste < 4.5:1, indicadores de foco ausentes, estrutura de cabeçalho ruim | | AAA | Aprimorado | Contraste < 7:1, língua de sinais, descrição de áudio estendida | ### Quatro Princípios (POUR) 1. **Perceptível**: Conteúdo disponível aos sentidos (texto alternativo, legendas, contraste) 2. **Operável**: Interface navegável por todos os métodos de entrada (teclado, toque, voz) 3. **Compreensível**: Conteúdo e interface previsíveis e legíveis 4. **Robusto**: Funciona com tecnologias assistivas atuais e futuras ## Matriz de Severidade de Violações ``` CRÍTICO (corrigir imediatamente): - Sem acesso por teclado a elementos interativos - Rótulos de formulário ausentes - Imagens sem texto alternativo - Áudio em reprodução automática sem controles - Armadilhas de teclado ALTO (corrigir antes do lançamento): - Proporção de contraste abaixo de ${min_contrast_ratio:4.5}:1 (texto) ou 3:1 (texto grande) - Links de pulo ausentes - Hierarquia de cabeçalhos incorreta - Foco não visível - Identificação de erros ausente MÉDIO (corrigir no próximo sprint): - Navegação inconsistente - Marcos (landmarks) ausentes - Texto de link ruim ("clique aqui") - Atributo de idioma ausente - Tabelas complexas sem cabeçalhos BAIXO (backlog): - Ajustes de tempo - Múltiplas formas de encontrar conteúdo - Ajuda sensível ao contexto ``` ## Árvore de Decisão de Teste ``` Início: O que você está testando? | +-- Novo Componente | +-- Tem elementos interativos? --> Lista de Verificação de Navegação por Teclado | +-- Tem conteúdo de texto? --> Verificar contraste + estrutura de cabeçalhos | +-- Tem imagens? --> Verificar adequação do texto alternativo | +-- Tem formulários? --> Lista de Verificação de Acessibilidade de Formulários | +-- Página/Recurso Existente | +-- Executar varredura automatizada primeiro (axe-core, Lighthouse) | +-- Teste manual de navegação por teclado | +-- Verificação com leitor de tela | +-- Verificação pontual de contraste de cores | +-- Widget de Terceiros +-- Verificar implementação ARIA +-- Confirmar suporte a teclado +-- Testar com leitor de tela +-- Documentar limitações ``` ## Lista de Verificação de Navegação por Teclado ```markdown [ ] Todos os elementos interativos alcançáveis via Tab [ ] Ordem de Tab segue fluxo visual/lógico [ ] Indicador de foco visível (contorno de ${focus_indicator_width:2}px+ , contraste 3:1) [ ] Sem armadilhas de teclado (possível sair de todos os elementos com Tab) [ ] Link de pulo como primeiro elemento focalizável [ ] Enter ativa botões e links [ ] Espaço ativa caixas de seleção e botões [ ] Setas navegam dentro de componentes (abas, menus, grupos de botões de opção) [ ] Escape fecha modais e menus suspensos [ ] Modais prendem o foco até serem dispensados ``` ## Padrões de Teste com Leitor de Tela ### Anúncios Essenciais para Verificar ``` Elementos Interativos: Botão: "[rótulo], botão" Link: "[texto], link" Caixa de seleção: "[rótulo], caixa de seleção, [marcada/desmarcada]" Botão de opção: "[rótulo], botão de opção, [selecionado], [posição] de [total]" Caixa de combinação: "[rótulo], caixa de combinação, [recolhida/expandida]" Conteúdo Dinâmico: Carregamento: Usar aria-busy="true" no contêiner Status: Usar role="status" para atualizações não críticas Alerta: Usar role="alert" para mensagens críticas Regiões vivas: aria-live="${aria_live_politeness:polite}" Formulários: Obrigatório: "obrigatório" anunciado com o rótulo Inválido: "entrada inválida" com mensagem de erro Instruções: Anunciadas com o rótulo via aria-describedby ``` ### Sequência de Teste 1. Navegar pela página inteira com a tecla Tab, ouvindo os anúncios 2. Testar navegação por cabeçalhos (tecla H no leitor de tela) 3. Testar navegação por marcos (tecla D / rotor) 4. Testar tabelas (tecla T, setas dentro da tabela) 5. Testar formulários (tecla F, concluir envio do formulário) 6. Testar atualizações de conteúdo dinâmico (verificar regiões vivas) ## Requisitos de Contraste de Cores | Tipo de Texto | Proporção Mínima | Aprimorado (AAA) | |-----------|----------------|----------------| | Texto normal ( =${large_text_threshold:18}pt ou 14pt em negrito) | 3:1 | 4.5:1 | | Componentes de interface e gráficos | 3:1 | N/A | | Indicadores de foco | 3:1 | N/A | ### Processo de Verificação de Contraste ``` 1. Identificar todos os pares de cores de primeiro plano/fundo 2. Calcular a proporção de contraste: (L1 + 0.05) / (L2 + 0.05) onde L1 = luminância mais clara, L2 = luminância mais escura 3. Falhas comuns a verificar: - Texto de espaço reservado (geralmente muito claro) - Estado desabilitado (isento, mas considerar usabilidade) - Links dentro de texto (devem se distinguir do texto) - Estados de erro/sucesso em fundos coloridos - Texto sobre imagens (usar sobreposição ou sombra de texto) ``` ## Guia de Implementação ARIA ### Primeira Regra do ARIA Usar elementos HTML nativos quando possível. ARIA é apenas para widgets personalizados. ```html Enviar Enviar ``` ### Quando ARIA é Necessário ```html Aba 1 Aba 2 Conteúdo 1 Conteúdo 2 Mostrar detalhes Conteúdo expansível Título do Diálogo ``` ### Erros Comuns de ARIA ``` - role="button" sem suporte a teclado (Enter/Espaço) - aria-label duplicando texto visível - aria-hidden="true" em elementos focalizáveis - aria-expanded ausente em botões de divulgação - Referência aria-controls incorreta - Uso de aria-describedby para informações essenciais ``` ## Padrões de Acessibilidade de Formulários ### Estrutura de Formulário Necessária ```html Endereço de e-mail Nunca compartilharemos seu e-mail Endereço de entrega Concluir pedido ``` ### Requisitos de Tratamento de Erros ``` 1. Identificar o campo com erro (destaque + ícone) 2. Descrever o erro em texto (não apenas cor) 3. Associar o erro ao campo (aria-describedby) 4. Anunciar o erro aos leitores de tela (role="alert") 5. Mover o foco para o primeiro erro em falha de envio 6. Fornecer sugestões de correção quando possível ``` ## Lista de Verificação de Acessibilidade Móvel ```markdown Alvos de Toque: [ ] Mínimo de ${touch_target_size:44}x${touch_target_size:44} pixels CSS [ ] Espaçamento adequado entre alvos (${touch_target_spacing:8}px+) [ ] Ação de toque não dependente do caminho do gesto Gestos: [ ] Alternativa para gestos com vários dedos [ ] Alternativa para gestos baseados em caminho (deslizar) [ ] Ações baseadas em movimento têm alternativas Leitor de Tela (iOS/Android): [ ] accessibilityLabel definido para imagens e ícones [ ] accessibilityHint para interações complexas [ ] accessibilityRole corresponde ao comportamento do elemento [ ] Ordem de foco segue o layout visual ``` ## Integração de Testes Automatizados ### Gancho de Pré-commit ```bash #!/bin/bash # Executar axe-core nos arquivos alterados npx axe-core-cli --exit src/**/*.html # Verificar problemas comuns grep -r "onClick.*div\|onClick.*span" src/ && \ echo "Aviso: Manipulador de clique em elemento não interativo" && exit 1 ``` ### Verificações no Pipeline de CI ```yaml auditoria-de-acessibilidade: script: - npx pa11y-ci --config .pa11yci.json - npx lighthouse --accessibility --output=json artifacts: paths: - relatorio-de-acessibilidade.json rules: - if: '$CI_PIPELINE_SOURCE == "merge_request_event"' ``` ### Limites Mínimos de CI ``` axe-core: 0 violações críticas, 0 violações graves Lighthouse acessibilidade: >= ${lighthouse_a11y_threshold:90} pa11y: 0 erros (avisos aceitáveis) ``` ## Estrutura de Prioridade de Correção ``` Prioridade 1 (Este Sprint): - Bloqueia a conclusão de tarefas do usuário - Risco de conformidade legal - Afeta muitos usuários Prioridade 2 (Próximo Sprint): - Degrada significativamente a experiência - Ferramentas automatizadas sinalizam como erro - Viola requisito ${wcag_level:AA} Prioridade 3 (Backlog): - Inconveniência menor - Viola apenas AAA - Afeta casos extremos Prioridade 4 (Aprimoramento): - Melhora a usabilidade para todos - Boa prática, não requisito - Preparação para o futuro ``` ## Lista de Verificação de Verificação Antes de marcar o trabalho de acessibilidade como concluído: ```markdown Automatizado: [ ] axe-core: 0 violações [ ] Lighthouse acessibilidade: ${lighthouse_a11y_threshold:90}+ [ ] Validação de HTML aprovada [ ] Sem avisos de acessibilidade no console Teclado: [ ] Concluir todas as tarefas apenas com teclado [ ] Foco visível em todos os momentos [ ] Ordem de Tab lógica [ ] Sem armadilhas de teclado Leitor de Tela (testar com pelo menos um): [ ] Todo o conteúdo anunciado [ ] Elementos interativos rotulados [ ] Erros e atualizações anunciados [ ] Navegação eficiente Visual: [ ] Todo o texto passa no contraste [ ] Componentes de interface passam no contraste [ ] Funciona com zoom de ${zoom_level:200}% [ ] Funciona em modo de alto contraste [ ] Sem flashes que induzem convulsões Formulários: [ ] Todos os campos rotulados [ ] Erros identificáveis [ ] Campos obrigatórios indicados [ ] Instruções disponíveis ``` ## Modelo de Documentação ```markdown # Declaração de Acessibilidade ## Status de Conformidade Este [site/aplicativo] é [totalmente/parcialmente] conforme com ${compliance_standard:WCAG 2.1} Nível ${wcag_level:AA}. ## Limitações Conhecidas | Recurso | Problema | Solução Alternativa | Cronograma | |---------|-------|------------|----------| | [Recurso] | [Descrição] | [Alternativa] | [Data da correção] | ## Tecnologia Assistiva Testada - ${screen_reader:NVDA} [versão] com Firefox [versão] - VoiceOver com Safari [versão] - JAWS [versão] com Chrome [versão] ## Feedback Contato [e-mail] para problemas de acessibilidade. Última atualização: [data]

Especialista em Sistema de Acessibilidade

Conteúdo do PromptSalvar

Uso

Referências

Discussão