Criação de sites e IA
Acessibilidade digital: o que a WCAG exige e como cumprir no seu site
Os 4 princípios, o artigo 63 da LBI e a norma ABNT NBR 17225 sem juridiquês, um checklist de 8 passos e o teste que rodamos na Notablia com o Chrome.
A WCAG é o conjunto de diretrizes internacionais do W3C que define como deixar um site acessível, e o nível AA é o que as leis e normas pedem. No Brasil, a Lei Brasileira de Inclusão obriga os sites de empresas com sede ou representação no país a serem acessíveis, conforme as diretrizes adotadas internacionalmente.
Revisamos a lei, a norma ABNT NBR 17225:2025, as diretrizes do W3C e o que o ChatGPT, o Perplexity e o Gemini respondem para uma empresa brasileira. E rodamos um teste próprio no Chrome no nosso site, que tem nota 100 em acessibilidade no Lighthouse.
Aqui você tem o que são as WCAG, o que a lei exige de verdade, 8 passos para um site acessível com ferramentas grátis e o que encontramos ao testar a Notablia.
Neste guia
O que são as WCAG e por que importam no seu site
As WCAG são o padrão que define quando um site é acessível, com critérios que podem ser verificados um a um.
As WCAG (Web Content Accessibility Guidelines, ou Diretrizes de Acessibilidade para Conteúdo Web) são um padrão do W3C com critérios verificáveis para que pessoas com deficiência visual, auditiva, motora ou cognitiva consigam usar um site. Cada critério tem um nível (A, AA ou AAA) e as leis costumam exigir o AA.
O que elas não são: não são uma lei, embora várias leis apontem para elas. Não são um plugin que se instala em cinco minutos. E não servem só para pessoas cegas. A acessibilidade web faz parte de uma boa criação de sites, assim como a velocidade e a clareza.
O que mudou na WCAG 2.2?
A WCAG 2.2 foi publicada em 5 de outubro de 2023. Segundo o resumo oficial do W3C sobre as novidades da WCAG 2.2, ela mantém tudo da 2.1 e acrescenta 9 critérios. Entre eles estão o tamanho mínimo de alvos (24 por 24 pixels CSS), o foco que não pode ficar escondido e a autenticação sem charadas. Também elimina o critério 4.1.1, que ficou obsoleto.
Os 4 princípios da WCAG com exemplos para o seu negócio
A WCAG se organiza em 4 princípios: o site precisa ser perceptível, operável, compreensível e robusto.
| Princípio | O que significa | Exemplo no site de uma pequena empresa |
|---|---|---|
| Perceptível | Tudo pode ser visto, ouvido ou lido de outra forma | Texto alternativo nas fotos de produto e legendas nos vídeos |
| Operável | Tudo funciona sem mouse | Menu e carrinho funcionam só com o teclado |
| Compreensível | Tudo é claro e se comporta como esperado | Os erros do formulário dizem o que está errado e como corrigir |
| Robusto | Funciona com leitores de tela e outras tecnologias | Botões de verdade no HTML, não imagens clicáveis |
Cada princípio se desdobra em critérios com nível A, AA ou AAA. Para empresas, a meta é cumprir todos os de nível A e AA.
Lei Brasileira de Inclusão: o que a lei exige do seu site
A Lei Brasileira de Inclusão exige acessibilidade nos sites de empresas e órgãos públicos, e a norma técnica de referência hoje é a ABNT NBR 17225.
O artigo 63 da Lei 13.146/2015, a Lei Brasileira de Inclusão, torna obrigatória a acessibilidade nos sites mantidos por empresas com sede ou representação comercial no país ou por órgãos de governo, conforme as melhores práticas e diretrizes adotadas internacionalmente. O parágrafo 1º pede um símbolo de acessibilidade em destaque.
| Quem | Norma | O que pede |
|---|---|---|
| Empresas com sede ou representação no Brasil | Lei 13.146, artigo 63 | Site acessível pelas diretrizes internacionais e símbolo de acessibilidade |
| Todos os sites (referência técnica) | ABNT NBR 17225:2025, publicada em 11/03/2025 | Requisitos baseados na WCAG 2.2, com checklist de conformidade |
| Governo federal | eMAG | Modelo de acessibilidade para sites públicos |
A lei não fixa um nível da WCAG nem dá exceção para pequenas empresas. Se tiver dúvida sobre um caso concreto, consulte um advogado: este guia não é aconselhamento jurídico.
E se eu vender para a Europa ou os EUA?
Lá também há regras. Na União Europeia, a Lei Europeia de Acessibilidade vale desde 28 de junho de 2025 para muitos serviços ao consumidor, como o comércio eletrônico. Nos Estados Unidos, a ADA se aplica a negócios abertos ao público e a WCAG é a referência dos tribunais.
Como ter um site acessível: 8 passos com ferramentas grátis
Para ter um site acessível, combine um teste automático com testes à mão nas páginas que mais importam para o seu negócio.
A acessibilidade em sites não exige ferramentas pagas para começar: tudo o que vem abaixo é grátis.
-
Escolha as páginas-chave
Página inicial, uma página de produto ou serviço, o carrinho ou o formulário de contato e o pagamento. É onde uma barreira custa vendas.
-
Rode um teste automático
Abra o Chrome, aperte F12, entre na aba Lighthouse e rode a análise com a categoria Acessibilidade. Complete com a extensão WAVE. Anote os erros, mas não pare aí.
-
Navegue só com o teclado
Tab para avançar, Shift e Tab para voltar, Enter para clicar. Você precisa ver sempre onde está (o foco) e chegar a tudo, inclusive ao menu e ao carrinho.
-
Confira o contraste de cores
Texto normal, no mínimo 4,5:1; texto grande e ícones, 3:1. Se a cor da marca não chega lá, crie uma versão mais escura só para texto.
-
Coloque texto alternativo nas imagens que informam
Fotos de produto, gráficos e ícones com função. As decorativas ficam com alt vazio. O método está no nosso guia de texto alternativo.
-
Dê rótulo aos formulários e aos erros
Cada campo com rótulo visível e cada erro com uma mensagem que diga o que está errado. Só a borda vermelha não basta.
-
Teste tamanho, zoom e celular
Botões de pelo menos 24 por 24 pixels ou bem espaçados, e o site usável com zoom de 200 % e numa tela de 320 pixels de largura.
-
Publique uma declaração de acessibilidade
O que você cumpre, o que ainda não, quando revisou e um e-mail para avisar de barreiras. Inclua o símbolo de acessibilidade e revise a cada 6 meses.
Se o seu site roda em um gerenciador de conteúdo, revise também o tema: muitos problemas vêm do modelo, não dos seus textos. Explicamos isso em o que é CMS e como escolher. E se for fazer um site novo, peça acessibilidade desde o início, inclusive se for criar site com IA.
Aja como auditor de acessibilidade. Este é o HTML de uma seção do meu site: [cole o HTML]. Revise com base na WCAG 2.2 nível AA e me dê uma tabela com o critério que falha, o motivo, como corrigir e o código corrigido. Não invente problemas: se algo não puder ser verificado só pelo HTML, avise.
Escreva a declaração de acessibilidade do meu site [URL] em linguagem simples. Inclua o nível que buscamos (WCAG 2.2 AA), as partes que ainda não cumprem [lista], a data da última revisão, como avisar de uma barreira e em quanto tempo respondemos.
Leitor de tela: como testar o seu site com NVDA, VoiceOver ou TalkBack
Leitor de tela é o programa que lê em voz alta o que está na tela, e testar o site com um deles revela mais falhas do que qualquer ferramenta automática. Na pesquisa da WebAIM com usuários, feita em julho e agosto de 2026, 55 % usavam o JAWS como leitor principal no computador e 32,9 %, o NVDA. No celular, 72,2 % usavam o VoiceOver e 29,5 %, o TalkBack (cada pessoa podia marcar mais de um).
| Leitor | Onde roda | Custo |
|---|---|---|
| NVDA | Windows | Gratuito |
| VoiceOver | Mac e iPhone | Já vem no aparelho |
| TalkBack | Android | Já vem no aparelho |
Um teste de 10 minutos com o NVDA: abra a página inicial e, no modo de navegação, aperte H para pular de título em título, K de link em link e F de campo em campo. Se os títulos não contam a página, se um link diz só «clique aqui» ou se um campo não diz o que digitar, já tem trabalho. No celular, ative o VoiceOver ou o TalkBack em Ajustes, dentro de Acessibilidade.
O JAWS é pago, então só vale testar nele se você sabe que o seu público o usa.
Teste de acessibilidade: o que encontramos na Notablia
O nosso teste confirmou o básico, mas encontrou falhas que uma nota 100 no Lighthouse não mostra.
Menu de acessibilidade resolve?
Não. O menu de acessibilidade, aquele botão que aumenta a letra ou muda as cores, cresceu muito nas buscas, mas não corrige o código: um botão sem nome ou um formulário sem rótulo continuam com problema. Ferramentas como o VLibras são um bom complemento, nunca a solução.
VLibras ou Hand Talk: qual colocar no site para ter Libras
Os dois mostram um avatar que traduz o texto da página para a Libras. A Libras é uma língua própria, não o português em sinais, e muitas pessoas surdas a usam como primeira língua. Por isso um tradutor ajuda, mas não substitui um site bem construído.
| VLibras | Hand Talk | |
|---|---|---|
| Quem faz | Governo federal e a UFPB | Empresa privada |
| Custo | Gratuito e de código aberto | Plugin contratado: peça o preço |
| Mais indicado para | Orçamento zero e site simples | Quem quer suporte e recursos extras |
As informações são das páginas oficiais dos dois (outubro de 2026). A do Hand Talk fala em dezenas de recursos assistivos além da Libras, mas não mostra preço.
Antes de instalar qualquer um, lembre do limite: o avatar traduz o texto, então o que está só dentro de uma imagem fica de fora. Coloque o widget depois do passo 8 do checklist, como complemento. Depois, teste com ele ligado: o menu, os botões e os títulos são traduzidos? Se não, o problema está no texto da página, e é lá que você conserta.
Contraste de cores e acessibilidade: como medir a paleta da sua marca
O contraste de cores é onde muitas marcas falham primeiro, então meça cada cor da marca sobre o fundo antes de usá-la em texto.
Quem pesquisa contraste de cores acessibilidade quer o número mínimo: 4,5:1 para texto normal e 3:1 para texto grande.
| Cor da Notablia | Sobre branco | Serve para texto normal? |
|---|---|---|
| Tinta #14161C | 18,08:1 | Sim |
| Índigo #3D3AE0 | 7,29:1 | Sim |
| Violeta #7C3AED | 5,70:1 | Sim |
| Coral #FF5A36 | 3,10:1 | Não: só texto grande ou decoração |
| Coral para texto #D93A16 | 4,60:1 | Sim, por isso ela existe |
Calculamos com a fórmula de luminância da WCAG. Se você buscava acessibilidade digital exemplos, aqui está um caso real para levar ao seu designer. Faça o mesmo com a sua marca no nosso gerador de paleta de cores.
Perguntas frequentes sobre a WCAG e a acessibilidade digital
Qual a WCAG mais recente?
A WCAG mais recente é a 2.2, publicada pelo W3C em 5 de outubro de 2023. Ela mantém tudo o que havia na 2.1 e acrescenta 9 critérios novos, como o tamanho mínimo de alvos de toque. Em outubro de 2026, a WCAG 3 ainda está em desenvolvimento e não substitui a 2.2. Por isso, use a 2.2 nível AA como meta: ela também é a base da norma brasileira ABNT NBR 17225, de 2025.
O que é WCAG 2.1 nível AA?
WCAG 2.1 nível AA significa cumprir todos os critérios de nível A e AA da versão 2.1 das diretrizes. É o nível mais citado por leis e contratos no mundo, inclusive nos Estados Unidos e na Europa. Inclui contraste de 4,5:1 para texto, navegação por teclado, legendas, rótulos em formulários e conteúdo que se adapta a telas pequenas. Quem cumpre a WCAG 2.2 AA já cumpre também a 2.1 AA, então mire direto na versão mais nova.
Como a acessibilidade digital ajuda os idosos?
A acessibilidade digital ajuda os idosos porque muitas barreiras da idade são as mesmas que a WCAG resolve: visão mais fraca, tremor nas mãos, menos familiaridade com tecnologia. Texto com bom contraste e tamanho ajustável, botões grandes e bem separados, linguagem clara e formulários que explicam o erro facilitam a vida de quem tem 70 anos tanto quanto a de quem tem deficiência. E esse é um público que compra cada vez mais pela internet.
O que é acessibilidade digital?
Acessibilidade digital é garantir que qualquer pessoa consiga usar sites, aplicativos e documentos digitais, inclusive quem não enxerga, não ouve, não usa mouse ou tem dificuldade para entender textos complexos. Ela beneficia também quem usa o celular no sol, pessoas idosas, quem está com o braço engessado ou com internet lenta. Na prática, é medida com a WCAG, e um site acessível costuma ser também mais rápido, mais claro e mais bem entendido pelo Google.
O que é o eMAG?
O eMAG, Modelo de Acessibilidade em Governo Eletrônico, é o conjunto de recomendações de acessibilidade criado pelo governo federal para os sites e serviços digitais públicos. Ele foi construído a partir da WCAG e adaptado à realidade brasileira. Se você trabalha com órgãos públicos ou presta serviço para eles, vai encontrá-lo em editais e contratos. Para empresas privadas, a referência mais atual é a WCAG 2.2 e a ABNT NBR 17225.
O que é o VLibras?
O VLibras é um conjunto de ferramentas gratuitas do governo federal que traduz conteúdo em português para a Libras, a Língua Brasileira de Sinais, com um avatar animado. Pode ser instalado em sites e no navegador. É um bom complemento para pessoas surdas que têm a Libras como primeira língua, mas não substitui a acessibilidade do próprio site: não corrige botões sem nome, formulários sem rótulo nem falta de contraste.