Mais de um bilhao de pessoas no mundo vivem com alguma forma de deficiencia. Isso representa aproximadamente 15 % da populacao global. Entre elas estao pessoas cegas ou com baixa visao, pessoas surdas ou com dificuldades auditivas, pessoas com deficiencias motoras, diferencas cognitivas ou condicoes temporarias como um braco quebrado ou uma enxaqueca.
Quando construimos sites sem considerar essas realidades, nao estamos apenas tornando as coisas inconvenientes. Estamos excluindo pessoas do acesso a informacoes, servicos e oportunidades que outros consideram garantidos. Acessibilidade nao e uma funcionalidade. E uma responsabilidade.
O que significa acessibilidade web
Acessibilidade web significa projetar e desenvolver sites para que pessoas com deficiencias possam percebe-los, compreende-los, navegar por eles e interagir com eles. Tambem significa que possam contribuir para a web.
Isso vai alem dos leitores de tela. A acessibilidade abrange:
- Visual: cegueira, baixa visao, daltonismo
- Auditiva: surdez, dificuldades auditivas
- Motora: controle motor fino limitado, tremores, paralisia
- Cognitiva: dislexia, TDAH, dificuldades de memoria, dificuldades de aprendizagem
- Temporaria e situacional: um pulso quebrado, luz solar intensa na tela, um ambiente barulhento, internet lenta
A ideia central e que o design acessivel beneficia todos. Legendas ajudam em um local barulhento. Alto contraste ajuda sob luz intensa. Navegacao por teclado ajuda usuarios avancados. Escrita clara ajuda falantes nao nativos. Acessibilidade nao e um modo especial — e bom design.
O padrao WCAG
As Diretrizes de Acessibilidade para Conteudo Web (WCAG) sao o padrao internacional para acessibilidade web, publicadas pelo W3C. A versao atual e WCAG 2.2, organizada em torno de quatro principios conhecidos pelo acronimo POUR:
Perceptivel (Perceivable)
As informacoes devem ser apresentadas de formas que todos os usuarios possam perceber.
- Alternativas de texto: toda imagem precisa de um atributo
altque descreva seu conteudo. Imagens decorativas usamalt="". - Legendas e transcricoes: conteudo de video precisa de legendas; conteudo de audio precisa de transcricoes.
- Estrutura adaptavel: o conteudo deve fazer sentido quando os estilos sao removidos. Use HTML semantico (
<h1>,<nav>,<main>,<article>), nao apenas estilos visuais. - Conteudo distinguivel: contraste de cor suficiente, texto redimensionavel, nenhuma informacao transmitida apenas por cor.
Operavel (Operable)
Os usuarios devem poder operar a interface.
- Acessivel por teclado: todo elemento interativo deve ser alcancavel e utilizavel apenas com o teclado. Sem armadilhas de mouse.
- Tempo suficiente: se o conteudo tiver limites de tempo, os usuarios devem poder estende-los ou desativa-los.
- Sem gatilhos de convulsao: evite conteudo que pisque mais de tres vezes por segundo.
- Navegavel: titulos de pagina claros, estrutura logica de cabecalhos, links de navegacao rapida, indicadores de foco visiveis.
Compreensivel (Understandable)
O conteudo e a interface devem ser compreensiveis.
- Texto legivel: especifique o idioma da pagina (atributo
lang). Use linguagem clara e simples quando possivel. - Comportamento previsivel: a navegacao deve ser consistente. As paginas nao devem mudar de contexto inesperadamente.
- Assistencia na entrada: rotule os campos de formulario claramente. Forneca mensagens de erro uteis que expliquem o que deu errado e como corrigir.
Robusto (Robust)
O conteudo deve ser robusto o suficiente para funcionar com tecnologias atuais e futuras.
- HTML valido: marcacao semantica correta que tecnologias assistivas possam interpretar de forma confiavel.
- Nome, funcao, valor: componentes personalizados devem expor seu proposito para APIs de acessibilidade (via ARIA quando necessario).
Niveis de conformidade
WCAG define tres niveis:
| Nivel | Significado | Exemplo |
|---|---|---|
| A | Acessibilidade minima | Imagens tem texto alternativo, paginas tem titulos |
| AA | Meta padrao para a maioria dos sites | Relacao de contraste de cor de pelo menos 4,5:1 para texto normal |
| AAA | Nivel mais alto, nem sempre alcancavel | Relacao de contraste de 7:1, linguagem de sinais para todos os videos |
A maioria das legislacoes no mundo exige conformidade com o Nivel AA. Este e o nivel que voce deve almejar.
Barreiras comuns e como corrigi-las
Texto alternativo ausente em imagens
O problema: usuarios de leitores de tela ouvem "imagem" ou nada.
A solucao: adicione texto alt descritivo a toda imagem informativa. Para imagens decorativas, use alt="" para que os leitores de tela as ignorem.
<!-- Correto -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorativa -->
<img src="divider.svg" alt="" />
Contraste de cor insuficiente
O problema: pessoas com baixa visao ou daltonismo nao conseguem ler o texto.
A solucao: garanta uma relacao de contraste minima de 4,5:1 para texto normal e 3:1 para texto grande (18px+ ou 14px negrito). Use uma ferramenta de verificacao de contraste para checar suas combinacoes de cores.
Voce pode verificar o contraste das suas cores agora mesmo com nosso Verificador de contraste. Ele mostra os resultados WCAG AA e AAA instantaneamente.
Rotulos de formulario ausentes
O problema: usuarios de leitores de tela nao sabem para que serve um campo de formulario.
A solucao: todo campo de entrada precisa de um elemento <label> visivel vinculado pelo atributo for.
<!-- Correto -->
<label for="email">Endereco de email</label>
<input type="email" id="email" name="email" />
<!-- Incorreto: o placeholder nao e um rotulo -->
<input type="email" placeholder="Endereco de email" />
Sem navegacao por teclado
O problema: usuarios que nao podem usar o mouse ficam presos.
A solucao: use elementos HTML nativos (<button>, <a>, <select>) que sao acessiveis por teclado por padrao. Se voce construir componentes personalizados, garanta que sejam focalizaveis e respondam a eventos de teclado. Nunca remova os contornos de foco sem fornecer uma alternativa.
Estrutura de pagina ausente
O problema: usuarios de leitores de tela nao conseguem navegar de forma eficiente.
A solucao: use HTML semantico. Um <h1> por pagina, hierarquia logica de cabecalhos (sem pular niveis), landmarks (<nav>, <main>, <footer>).
Reproducao automatica de midia
O problema: audio inesperado atrapalha usuarios de leitores de tela. A reproducao automatica de video pode provocar convulsoes ou angustia.
A solucao: nunca reproduza audio automaticamente. Se o video for reproduzido automaticamente, garanta que nao tenha audio por padrao e forneca controles de pausa.
Cor nao e suficiente
Nunca confie apenas na cor para transmitir informacoes. Considere:
- Um campo de formulario com borda vermelha para erros tambem precisa de um icone de erro ou mensagem de texto
- Um grafico com linhas coloridas tambem precisa de padroes, rotulos ou uma legenda
- Um link no texto corrido precisa de sublinhado ou outra dica visual, nao apenas uma mudanca de cor
Aproximadamente 8 % dos homens e 0,5 % das mulheres tem alguma forma de deficiencia na visao de cores. Projetar com isso em mente nao e um caso isolado — e inclusao basica.
Testar a acessibilidade
Testes automatizados
Ferramentas automatizadas detectam aproximadamente 30-40 % dos problemas de acessibilidade. Sao um bom primeiro passo, nao uma solucao completa.
- axe DevTools (extensao do navegador) — analisa uma pagina e relata violacoes WCAG
- Lighthouse (integrado ao Chrome DevTools) — inclui uma auditoria de acessibilidade
- WAVE (ferramenta baseada na web) — sobreposicao visual mostrando problemas
Testes manuais
Muitos problemas de acessibilidade exigem julgamento humano:
- Testes de teclado: desconecte o mouse e navegue todo o seu site com Tab, Enter, Escape e teclas de seta. Voce consegue alcancar tudo? A ordem do foco e logica?
- Testes com leitor de tela: experimente VoiceOver (Mac), NVDA (Windows, gratuito) ou TalkBack (Android). O conteudo faz sentido quando lido em voz alta?
- Testes de zoom: amplie o navegador para 200 %. O layout ainda funciona? Algum conteudo esta cortado ou sobreposto?
- Movimento reduzido: ative "reduzir movimento" nas configuracoes do sistema operacional. As animacoes respeitam essa preferencia?
Testes com usuarios
O feedback mais valioso vem de pessoas que realmente usam tecnologias assistivas em suas vidas diarias. Se seu orcamento permitir, inclua pessoas com deficiencias em seu processo de teste.
Acessibilidade e um espectro, nao uma caixa de selecao
Acessibilidade nao e um projeto unico com uma linha de chegada. E uma pratica continua. Sites mudam, conteudo e adicionado e novas barreiras podem surgir a cada atualizacao.
O objetivo nao e a perfeicao. O objetivo e a melhoria continua e o cuidado genuino com as pessoas que usam o que voce constroi. Comece com as mudancas de maior impacto — contraste de cor, texto alternativo, navegacao por teclado, rotulos de formulario — e construa a partir dai.
Cada barreira que voce remove e uma porta que voce abre.
Checklist rapido
- Todas as imagens tem texto
altsignificativo (oualt=""se decorativas) - O contraste de cor atende ao WCAG AA (4,5:1 para texto, 3:1 para texto grande)
- Todos os campos de formulario tem rotulos visiveis
- O site e completamente navegavel por teclado
- Os cabecalhos seguem uma hierarquia logica
- Os indicadores de foco sao visiveis
- O idioma da pagina esta definido (atributo
langno<html>) - Nenhuma informacao e transmitida apenas por cor
- Os videos tem legendas
- As animacoes respeitam
prefers-reduced-motion