10 min leitura • Guide 761 of 877
Acessibilidade em Projetos de Desenvolvimento
Acessibilidade não é opcional - é essencial. O GitScrum ajuda equipes a rastrear requisitos de acessibilidade e garantir que a11y faça parte de cada funcionalidade.
Fundamentos da Acessibilidade
Por Que A11y Importa
IMPACTO DA ACESSIBILIDADE:
┌─────────────────────────────────────────────────────────────┐
│ │
│ QUEM BENEFICIA: │
│ │
│ DEFICIÊNCIAS PERMANENTES: │
│ • Usuários cegos (leitores de tela) │
│ • Usuários surdos (legendas, transcrições) │
│ • Deficiências motoras (navegação por teclado) │
│ • Deficiências cognitivas (design claro) │
│ │
│ CONDIÇÕES TEMPORÁRIAS: │
│ • Braço quebrado (não pode usar mouse) │
│ • Infecção nos olhos (não vê bem) │
│ • Ambiente barulhento (não ouve) │
│ │
│ SITUACIONAIS: │
│ • Luz solar intensa (baixo contraste) │
│ • Uma mão ocupada (segurando bebê) │
│ • Conexão lenta (precisa ser leve) │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ CASO DE NEGÓCIO: │
│ │
│ LEGAL: Muitos países exigem acessibilidade │
│ • ADA (EUA), EN 301 549 (UE), AODA (Canadá) │
│ • Processos judiciais aumentando anualmente │
│ │
│ MERCADO: 15% da população mundial tem deficiência │
│ • Segmento significativo de clientes │
│ • População envelhecendo aumentando │
│ │
│ SEO: Sites acessíveis classificam melhor │
│ • HTML semântico ajuda motores de busca │
│ • Texto alternativo melhora busca de imagens │
│ │
│ QUALIDADE: Acessível = melhor para todos │
│ • Design mais claro │
│ • Melhor suporte a teclado │
│ • Performance melhorada │
└─────────────────────────────────────────────────────────────┘
Diretrizes WCAG
VISÃO GERAL DO WCAG 2.1:
┌─────────────────────────────────────────────────────────────┐
│ │
│ QUATRO PRINCÍPIOS (POUR): │
│ │
│ PERCEPTÍVEL: │
│ Conteúdo deve ser apresentável aos usuários │
│ • Alternativas de texto para imagens │
│ • Legendas para vídeo │
│ • Contraste de cor suficiente │
│ • Texto redimensionável │
│ │
│ OPERÁVEL: │
│ Interface deve ser navegável │
│ • Acessível por teclado │
│ • Sem conteúdo causador de convulsões │
│ • Tempo suficiente para ler/interagir │
│ • Navegação clara │
│ │
│ COMPREENSÍVEL: │
│ Conteúdo e interface devem ser claros │
│ • Texto legível │
│ • Navegação previsível │
│ • Assistência de entrada │
│ │
│ ROBUSTO: │
│ Conteúdo deve funcionar com tecnologia assistiva │
│ • HTML válido │
│ • Uso adequado de ARIA │
│ • Compatível com leitores de tela │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ NÍVEIS DE CONFORMIDADE: │
│ │
│ Nível A: Acessibilidade mínima (mínimo básico) │
│ Nível AA: Alvo padrão (maioria dos requisitos) │
│ Nível AAA: Nível mais alto (necessidades especializadas) │
│ │
│ RECOMENDAÇÃO: Alvo WCAG 2.1 Nível AA │
└─────────────────────────────────────────────────────────────┘
Integrando A11y
Nos Requisitos
ACESSIBILIDADE NOS REQUISITOS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ HISTÓRIA COM CRITÉRIOS A11Y: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ PROJ-123: Adicionar Funcionalidade de Upload de Imagem ││
│ │ ││
│ │ Como usuário ││
│ │ Posso fazer upload de imagens para meus projetos ││
│ │ Para incluir visuais na documentação ││
│ │ ││
│ │ CRITÉRIOS DE ACEITAÇÃO: ││
│ │ ☐ Botão de upload com rótulo claro ││
│ │ ☐ Zona de arrastar e soltar tem alternativa de teclado││
│ │ ☐ Indicador de progresso anunciado para leitores de tela││
│ │ ☐ Mensagens de erro são acessíveis ││
│ │ ☐ Imagens carregadas requerem texto alternativo ││
│ │ ││
│ │ REQUISITOS A11Y: ││
│ │ ☐ Botão de upload acessível por teclado (Enter/Espaço)││
│ │ ☐ Gerenciamento de foco após upload ││
│ │ ☐ Região ARIA live para progresso ││
│ │ ☐ Contraste de cor em todos os estados ││
│ │ ☐ Campo de texto alternativo é obrigatório ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ A11Y NA DEFINIÇÃO DE PRONTO: │
│ │
│ ☐ Navegação por teclado funciona │
│ ☐ Testado com leitor de tela │
│ ☐ Contraste de cor atende AA │
│ ☐ Estados de foco visíveis │
│ ☐ Entradas de formulário têm rótulos │
│ ☐ Testes automatizados de a11y passam │
└─────────────────────────────────────────────────────────────┘
Lista de Verificação A11y
LISTA DE VERIFICAÇÃO A11Y DO DESENVOLVEDOR:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TECLADO: │
│ ☐ Todos os elementos interativos focalizáveis │
│ ☐ Ordem de foco é lógica │
│ ☐ Foco é visível (contorno) │
│ ☐ Sem armadilhas de teclado │
│ ☐ Links de pulo para conteúdo principal │
│ ☐ Componentes customizados têm suporte adequado ao teclado│
│ │
│ LEITORES DE TELA: │
│ ☐ Todas as imagens têm texto alternativo │
│ ☐ Imagens decorativas têm alt="" │
│ ☐ Títulos são hierárquicos (h1→h2→h3) │
│ ☐ Entradas de formulário têm rótulos │
│ ☐ Links têm texto descritivo (não "clique aqui") │
│ ☐ Conteúdo dinâmico anunciado (ARIA live) │
│ │
│ VISUAL: │
│ ☐ Contraste de cor 4.5:1 (texto) / 3:1 (texto grande) │
│ ☐ Cor não é único indicador │
│ ☐ Texto pode ser redimensionado para 200% │
│ ☐ Movimento pode ser reduzido (prefers-reduced-motion) │
│ │
│ ESTRUTURA: │
│ ☐ HTML semântico (nav, main, aside, etc.) │
│ ☐ HTML válido │
│ ☐ Atributo de idioma no html │
│ ☐ Títulos de página são descritivos │
│ │
│ FORMULÁRIOS: │
│ ☐ Rótulos associados às entradas │
│ ☐ Campos obrigatórios indicados │
│ ☐ Mensagens de erro claras e associadas │
│ ☐ Estados de sucesso/erro anunciados │
└─────────────────────────────────────────────────────────────┘
Testando A11y
Abordagem de Teste
ESTRATÉGIA DE TESTE DE ACESSIBILIDADE:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TESTE AUTOMATIZADO (Captura ~30% dos problemas): │
│ │
│ FERRAMENTAS: │
│ • axe-core (mais popular) │
│ • Auditoria de acessibilidade do Lighthouse │
│ • Extensão WAVE do navegador │
│ • Plugin ESLint jsx-a11y │
│ │
│ INTEGRAÇÃO: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ // Na suíte de testes ││
│ │ import { axe } from 'jest-axe'; ││
│ │ ││
│ │ it('should have no a11y violations', async () => { ││
│ │ const { container } = render(<MyComponent />); ││
│ │ const results = await axe(container); ││
│ │ expect(results).toHaveNoViolations(); ││
│ │ }); ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ TESTE MANUAL (Captura restantes ~70%): │
│ │
│ TECLADO: │
│ • Tab através de toda a página │
│ • Usar Enter/Espaço em todos os elementos interativos │
│ • Verificar foco sempre visível │
│ │
│ LEITOR DE TELA: │
│ • Testar com VoiceOver (Mac), NVDA (Windows) │
│ • Navegar títulos, marcos, links │
│ • Completar fluxos principais do usuário │
│ │
│ ZOOM: │
│ • Ampliar para 200% │
│ • Verificar nenhum conteúdo perdido ou sobreposto │
│ │
│ COR: │
│ • Usar simulador de daltonismo │
│ • Verificar significado sem cor │
└─────────────────────────────────────────────────────────────┘
Tarefas A11y
Rastreando Trabalho A11y
TRABALHO A11Y NO GITSCRUM:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TAREFA DE AUDITORIA A11Y: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ A11Y-01: Auditoria de Acessibilidade Q1 ││
│ │ ││
│ │ Escopo: Auditoria completa da aplicação ││
│ │ Padrão: WCAG 2.1 AA ││
│ │ Prazo: Fim do Q1 ││
│ │ ││
│ │ Lista de verificação: ││
│ │ ☐ Varredura automatizada com axe ││
│ │ ☐ Teste manual de teclado ││
│ │ ☐ Teste de leitor de tela (VoiceOver + NVDA) ││
│ │ ☐ Documentar todos os problemas encontrados ││
│ │ ☐ Priorizar e criar tarefas de correção ││
│ │ ││
│ │ Saída: Backlog de problemas A11Y ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ TAREFA DE CORREÇÃO A11Y: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ A11Y-15: Corrigir rótulos de formulário faltantes no checkout│
│ │ │
│ │ WCAG: 1.3.1 (Informações e Relacionamentos) ││
│ │ Severidade: Grave ││
│ │ Encontrado em: página /checkout ││
│ │ │
│ │ Problema: ││
│ │ Entradas de formulário sem rótulos associados ││
│ │ Leitores de tela não podem identificar campos ││
│ │ ││
│ │ Correção: ││
│ │ Adicionar <label for="..."> a todas as entradas ││
│ │ Ou usar aria-labelledby ││
│ │ ││
│ │ Aceitação: ││
│ │ ☐ Todas as entradas têm rótulos visíveis ││
│ │ ☐ Rótulos corretamente associados ││
│ │ ☐ Leitor de tela anuncia rótulos ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ RÓTULOS: │
│ accessibility, wcag-aa, screen-reader, keyboard │
└─────────────────────────────────────────────────────────────┘
Padrões Comuns
Componentes Acessíveis
PADRÕES DE COMPONENTES ACESSÍVEIS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ DIÁLOGO MODAL: │
│ ✅ Prende foco dentro do modal │
│ ✅ Escape fecha modal │
│ ✅ Retorna foco ao gatilho ao fechar │
│ ✅ role="dialog" aria-modal="true" │
│ ✅ Rotulado com aria-labelledby │
│ │
│ DROPDOWN CUSTOMIZADO: │
│ ✅ role="listbox" e role="option" │
│ ✅ Setas navegam opções │
│ ✅ Enter/Espaço seleciona │
│ ✅ Escape fecha │
│ ✅ aria-expanded no gatilho │
│ │
│ ABAS: │
│ ✅ role="tablist", role="tab", role="tabpanel" │
│ ✅ Setas alternam abas │
│ ✅ aria-selected na aba ativa │
│ ✅ Painéis de abas rotulados │
│ │
│ NOTIFICAÇÕES TOAST: │
│ ✅ role="alert" ou aria-live="polite" │
│ ✅ Importante: role="alert" (urgente) │
│ ✅ Menos urgente: aria-live="polite" │
│ ✅ Pode ser dispensado pelo usuário │
│ │
│ ALTERNÂNCIA/INTERRUPTOR: │
│ ✅ role="switch" (ou checkbox) │
│ ✅ Estado aria-checked │
│ ✅ Rótulo claro indicando o que é alternado │
│ ✅ Mudança de estado anunciada │
│ │
│ RECURSOS: │
│ • WAI-ARIA Authoring Practices (padrões oficiais) │
│ • Inclusive Components (livro) │
│ • a11y-style-guide │
└─────────────────────────────────────────────────────────────┘