A acessibilidade web garante que os sites possam ser usados por pessoas com deficiências — incluindo deficiências visuais, auditivas, motoras e cognitivas. Além de ser a coisa certa a fazer, a acessibilidade é cada vez mais um requisito legal e indiretamente melhora o SEO.

O Framework WCAG

O WCAG (Web Content Accessibility Guidelines) é organizado em torno de quatro princípios conhecidos como POUR:

Perceptível — As informações devem ser apresentadas aos usuários de formas que eles possam perceber
Operável — Os componentes da interface devem ser operáveis
Compreensível — As informações e a operação da interface devem ser compreensíveis
Robusto — O conteúdo deve ser robusto o suficiente para ser interpretado por diversos agentes de usuário

O WCAG tem três níveis de conformidade: A (mínimo), AA (padrão do setor) e AAA (aprimorado). A maioria das diretrizes de acessibilidade e requisitos legais tem como alvo o Nível AA.

As Falhas Mais Comuns

1. Texto Alternativo Ausente (Imagens)

O texto alternativo é lido por leitores de tela em vez de exibir a imagem. Todo <img> precisa de um atributo alt:

<!-- Imagem informativa -->
<img src="grafico.png" alt="Gráfico de barras mostrando aumento de 40% na receita no 1T 2026" />

<!-- Imagem decorativa (ocultar de leitores de tela) -->
<img src="divisor.png" alt="" role="presentation" />

<!-- Botão com ícone (descreva a ação) -->
<button><img src="lixeira.svg" alt="Excluir item" /></button>

2. Contraste de Cores Insuficiente

O WCAG AA exige:

Proporção de contraste de 4,5:1 para texto normal
3:1 para texto grande (18px ou mais, ou 14px ou mais em negrito)
3:1 para componentes de interface e elementos gráficos

Ferramentas: WebAIM Contrast Checker, painel de acessibilidade do DevTools do navegador.

3. Labels de Formulário Ausentes

Todo campo de formulário precisa de um label associado. Não dependa apenas do texto de placeholder — ele desaparece quando o usuário começa a digitar:

<!-- Correto -->
<label for="email">Endereço de e-mail</label>
<input id="email" type="email" name="email" />

<!-- Também correto (label visualmente oculto) -->
<label for="busca" class="sr-only">Buscar</label>
<input id="busca" type="search" placeholder="Buscar..." />

4. Navegação por Teclado

Todos os elementos interativos devem ser acessíveis e operáveis apenas pelo teclado:

Tab/Shift+Tab para navegação
Enter/Espaço para ativar botões e links
Teclas de seta para menus e componentes
Escape para fechar diálogos

Teste desconectando o mouse e navegando pelo site apenas com Tab.

5. Indicadores de Foco

O estilo :focus deve ser visível. Nunca faça *:focus { outline: none } sem fornecer um indicador de foco alternativo:

/* Anel de foco personalizado que respeita as preferências do usuário */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

6. Regiões de Referência Ausentes

Use landmarks HTML semânticos para que usuários de leitores de tela possam navegar por região:

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

7. Uso Incorreto de ARIA

O ARIA (Accessible Rich Internet Applications) deve melhorar a acessibilidade, não criar confusão. Regras principais:

Nenhum ARIA é melhor que ARIA mal usado
Nunca use ARIA para substituir HTML semântico
Funções ARIA interativas precisam de suporte a teclado

<!-- Errado: ARIA em um elemento não interativo -->
<div role="button" onclick="...">Clique aqui</div>

<!-- Correto: Use o elemento nativo -->
<button onclick="...">Clique aqui</button>

8. Pular Conteúdo

Forneça links "pular para o conteúdo principal" para que usuários de teclado não precisem pressionar Tab em toda a navegação em cada página:

<a href="#conteudo-principal" class="sr-only focus:not-sr-only">
  Pular para o conteúdo principal
</a>

Considerações Legais

Os processos judiciais relacionados à acessibilidade estão em alta. No Brasil:

A Lei Brasileira de Inclusão (LBI — Lei 13.146/2015) exige acessibilidade digital para pessoas com deficiência
O Decreto 5.296/2004 e normas da ABNT referenciam padrões de acessibilidade web
A e-MAG (Modelo de Acessibilidade em Governo Eletrônico) é baseada no WCAG e obrigatória para sites governamentais

Ganhos Rápidos (Menos de Uma Hora Cada)

Adicione texto alternativo a todas as imagens (o Krokanti Audit informa exatamente quais estão faltando)
Corrija os estilos de foco
Adicione elementos <label> a todos os campos de formulário
Verifique as proporções de contraste de cores
Certifique-se de que seu site funciona com navegação apenas por teclado

O Krokanti Audit verifica automaticamente mais de 20 regras de acessibilidade — incluindo cobertura de texto alternativo, proporções de contraste, uso de ARIA, rotulagem de formulários e padrões de acessibilidade por teclado. Execute uma auditoria gratuita para ver sua situação atual.