Guia Prático de Acessibilidade Web
Acessibilidade significa garantir uma web utilizável por todos: pessoas com deficiência, idosos, usuários móveis, conexões lentas, braço quebrado, ambientes barulhentos, etc.
Por que acessibilidade?
Quando projetamos para deficiência, resolvemos problemas que todos encontram
As rampas de calçada revolucionaram as cidades para cadeiras de rodas, mas também para todos os pedestres com malas, carrinhos de bebê ou bicicletas.
Uma melhoria para alguns beneficia a todos. Este conceito, nascido das rampas de acesso nas ruas, aplica-se perfeitamente à web.
Exemplo típico de uma rampa de calçada
♿ Rampas de calçada
Concebido para : Usuários de cadeira de rodas
Também beneficia : Pais com carrinhos de bebê, ciclistas, entregadores com carrinhos de mão, pessoas com malas de rodinhas, skates, patinetes, idosos
🎬 Legendas de vídeo
Concebido para : Pessoas surdas ou com deficiência auditiva
Também beneficia : Assistir vídeos no metrô, aprender um idioma estrangeiro, acompanhar uma conferência em ambiente barulhento, entender sotaques difíceis
⌨️ Navegação por teclado
Concebido para : Pessoas que não podem usar um mouse
Também beneficia : Desenvolvedores usando atalhos, usuários com mouse quebrado, usuários avançados preferindo teclado, pessoas com braço engessado
📱 Controle por voz em smartphone
Concebido para : Pessoas cegas e com deficiência motora
Também beneficia : Mensagens enquanto dirige, esportes com fones de ouvido, mãos ocupadas com ferramentas, controle remoto, multitarefa no escritório
🪥 Escova de dentes elétrica
Concebido para : Pessoas com mobilidade reduzida ou artrite (1954)
Também beneficia : Melhor escovação para todos, recomendada por dentistas, crianças aprendendo, pessoas cansadas, eficiência superior comprovada
🎧 Audiolivros
Concebido para : Pessoas cegas (1932, American Foundation for the Blind)
Também beneficia : Motoristas, corredores, multitarefa, disléxicos, crianças aprendendo a ler, $1,3 bilhão em vendas em 2020
Acessibilidade não é uma restrição, é inovação disfarçada.
Ferramentas gratuitas para testar acessibilidade
Essas ferramentas ajudam você a identificar e corrigir problemas de acessibilidade:
WAVE
Extensão de navegador que visualiza erros de acessibilidade diretamente na sua página
axe DevTools
Extensão de desenvolvedor integrada ao DevTools, muito precisa e detalhada
Lighthouse
Auditoria integrada ao Chrome DevTools, inclui pontuação geral de acessibilidade
MDN Accessibility
Documentação de referência completa sobre acessibilidade web
Colour Contrast Analyser
Aplicação gratuita para testar contrastes de cores de acordo com WCAG
Accessibility Insights
Conjunto de ferramentas da Microsoft para testes manuais e automatizados aprofundados
Accessible Game Jam
InterativoTeste seus conhecimentos sobre acessibilidade web de forma interativa! Um jogo para aprender se divertindo.
Leitores de tela comuns
Compreender os leitores de tela mais usados para testar melhor suas interfaces:
VoiceOver
macOS/iOSLeitor de tela integrado em todos os dispositivos Apple
TalkBack
AndroidLeitor de tela padrão no Android
🧪 Como testar com um leitor de tela
- Feche os olhos ou desligue a tela
- Navegue apenas com teclado (Tab, setas, Enter, Espaço)
- Ouça atentamente o que é anunciado
- Verifique se tudo é compreensível sem ver a tela
Nota : 15 minutos de teste com leitor de tela valem mais do que horas de auditoria automatizada.
Navegação rápida
Use o menu lateral ou esses atalhos para explorar os exemplos: