RednewDesenvolvimento
Acessibilidade web: a WCAG na prática, sem complicação
Pontos principais
- A WCAG 2.2 é recomendação do W3C desde outubro de 2023.
- O nível AA é a meta mais comum.
- Contraste, teclado, alternativas e formulários resolvem muito.
- Ferramenta automática encontra só parte dos problemas.
A resposta curta: a WCAG é o conjunto de critérios do W3C para tornar o conteúdo web acessível, e a versão 2.2 é recomendação desde outubro de 2023. Na prática, a meta mais comum é o nível AA, e quatro frentes resolvem a maior parte dos problemas: contraste, navegação por teclado, alternativas para imagens e formulários bem rotulados.
Os quatro princípios
| Princípio | Pergunta |
|---|---|
| Perceptível | A pessoa consegue perceber o conteúdo, por exemplo, ouvindo o texto de uma imagem? |
| Operável | Dá para usar tudo só com o teclado? |
| Compreensível | O texto e o comportamento da página são claros? |
| Robusto | Funciona com tecnologias assistivas, como leitores de tela? |
Fonte: WCAG 2.2 do W3C.
Os critérios que mais aparecem
- Contraste: 4,5:1 para texto normal e 3:1 para texto grande no nível AA.
- Teclado: tudo que funciona com mouse precisa funcionar com Tab, Enter e Espaço.
- Foco visível: a pessoa precisa ver onde está o foco.
- Texto alternativo: imagens informativas com alt descritivo.
- Formulários: label em cada campo e erros explicados em texto.
Foco visível em CSS
:focus-visible {
outline: 3px solid #d6003a;
outline-offset: 2px;
}:focus-visible mostra o contorno quando a navegação é por teclado, sem poluir o clique do mouse. Nunca remova o outline sem colocar outro indicador no lugar.
Como testar hoje
- Rode a análise de site e veja a nota de acessibilidade.
- Navegue pela página só com o teclado, do topo ao rodapé.
- Ligue o leitor de tela do sistema e ouça a página principal.
- Confira o contraste dos textos sobre fundos coloridos.
O que a 2.2 acrescentou
A versão 2.2 manteve os critérios da 2.1 e acrescentou novos, com atenção especial a quem usa teclado, quem tem baixa visão e quem tem dificuldades cognitivas ou motoras. Entre os temas estão o foco que não pode ficar escondido atrás de outros elementos, alvos de toque com tamanho mínimo e alternativas para ações de arrastar.
Para a maioria dos sites, o caminho continua o mesmo: começar pelo nível AA e pelos fluxos mais usados. Depois, transformar as correções em hábito: cada componente novo já nasce com contraste, foco visível, rótulos e navegação por teclado, em vez de ser corrigido depois.
Em resumo
- WCAG 2.2, meta no nível AA.
- Contraste, teclado, alternativas e formulários.
- Foco sempre visível.
- Ferramenta automática mais teste humano.
Veja SEO e performance.
Perguntas frequentes
O que significa nível AA?
A WCAG tem três níveis de conformidade: A, AA e AAA. O AA é o mais usado como meta, porque cobre os problemas mais importantes sem exigências muito específicas.
Ferramenta automática basta?
Não. Ela encontra parte dos problemas, como contraste e falta de alt. Navegação por teclado e qualidade dos textos alternativos precisam de teste humano.
Por onde começar num site existente?
Pelas páginas mais visitadas e pelos fluxos principais, como contato e compra.
Acessibilidade deixa o site feio?
Não. Bom contraste, foco visível e textos claros combinam com bom design.
