WAVE é uma ferramenta gratuita e poderosa de avaliação de acessibilidade que destaca problemas de acessibilidade diretamente em uma página da web, sobrepondo ícones e fornecendo explicações no contexto da página.
Você pode usar o WAVE de três maneiras principais:
- On-line: Insira o URL da página em wave.webaim.org.
- Extensões do navegador: Para Chrome e Firefox, útil para testar páginas locais antes de mesclar na produção.
- API: Para integrar verificações de acessibilidade em fluxos de trabalho automatizados.
Neste artigo, forneceremos instruções passo a passo sobre como fazer auditoria de acessibilidade com a extensão Wave.
Passo a passo: executando uma auditoria de acessibilidade com extensão WAVE
Passo 1: Instalar WAVE
- Vá para a Chrome Web Store ou a página de complementos do Firefox.
- Clique Adicionar ao Chrome/Firefox.
Etapa 2: abra a página que deseja testar
- Navegue até a página da web que deseja auditar.
- Pode ser um host local ou uma página de produção.
Etapa 3: iniciar o WAVE
- Clique no ícone ONDA na barra de ferramentas do seu navegador. Será o sinal W.
- A página é recarregada com um barra lateral painel mostrando resultados.
A barra lateral categoriza as descobertas em:
- Erros (vermelho): Problemas definitivos
- Exemplo: texto alternativo ausente, títulos vazios
- Alertas (amarelo): Possíveis problemas que precisam de revisão.
- Recursos (verde): Elementos de acessibilidade detectados (por exemplo, títulos, pontos de referência ARIA).
- Erros de contraste (azul): Texto de baixo contraste.
Você pode clicar em “Ver detalhes” para abrir a guia de detalhes. A guia de detalhes fornece mais informações sobre os erros vistos na guia Resumo.
Olhando a guia de detalhes, podemos ver que os 36 erros mostrados na página Resumo são divididos em 24 erros “Cabeçalho vazio” e 12 referências ARIA quebradas.
Etapa 5: explorar os ícones na página
Junto com a guia Resumo e Detalhes, os ícones são sobrepostos na própria página que ilustram:
- 🔴 Ícones de erro vermelhos – questões críticas.
- 🟡 Alertas amarelos – problemas potenciais.
- 🟢 Recursos verdes — recursos de acessibilidade presentes.
- 🔵 Erros de contraste azul — baixo contraste de cores.
Selecione um ícone para abrir os detalhes na barra lateral.
Na imagem acima podemos ver um exemplo de erro “Título vazio” mostrado na página de resumo. Vemos a localização do título na página. Clicar no ícone vermelho abre um pop-up com mais informações sobre o erro.
Etapa 7: use o verificador de contraste
- Clique no Aba Contraste na barra lateral.
- WAVE mostra texto que não atende às taxas de contraste WCAG AA/AAA.
- A extensão selecionará a cor de primeiro plano e de fundo usada e informará ao usuário se houver um erro de baixo contraste na página.
- No exemplo abaixo, há um contraste muito baixo entre o texto e a cor de fundo. O contraste de cores não atende aos requisitos WCAG AA e WCAG AAA.
Etapa 8: validar com teste manual
- WAVE detecta problemas estruturais, mas não o qualidade de soluções.
- Por exemplo, pode confirmar a existência de texto alternativo, mas não se é significativo.
- Suplemento com navegação pelo teclado, verificações do leitor de telae teste de usuário.
Etapa 10: corrigir e testar novamente
- Resolva problemas sinalizados em seu código.
- Execute novamente o WAVE para confirmar as correções.
Problemas comuns Destaques do WAVE
Algumas barreiras de acessibilidade frequentes que você verá incluem:
- Ausente ou inválido todo o texto em imagens.
- Baixo contraste de cores entre texto e fundo.
- Links vazios ou quebrados.
- Ausente formar rótulos.
- Incorreto estrutura de títulos.
- Uso indevido de Funções ARIA
Conclusão
A auditoria com WAVE oferece insights visuais imediatos sobre a acessibilidade do seu site. Embora não substitua testes manuais completos ou feedback do usuário, é uma ferramenta poderosa para detectar problemas comuns, aprender práticas recomendadas e tornar a acessibilidade parte de sua cultura de desenvolvimento.
Ao integrar as auditorias WAVE ao seu processo, você dá um passo importante na construção de uma web mais inclusiva e utilizável para todos.
