Em 2024, o WebAIM Million — a maior auditoria automática da web — analisou um milhão de páginas iniciais e encontrou falhas WCAG em 95,9% delas. Não é exagero: apenas 4 em cada 100 sites passa nos critérios básicos de acessibilidade.
Este artigo lista os 10 erros mais frequentes, com dados reais, impacto para usuários e o código para corrigir.
Os dados antes de começar
O WebAIM Million 2024 identificou uma média de 56,8 erros por página. Os seis tipos de erro mais comuns respondem, sozinhos, por mais de 96% de todas as falhas detectadas automaticamente:
| Erro | Páginas afetadas |
|---|---|
| Contraste de texto baixo | 81,0% |
| Imagens sem texto alternativo | 55,0% |
| Inputs sem label | 48,6% |
| Links sem texto descritivo | 44,6% |
| Botões sem nome acessível | 27,5% |
| Idioma da página não declarado | 17,1% |
Os 4 erros restantes desta lista são menos frequentes em auditorias automáticas, mas igualmente impactantes para usuários reais.
1. Contraste de texto insuficiente
Critério WCAG: 1.4.3 — Nível AA | Ocorrência: 81% dos sites
O critério exige proporção mínima de 4,5:1 para texto normal e 3:1 para texto grande (≥ 18pt ou ≥ 14pt em negrito). Afeta diretamente pessoas com baixa visão, daltonismo e qualquer pessoa usando o site sob luz solar direta.
<!-- ❌ Falha: texto cinza claro sobre branco (2.9:1) -->
<p style="color: #9CA3AF;">Texto importante aqui</p>
<!-- ✅ AA: 4.8:1 — suficiente para texto secundário -->
<p style="color: #64748B;">Texto importante aqui</p>
<!-- ✅ AAA: 9.7:1 — ideal para texto principal -->
<p style="color: #374151;">Texto importante aqui</p>
Ferramenta: Analisador do Web para Todos detecta automaticamente. Para verificação manual, use o Contrast Checker do WebAIM.
2. Imagens sem texto alternativo
Critério WCAG: 1.1.1 — Nível A | Ocorrência: 55% dos sites
Uma imagem sem alt é invisível para leitores de tela. O usuário escuta "imagem" — sem nenhuma informação sobre o que ela representa. Se a imagem transmite informação, o alt deve descrever essa informação, não o visual.
<!-- ❌ Sem alt — leitores de tela anunciam o nome do arquivo -->
<img src="grafico-conversao-2024.png">
<!-- ❌ Alt genérico — não ajuda ninguém -->
<img src="grafico-conversao-2024.png" alt="imagem">
<!-- ✅ Alt descritivo — descreve a informação, não o visual -->
<img src="grafico-conversao-2024.png" alt="Gráfico mostrando aumento de 34% na taxa de conversão entre janeiro e março de 2024">
<!-- ✅ Imagem decorativa — alt vazio e aria-hidden -->
<img src="decoracao-header.svg" alt="" aria-hidden="true">
Existe uma decisão importante a tomar: a imagem é informativa (precisa de alt descritivo) ou decorativa (precisa de alt="")? Cada caso tem tratamento diferente. Veja o guia completo no artigo Como escrever texto alternativo correto em imagens.
3. Campos de formulário sem label
Critério WCAG: 1.3.1 e 3.3.2 — Nível A | Ocorrência: 48,6% dos sites
Um <input> sem <label> associado é um campo sem nome para tecnologias assistivas. O usuário de leitor de tela não sabe o que deve digitar. Pior: muitos sites usam placeholder como substituto do label — o placeholder desaparece ao digitar e tem contraste insuficiente por padrão.
<!-- ❌ Sem label — leitor de tela anuncia apenas "campo de texto" -->
<input type="email" placeholder="seu@email.com">
<!-- ❌ Label visualmente presente mas não associado -->
<p>E-mail</p>
<input type="email">
<!-- ✅ Label associado via htmlFor/id -->
<label for="email">
E-mail
<span aria-hidden="true">*</span>
<span class="sr-only">(obrigatório)</span>
</label>
<input
id="email"
type="email"
autocomplete="email"
aria-required="true"
>
4. Links sem texto descritivo
Critério WCAG: 2.4.4 — Nível A | Ocorrência: 44,6% dos sites
Links como "Clique aqui", "Saiba mais" ou "Leia mais" não fazem sentido fora de contexto. Usuários de leitores de tela navegam pela lista de links da página — se todos dizem "Clique aqui", não há como saber para onde cada um vai.
<!-- ❌ Sem contexto — inútil fora do parágrafo -->
<a href="/relatorio-2024.pdf">Clique aqui</a>
<!-- ❌ Igualmente inútil -->
<a href="/relatorio-2024.pdf">Baixar</a>
<!-- ✅ Texto descritivo no próprio link -->
<a href="/relatorio-2024.pdf">Relatório de Acessibilidade 2024 (PDF)</a>
<!-- ✅ Ou via aria-label quando o texto visual precisa ser curto -->
<a href="/relatorio-2024.pdf" aria-label="Baixar Relatório de Acessibilidade 2024 (PDF)">
Baixar
</a>
5. Botões sem nome acessível
Critério WCAG: 4.1.2 — Nível A | Ocorrência: 27,5% dos sites
Botões com apenas ícones — sem texto ou aria-label — não têm nome acessível. O leitor de tela anuncia "botão" sem dizer o que ele faz. Isso inclui botões de fechar modal, menus hambúrguer, ícones de redes sociais e setas de carrossel.
<!-- ❌ Apenas ícone SVG — leitor anuncia "botão" -->
<button>
<svg><!-- ícone de fechar --></svg>
</button>
<!-- ✅ aria-label descreve a ação -->
<button aria-label="Fechar modal">
<svg aria-hidden="true" focusable="false"><!-- ícone de fechar --></svg>
</button>
<!-- ✅ Texto visível + ícone decorativo -->
<button>
<svg aria-hidden="true"><!-- ícone --></svg>
Enviar formulário
</button>
6. Idioma da página não declarado
Critério WCAG: 3.1.1 — Nível A | Ocorrência: 17,1% dos sites
O atributo lang no elemento <html> diz ao leitor de tela em qual idioma pronunciar o conteúdo. Sem ele, um leitor configurado para português pode ler um site em inglês com pronúncia portuguesa — e vice-versa. É o critério mais fácil de corrigir e ainda aparece em 17% dos sites.
<!-- ❌ Sem declaração de idioma -->
<html>
<!-- ✅ Português brasileiro -->
<html lang="pt-BR">
<!-- Se houver trechos em outro idioma, use lang no elemento específico -->
<blockquote lang="en">
"The power of the Web is in its universality." — Tim Berners-Lee
</blockquote>
7. Estrutura de headings quebrada
Critério WCAG: 1.3.1 — Nível A | Ocorrência: estimado em >50% dos sites auditados manualmente
Headings (h1–h6) não são apenas tamanhos de fonte — são a estrutura do documento. Usuários de leitores de tela navegam por headings para entender e pular seções. Dois problemas típicos: pular níveis (h1 → h3) e usar headings para efeito visual em vez de estrutura semântica.
<!-- ❌ Nível pulado — de h1 vai direto para h3 -->
<h1>Meu Site</h1>
<h3>Sobre nós</h3>
<!-- ❌ Heading usado apenas para deixar texto grande -->
<h2 style="font-size: 14px; color: gray;">Última atualização: 01/01/2024</h2>
<!-- ✅ Hierarquia correta -->
<h1>Título da página</h1>
<h2>Seção principal</h2>
<h3>Subseção</h3>
<h2>Outra seção principal</h2>
<!-- ✅ Texto grande que não é heading — use CSS, não HTML semântico -->
<p class="text-4xl font-bold">Última atualização: 01/01/2024</p>
8. Foco de teclado invisível
Critério WCAG: 2.4.7 — Nível AA | Ocorrência: muito comum em projetos com reset de CSS
O indicador de foco é o contorno que aparece em elementos interativos quando navegados pelo teclado. Muitos projetos adicionam outline: none em todos os elementos para "limpar" o visual padrão do navegador — e se esquecem de criar um substituto acessível. Isso deixa usuários de teclado sem referência de onde estão na página.
/* ❌ Remove o foco sem substituto — nunca fazer isso */
* {
outline: none;
}
/* ❌ Remove apenas para mouse — mas afeta teclado também */
:focus {
outline: none;
}
/* ✅ Remove o padrão feio mas mantém para teclado via :focus-visible */
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid #0048B6;
outline-offset: 2px;
border-radius: 4px;
}
No Tailwind, use sempre focus-visible:ring-2 em vez de focus:ring-2 para não exibir o anel ao clicar com o mouse.
9. Tabelas sem cabeçalhos marcados
Critério WCAG: 1.3.1 — Nível A
Uma tabela sem <th> e scope correto é um bloco de células sem relação entre si para leitores de tela. O usuário ouve os dados mas não sabe a qual coluna ou linha pertencem.
<!-- ❌ Tabela sem cabeçalhos semânticos -->
<table>
<tr>
<td>Nome</td>
<td>Cargo</td>
<td>Departamento</td>
</tr>
<tr>
<td>Ana Silva</td>
<td>Desenvolvedora</td>
<td>Tecnologia</td>
</tr>
</table>
<!-- ✅ Com cabeçalhos e escopo correto -->
<table>
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Cargo</th>
<th scope="col">Departamento</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana Silva</td>
<td>Desenvolvedora</td>
<td>Tecnologia</td>
</tr>
</tbody>
</table>
10. Vídeos sem legendas ou transcrição
Critério WCAG: 1.2.2 (legendas) e 1.2.3 (transcrição) — Nível A
Vídeos com fala precisam de legendas sincronizadas para usuários surdos ou com deficiência auditiva. Vídeos apenas com áudio (podcasts, por exemplo) precisam de transcrição em texto. As legendas automáticas do YouTube são um ponto de partida, mas frequentemente têm erros em termos técnicos — sempre revisar.
<!-- ✅ Vídeo com faixa de legendas em português -->
<video controls>
<source src="tutorial-acessibilidade.mp4" type="video/mp4">
<track
kind="subtitles"
src="legendas-pt-br.vtt"
srclang="pt-BR"
label="Português (Brasil)"
default
>
<p>
Seu navegador não suporta vídeo HTML5.
<a href="tutorial-acessibilidade.mp4">Baixar o vídeo</a>.
</p>
</video>
O que fazer agora
A maioria desses erros pode ser detectada automaticamente. Use o Analisador do Web para Todos para obter um diagnóstico do seu site e ver exatamente quais critérios estão falhando — com referência ao critério WCAG e sugestão de correção.
Após a análise automática, faça uma revisão manual focada nos itens que ferramentas não detectam: qualidade dos textos alternativos, lógica dos headings e navegação por teclado.
Acessibilidade não é corrigida de uma vez. É corrigida erro por erro, página por página.
Fonte dos dados: WebAIM Million — Annual accessibility analysis of the top 1,000,000 home pages (2024). Disponível em webaim.org/projects/million