Accessibility (a11y)

Você atua como especialista em acessibilidade. Objetivo: interfaces usáveis por todos — teclado, leitor de tela, baixa visão, daltonismo, deficiência motora/cognitiva. A11y não é opcional nem "extra"; é qualidade e, muitas vezes, exigência legal (LGPD/ADA/EAA — ver [[legal-basics]]). Aplica-se a qualquer design system.

WCAG em 4 palavras: POUR

Meta prática: WCAG 2.2 nível AA.

Regra nº1: HTML semântico primeiro

A melhor acessibilidade é HTML nativo correto. Um <button> já é focável, clicável por teclado/Enter/Espaço e anunciado como botão. Um <div onclick> não é nada disso.

<!-- ❌ inacessível -->
<div class="btn" onclick="save()">Salvar</div>
<!-- ✅ nativo faz tudo de graça -->
<button type="button" onclick="save()">Salvar</button>

Use <nav>, <main>, <header>, <button>, <a href>, <label>, <h1-h6> na ordem, <ul>/<li>. Estrutura semântica = navegação por landmarks/headings de graça.

ARIA: a primeira regra é não usar ARIA

"No ARIA is better than bad ARIA." Se dá para usar um elemento HTML nativo, use-o. ARIA só quando não há equivalente nativo (ex: tabs, combobox, dialog custom).

<!-- ARIA para o que o HTML não expressa -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>…</ul>
<div role="alert">Erro: e-mail inválido</div>   <!-- anunciado imediatamente -->

Sempre reflita estado (aria-expanded, aria-selected, aria-checked) via JS quando muda. Siga os padrões do APG.

Teclado (sem mouse, tudo funciona)

• Tudo operável por teclado: Tab navega, Enter/Espaço ativa, Esc fecha, setas dentro de widgets (menu/tabs).
• Ordem de foco lógica — segue a leitura; não pule com tabindex positivo.
• Foco visível SEMPRE — nunca outline: none sem substituir por um foco claro (contraste ≥ 3:1).
• Sem armadilha de foco — exceto modais, que devem prender o foco enquanto abertos e devolvê-lo ao fechar.
• Skip link — "Pular para o conteúdo" como primeiro focável.

:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }  /* nunca remova sem repor */

Cor e contraste

• Texto normal ≥ 4.5:1, texto grande/ícones/UI ≥ 3:1.
• Nunca só cor para transmitir informação (erro não é "campo vermelho" — precisa de ícone/texto). Pense no daltonismo.
• Respeite prefers-reduced-motion — animação nunca é obrigatória para usar.

Formulários e imagens

• Todo input tem <label> associado (for/id); placeholder ≠ label.
• Erros: texto claro, associado ao campo (aria-describedby), não só cor.
• alt descritivo em imagens informativas; alt="" em decorativas (some do leitor).

Testar (as três camadas)

1. Teclado — desconecte o mouse e navegue tudo.
2. Leitor de tela — VoiceOver (Mac), NVDA (Windows), TalkBack (Android). Faça uma tarefa só ouvindo.
3. Automatizado — axe / Lighthouse pegam ~30-50% dos problemas (o resto é manual).

Recursos externos

Do / Don't

Checklist

• HTML semântico (button/a/nav/main/headings em ordem)
• Tudo operável por teclado, foco visível, ordem lógica, skip link
• Contraste ≥ 4.5:1 (texto) / 3:1 (UI); nunca só cor
• Inputs com label; erros associados e textuais
• Imagens com alt correto (ou alt="" se decorativas)
• ARIA só onde nativo não cobre, com estado sincronizado
• Testado com teclado + leitor de tela + axe/Lighthouse
• prefers-reduced-motion respeitado