Acessibilidade digital: por que seu site precisa disso

Acessibilidade digital é fazer com que o site funcione para quem enxerga pouco, não enxerga, não ouve, tem dificuldade motora ou simplesmente está com o braço quebrado. Não é um recurso extra: é a diferença entre alguém conseguir ou não conseguir comprar de você.

O tamanho do público

Segundo o IBGE, milhões de brasileiros têm algum tipo de deficiência. Some a isso o envelhecimento da população - visão cansada e pouca firmeza no toque são realidade de qualquer pessoa a partir de certa idade. Site inacessível recorta silenciosamente uma fatia enorme do seu mercado.

O que a lei diz

A Lei Brasileira de Inclusão (13.146/2015) determina que sites de empresas prestadoras de serviço sejam acessíveis. A referência técnica é o WCAG, adotado internacionalmente, e o eMAG no setor público. O nível AA do WCAG é o alvo prático da maioria dos projetos privados.

Os ajustes que mais mudam a experiência

Contraste suficiente

Texto cinza-claro sobre branco é bonito no Figma e ilegível no celular sob o sol. O mínimo do WCAG AA é 4,5:1 para texto normal. Existem verificadores gratuitos - leva minutos conferir a paleta inteira.

Texto alternativo nas imagens

Descreva o que a imagem comunica. "Fachada do edifício com jardim frontal" ajuda; "imagem1.jpg" não ajuda ninguém. Imagem puramente decorativa deve ter alt vazio, para o leitor de tela ignorá-la.

Navegação por teclado

Percorra o site inteiro usando só Tab e Enter. Consegue chegar ao menu, abrir o submenu, preencher o formulário e enviar? O foco fica visível em cada parada? Se a resposta for não, quem depende de teclado está travado.

Formulários com rótulo de verdade

Placeholder não é rótulo: some quando a pessoa digita e some para o leitor de tela. Todo campo precisa de um <label> associado, e o erro precisa dizer o que corrigir, não só pintar a borda de vermelho.

Estrutura de títulos coerente

Um <h1> por página, seguido de h2 e h3 em ordem. Quem usa leitor de tela navega saltando entre títulos - hierarquia bagunçada é como um índice fora de ordem.

HTML semântico

Use <button> para botão e <a> para link. Div com clique não recebe foco, não responde ao Enter e não é anunciada como elemento interativo.

Vídeo com legenda

Legenda serve para quem não ouve e para a maioria silenciosa que assiste vídeo sem som no transporte público.

Respeitar quem pede menos movimento

Sistemas operacionais têm a preferência "reduzir movimento". Animações grandes podem causar desconforto real em pessoas com distúrbios vestibulares - honrar essa configuração custa duas linhas de CSS.

O bônus: acessibilidade melhora o SEO

Texto alternativo, hierarquia de títulos, HTML semântico e bom contraste são exatamente o que o Google usa para entender e avaliar uma página. Não é coincidência: os dois lados querem a mesma coisa - conteúdo compreensível.

Por onde começar

Rode o Lighthouse na aba de acessibilidade, corrija contraste e textos alternativos, e teste a navegação por teclado. Esses três passos resolvem a maior parte dos problemas na maioria dos sites - e nenhum deles exige refazer o projeto.

Nos nossos projetos, acessibilidade entra desde o protótipo. Fale com a gente.