Acessibilidade: Não É Opcional, Não É Difícil
1 em cada 4 adultos nos EUA tem alguma deficiência. Acessibilidade não é um nice-to-have — é um requisito legal e um mercado de mais de 1 bilhão de pessoas. A boa notícia: a maioria dos fixes são mudanças simples de HTML.
As Vitórias Rápidas
<!-- 1. Use HTML semântico -->
<nav>...</nav>
<main>...</main>
<button>Clique</button> <!-- NÃO <div onclick> -->
<!-- 2. Sempre adicione alt em imagens -->
<img src="grafico.png" alt="Gráfico de receita mensal mostrando 20% de crescimento" />
<img src="decorativo.svg" alt="" /> <!-- alt vazio para decorativo -->
<!-- 3. Rotule inputs de formulário -->
<label for="email">Email</label>
<input id="email" type="email" />
<!-- 4. Use headings em ordem -->
<h1>Título</h1>
<h2>Seção</h2>
<h3>Subseção</h3>Navegação por Teclado
:focus-visible {
outline: 2px solid #4A90D9;
outline-offset: 2px;
}
/* NÃO faça isso */
:focus { outline: none; }- Todos os elementos interativos devem ser alcançáveis com Tab
- Escape deve fechar modais/dropdowns
- Enter/Space devem ativar botões
Contraste de Cor
| Nível | Texto Normal | Texto Grande |
|---|---|---|
| AA (mínimo) | 4.5:1 | 3:1 |
| AAA (aprimorado) | 7:1 | 4.5:1 |
ARIA (Quando HTML Não É Suficiente)
<button aria-pressed="true">Modo Escuro</button>
<div aria-busy="true" aria-live="polite">Carregando...</div>
<button aria-expanded="false" aria-controls="detalhes">Mostrar</button>Regra #1 do ARIA: Nenhum ARIA é melhor que ARIA ruim. Use HTML semântico primeiro.
Checklist de Teste
- Navegue a página inteira usando apenas teclado
- Use um screen reader
- Verifique contraste de cor (4.5:1 mínimo)
- Rode Lighthouse accessibility audit
- Aumente texto para 200% — layout funciona?
Verifique seu contraste: Verificador de Contraste — verifique conformidade WCAG AA/AAA.