Mais de 1 bilhão de pessoas no mundo vivem com alguma forma de deficiência. Quando seu site não é acessível, você está excluindo até 15% da população global — e no Brasil, são mais de 45 milhões de pessoas segundo o IBGE. Acessibilidade web não é caridade nem compliance burocrático — é boa engenharia e bom negócio.
Os quatro princípios WCAG
As Web Content Accessibility Guidelines (WCAG) são organizadas em quatro princípios fundamentais. Perceptível: toda informação deve ser apresentada de forma que o usuário possa percebê-la, independentemente do sentido utilizado. Operável: toda funcionalidade deve ser operável via teclado e outros dispositivos assistivos. Compreensível: o conteúdo e a operação da interface devem ser compreensíveis. Robusto: o conteúdo deve funcionar com tecnologias assistivas atuais e futuras.
O nível AA do WCAG é o padrão mínimo recomendado e exigido por legislação em muitos países. No Brasil, a Lei Brasileira de Inclusão (Lei 13.146/2015) determina acessibilidade em sites de empresas com sede no país.
HTML semântico: a base de tudo
A forma mais impactante de melhorar a acessibilidade é usar HTML semântico corretamente. Elementos como nav, main, article, section, aside, header e footer fornecem landmarks que leitores de tela usam para navegação rápida. Headings h1 a h6 em ordem hierárquica criar uma tabela de conteúdos navegável. Listas ul, ol e dl estruturam conteúdo de forma que assistive technologies entendam a relação entre itens.
O erro mais comum é usar div e span para tudo, perdendo toda a semântica. Um botão feito com um simples div com onClick não é focável por teclado, não é anunciado como botão por leitores de tela, e não ativa com Enter/Space. Use o elemento button nativo, que traz tudo isso gratuitamente. Quando precisar de semântica que HTML não oferece, aí sim use roles e atributos ARIA.
Teclado: navegação sem mouse
Milhões de pessoas navegam exclusivamente por teclado: pessoas com deficiência motora, usuários de leitores de tela, e power users que preferem eficiência. Toda funcionalidade do seu site deve ser acessível via Tab (para navegar entre elementos interativos), Enter/Space (para ativar), Escape (para fechar modais/dropdowns), e setas (para navegar dentro de componentes como tabs, menus e radiobotões).
Teste toda página navegando apenas com teclado. O indicador de foco deve ser sempre visível — nunca use outline: none sem fornecer um estilo alternativo. A ordem de tabulação deve seguir a ordem visual da página. Skip links no topo permitem que usuários de teclado pulem a navegação e vão direto ao conteúdo principal.
Cores e contraste
Nunca use cor como único indicador de informação. Campos com erro marcados apenas em vermelho são invisíveis para daltônicos — adicione ícones, texto ou bordas. O contraste mínimo entre texto e fundo deve ser 4.5:1 para texto normal e 3:1 para texto grande (WCAG AA). Ferramentas como o Contrast Checker da WebAIM validam instantaneamente.
Imagens e mídia
Toda imagem informativa precisa de alt text descritivo. Não “foto.jpg” — mas “Gráfico de barras mostrando crescimento de 40% nas vendas do Q1 para Q2”. Imagens decorativas devem ter alt vazio para serem ignoradas por leitores de tela. Vídeos precisam de legendas (captions) e idealmente audiodescrição. Áudio precisa de transcrição textual.
Ferramentas e testes
Lighthouse e o axe DevTools extensão identificam problemas automaticamente — configure para rodar na pipeline de CI/CD. NVDA (Windows, gratuito) e VoiceOver (Mac/iOS, nativo) são leitores de tela para testes manuais. Teste com usuários reais com deficiência sempre que possível: a perspectiva deles revela problemas que nenhuma ferramenta automatizada detecta.
Acessibilidade não é um projeto com data de conclusão — é uma prática contínua integrada ao processo de desenvolvimento. Comece pelos problemas mais impactantes (semântica HTML, contraste, navegação por teclado) e expanda progressivamente. Cada melhoria torna seu produto utilizável por mais pessoas — e isso é o que bom software deveria fazer.
Tem um projeto em mente?
Somos especialistas em transformar ideias em produtos digitais. Apps, sites, automações e IA — vamos construir juntos.
