Como tornar seu site acessível e incluir todos os usuários

Tornar um site acessível é fazer com que qualquer pessoa consiga ler, navegar e usar o site, seja com deficiência visual, auditiva, motora ou cognitiva, seja usando teclado, leitor de tela ou zoom. A referência técnica atual é a WCAG 2.2, no nível AA, e a Lei Brasileira de Inclusão (Lei 13.146/2015) exige acessibilidade nos sites mantidos por empresas com sede ou representação comercial no país. Uma pequena empresa consegue dar os primeiros passos com poucos ajustes: contraste, texto alternativo, rótulo nos formulários, navegação por teclado e foco visível.

• A versão atual da WCAG é a 2.2, que virou Recomendação do W3C em 12 de dezembro de 2024.
• O artigo 63 da Lei Brasileira de Inclusão trata da acessibilidade em sites de empresas e de órgãos de governo.
• O eMAG, modelo do governo federal, está na versão 3.1 e serve de referência, mas a base internacional é a WCAG.
• Contraste de 4,5 para 1 no texto comum é o ajuste que mais falta nos sites.
• Quem usa só o teclado precisa alcançar todo o site e ver onde está o foco.

Sites acessíveis funcionam melhor para todo mundo: para quem usa o celular sob o sol, para quem tem uma das mãos ocupada e para quem está com a vista cansada no fim do dia.

Este guia explica o que a lei diz sobre sites, o que é a WCAG e qual versão vale hoje, e o que você pode fazer agora. Se você pretende construir ou renovar o seu site com esses cuidados desde o início, a página de criação de sites profissionais em Florianópolis mostra como o trabalho é organizado.

Por que a acessibilidade importa para o seu negócio

A acessibilidade importa porque uma parcela grande do público encontra barreiras em sites que não foram pensados para ela, e essas pessoas são clientes em potencial. O Censo 2022 do IBGE contou 14,4 milhões de brasileiros com deficiência, o que equivale a 7,3% da população com 2 anos ou mais.

Entre eles, 7,9 milhões têm dificuldade para enxergar, 5,2 milhões para andar ou subir degraus, 2,7 milhões para manusear objetos e 2,6 milhões para ouvir, segundo o IBGE. O percentual também sobe com a idade: passa de 10% a partir dos 55 anos e ultrapassa 30% aos 80.

O cenário dos sites mostra o tamanho do trabalho. O relatório WebAIM Million de 2026, que analisou as páginas iniciais de um milhão de sites, encontrou falhas de WCAG detectáveis em 95,9% delas.

As seis falhas mais frequentes do relatório são as que uma pequena empresa resolve primeiro:

• Texto com contraste baixo, em 83,9% das páginas.
• Imagens sem texto alternativo, em 53,1%.
• Campos de formulário sem rótulo, em 51%.
• Links vazios, em 46,3%.
• Botões vazios, em 30,6%.
• Página sem idioma declarado, em 13,5%.

Em texto: corrigir essas seis coisas deixa o seu site melhor do que a maioria, e nenhuma delas exige um projeto grande. Várias delas, como texto alternativo e títulos bem organizados, também coincidem com boas práticas de otimização para o Google.

O que a Lei Brasileira de Inclusão diz sobre sites

A Lei Brasileira de Inclusão da Pessoa com Deficiência, a Lei 13.146, de 6 de julho de 2015, trata da acessibilidade em sites no artigo 63. O texto diz que é obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no país ou por órgãos de governo, para uso da pessoa com deficiência, com acesso às informações disponíveis conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.

Três pontos do texto merecem atenção:

• O artigo não faz distinção de porte: fala em empresas com sede ou representação comercial no país.
• O parágrafo 1º diz que os sítios devem conter símbolo de acessibilidade em destaque.
• O artigo 64 condiciona à acessibilidade dos sites o financiamento previsto no inciso III do artigo 54 da mesma lei.

A lei está em vigor desde janeiro de 2016. Ela não nomeia uma norma técnica específica e remete às melhores práticas e diretrizes adotadas internacionalmente, e a referência internacional mais usada para isso é a WCAG.

Este guia trata de boas práticas e não substitui orientação jurídica. Se a sua empresa precisa avaliar risco legal, um advogado com experiência no tema pode interpretar como a lei se aplica ao seu caso.

O que é a WCAG e qual versão vale hoje

A WCAG, sigla em inglês para Diretrizes de Acessibilidade para Conteúdo Web, é o padrão internacional de acessibilidade web publicado pelo W3C, o consórcio que define os padrões da internet. A versão atual é a 2.2, que virou Recomendação em 12 de dezembro de 2024.

A WCAG 2.2 é compatível com as versões anteriores: quem atende a 2.2 também atende à 2.0 e à 2.1. Ela organiza cada critério em três níveis, A, AA e AAA, e o nível AA costuma ser o alvo para sites em geral.

A versão 2.2 acrescentou nove critérios, e os que mais interessam a um site de empresa local são estes:

Critério	O que pede	Nível
2.4.11 Foco não obscurecido (mínimo)	O item em foco não pode ficar escondido atrás de outros elementos, como um banner fixo	AA
2.5.7 Movimentos de arrastar	Toda ação de arrastar precisa ter alternativa de toque simples	AA
2.5.8 Tamanho do alvo (mínimo)	Áreas de toque de pelo menos 24 por 24 pixels CSS, ou com espaço equivalente ao redor	AA
3.2.6 Ajuda consistente	Contato e ajuda aparecem no mesmo lugar nas páginas	A
3.3.7 Entrada redundante	Não pedir de novo dados que a pessoa já informou no mesmo fluxo	A
3.3.8 Autenticação acessível (mínimo)	Login sem exigir teste de memória ou de cálculo	AA

A versão 2.2 também removeu o critério 4.1.1, sobre análise do código, que ficou obsoleto. A WCAG 3, por sua vez, segue como rascunho incompleto, e o W3C informa que a WCAG 2 não será descontinuada por vários anos depois de a nova versão ficar pronta.

E o eMAG, ele vale para o meu site

O eMAG, Modelo de Acessibilidade em Governo Eletrônico, é o conjunto de recomendações do governo federal para sítios e portais públicos. Uma portaria de 2007 o institucionalizou na administração de tecnologia da informação do governo federal, e a versão atual, a 3.1, é de abril de 2014.

Ele foi elaborado com base na WCAG 2.0, e a página oficial do gov.br não menciona atualização para versões posteriores. Para uma empresa privada, o eMAG serve como material de consulta, e a WCAG 2.2 é a base mais atual para orientar o site.

O que uma pequena empresa pode fazer agora

Uma pequena empresa pode cobrir a maior parte dos problemas mais comuns com sete ajustes, que cabem em poucos dias de trabalho. Cada um tem um critério da WCAG por trás.

Ajuste	Como fazer	Critério	Nível
Contraste do texto	Texto comum com 4,5 para 1 contra o fundo e texto grande com 3 para 1	1.4.3	AA
Texto alternativo	Descrever as imagens que carregam informação	1.1.1	A
Formulário com rótulo	Cada campo com um nome visível e associado a ele	3.3.2	A
Navegação por teclado	Chegar a todo link, botão e campo apenas com a tecla Tab	2.1.1	A
Foco visível	Mostrar claramente qual item está selecionado	2.4.7	AA
Idioma e título da página	Declarar o português e dar um título a cada página	3.1.1 e 2.4.2	A
Vídeo com legenda	Legendar vídeos gravados que tenham fala	1.2.2	A

Contraste do texto

O critério 1.4.3 pede contraste de 4,5 para 1 entre texto e fundo, e de 3 para 1 para texto grande, que o W3C define como de pelo menos 18 pontos ou 14 pontos em negrito. Botões, campos e ícones que carregam informação precisam de 3 para 1, pelo critério 1.4.11.

Ferramentas gratuitas de verificação de contraste mostram o resultado ao colar os códigos das duas cores. O caso mais frequente de falha é o cinza claro sobre branco em textos secundários e o botão claro sobre fundo claro.

Texto alternativo

O texto alternativo, ou alt, é a descrição da imagem lida pelo leitor de tela, o programa que fala o conteúdo do site em voz alta. Ele resolve a falha que aparece em 53,1% das páginas iniciais do relatório WebAIM.

Escreva o que a imagem mostra e o que ela faz na página, em uma frase curta. Fotos só decorativas podem ter o alt vazio, para o leitor de tela pular.

Formulário com rótulo

Cada campo do formulário precisa de um rótulo visível, como Nome ou Telefone, ligado ao campo. O texto de exemplo dentro do campo some quando a pessoa começa a digitar, e por isso não substitui o rótulo.

Mensagens de erro precisam dizer qual campo tem problema e como corrigir, em texto, sem depender só de vermelho. Formulários com poucos campos e rótulos claros também ajudam na conversão, como mostra o guia sobre formulários inteligentes.

Navegação por teclado e foco visível

Muita gente usa o site sem mouse, só com o teclado, e precisa chegar a tudo com a tecla Tab. O teste é simples e leva um minuto: abra o site, aperte Tab repetidas vezes e confira se dá para alcançar cada link, botão e campo, na ordem certa.

O foco visível (critério 2.4.7) é o contorno que mostra em qual item você está. Remover esse contorno por estética deixa quem usa teclado sem saber onde está, e a WCAG 2.2 ainda pede que o item em foco não fique escondido atrás de elementos fixos.

Área de toque e leitura no celular

Botões e links pequenos demais causam toque errado, e a WCAG 2.2 fixa o mínimo de 24 por 24 pixels CSS para áreas de toque, com exceções para alvos com espaço suficiente ao redor. Isso beneficia quem tem dificuldade motora e qualquer pessoa usando o celular andando.

O guia sobre site responsivo no celular traz o restante dos cuidados de tela pequena. A experiência geral de navegação está no texto sobre experiência do usuário no site.

Como testar a acessibilidade do seu site

Um teste simples de cinco passos já revela a maior parte dos problemas visíveis. Você não precisa de ferramenta paga para começar:

1. Navegue só com a tecla Tab e confira se o foco aparece e a ordem faz sentido.
2. Amplie a página a 200% no navegador e veja se nada some ou se sobrepõe.
3. Cole as cores do texto e do fundo em uma ferramenta de contraste.
4. Ative um leitor de tela (o Narrador do Windows, o VoiceOver da Apple ou o TalkBack do Android) e ouça a página inicial.
5. Rode uma ferramenta automática, como a auditoria de acessibilidade do Lighthouse, e trate o resultado como ponto de partida.

Ferramenta automática encontra parte dos problemas, como contraste e imagem sem alt, e o restante depende de uma pessoa navegando. Por isso o teste manual com teclado e leitor de tela continua no processo.

Como tratamos a acessibilidade nos projetos

Recomendamos que a acessibilidade entre no projeto desde o desenho, e não como remendo depois do site pronto. É o critério que defendemos: cada escolha de cor, de fonte e de formulário já nasce respeitando o contraste, o teclado e a leitura em tela pequena.

Recomendamos usar o contraste de 4,5 para 1 como régua na escolha das cores e montar os formulários com um rótulo visível em cada campo. Na Virtual Floripa, testamos cada página em tela pequena antes de entregar. Entregamos o site com painel visual, e recomendamos ao cliente escrever o texto alternativo de cada foto nova que ele subir.

Quando um site que já existe chega até nós, recomendamos começar pelos sete ajustes da tabela, porque eles resolvem os problemas mais frequentes e dão resultado logo. Depois disso, vale rodar a lista completa da WCAG 2.2 nível AA e definir a ordem do que resta.

Erros comuns e como corrigir

Os erros mais comuns em acessibilidade nascem de escolhas visuais tomadas sem teste, e todos têm solução direta.

• Texto cinza claro sobre fundo branco: escureça o texto até chegar a 4,5 para 1.
• Contorno de foco removido por estética: devolva o contorno, com contraste de 3 para 1 contra o fundo.
• Imagem com texto dentro: escreva o texto como texto de verdade e use o alt para descrever a imagem.
• Campo de formulário só com texto de exemplo: acrescente um rótulo visível acima do campo.
• Erro indicado só pela cor vermelha: acrescente uma mensagem escrita.
• Menu que só abre com o mouse: teste com Tab e ajuste para funcionar com o teclado.
• Link com texto clique aqui: escreva um texto que diga o destino, como ver os serviços.

Perguntas frequentes

A Lei Brasileira de Inclusão vale para pequena empresa?
O artigo 63 fala em empresas com sede ou representação comercial no país e não distingue o porte. Para saber como isso se aplica ao seu caso, consulte um advogado.

Qual versão da WCAG devo seguir?
A 2.2, no nível AA, que é a versão atual do W3C. Ela é compatível com as anteriores, então atender à 2.2 cobre também a 2.1 e a 2.0.

O eMAG é obrigatório para site de empresa privada?
O eMAG é o modelo do governo federal para sítios e portais públicos. Uma empresa privada pode usá-lo como leitura complementar e adotar a WCAG 2.2 como meta.

Preciso colocar o símbolo de acessibilidade no site?
O parágrafo 1º do artigo 63 diz que os sítios devem conter símbolo de acessibilidade em destaque. Uma boa prática é acrescentar também uma página ou link com o contato para quem encontrar dificuldade.

Acessibilidade ajuda no Google?
Várias correções coincidem com boas práticas de otimização para o Google, como texto alternativo, títulos organizados e página rápida. O ganho maior é para quem usa o site, que consegue ler e agir.

Quanto tempo leva para tornar um site acessível?
Depende do tamanho do site e do estado em que ele está. Os sete ajustes da tabela costumam caber em poucos dias em um site pequeno, e uma adequação completa ao nível AA pede uma revisão página por página.

Por onde começar

Comece pelos sete ajustes da tabela: contraste, texto alternativo, formulário com rótulo, navegação por teclado, foco visível, idioma e título, e legenda em vídeo. Eles cobrem as falhas mais comuns dos sites e cabem em pouco tempo de trabalho.

O critério que orienta a decisão é o uso real: se uma pessoa consegue ler, navegar e enviar um contato usando só o teclado, com a página ampliada, o site está no caminho certo. Para ligar isso ao resultado do site, veja o guia sobre a taxa de conversão do site.

Se você quer avaliar o seu site, fale com a gente pela página de contato.