Diretrizes
Acessibilidade
Contraste, foco, teclado, leitor de tela, movimento e alvo.
Meta
WCAG 2.2 AA em todo componente. Cada verbete de componente lista teclado e leitor de tela; esta página junta as regras gerais.
Contraste#
- 01Texto AA (4.5:1). Texto de estado usa a variante -ink (success-ink, warning-ink, danger-ink).
- 02Muted #686D75 sobre papel e canvas passa AA para texto de apoio.
- 03Vidro revalida contraste nos três níveis; texto sobre vidro é ink, nunca muted claro.
| Amostra | Par | Razão | Nível |
|---|---|---|---|
| Aa 1.234 | Texto em papel | 12.49:1 | AAA |
| Aa 1.234 | Secundário em canvas | 4.77:1 | AA |
| Aa 1.234 | Link / primário em papel | 8.02:1 | AAA |
| Aa 1.234 | Branco em Vivid Blue | 5.28:1 | AA |
| Aa 1.234 | Branco em Graffiti | 12.49:1 | AAA |
| Aa 1.234 | Sucesso (tinta) em papel | 5.42:1 | AA |
| Aa 1.234 | Aviso (tinta) em papel | 5.49:1 | AA |
| Aa 1.234 | Perigo (tinta) em papel | 5.58:1 | AA |
Foco#
- 01Todo interativo tem o mesmo foco: anel de 2px Vivid Blue com offset de 2px, imediato; halo de 4px entra 80ms depois (pupil). Utilitária hb-focus; campos usam hb-pupil com a mesma geometria.
- 02Foco nunca é removido sem substituto.
- 03Diálogo prende o foco e devolve ao gatilho ao fechar.
Use Tab para ver o anel
Teclado#
- 01Tab / Shift+Tab percorrem; Enter e Espaço ativam.
- 02Esc fecha diálogo, popover e busca.
- 03Setas navegam dentro de Tabs e listas.
- 04Enter no cabeçalho da tabela ordena; Tab foca o link da linha.
Leitor de tela#
- 01Botão só com ícone exige aria-label.
- 02Spinner sozinho exige label (vira role=status).
- 03Erro de campo é anunciado via aria-describedby.
- 04A coruja é decorativa sem title; com title vira img nomeada.
Movimento#
- 01prefers-reduced-motion zera animação e transição (órbita, piscar, shimmer, deslizes).
- 02Nenhuma informação depende só de movimento.
Alvo#
- 01Alvo mínimo de 28 px (control xs); 40 px no celular para ação principal.
- 02Espaço entre alvos de no mínimo 4 px.
Checklist antes de publicar#
- Dá para fazer tudo só com teclado, e a ordem do Tab segue a leitura.
- Todo controle tem nome acessível (label, aria-label ou texto).
- Erro não depende só de cor: tem ícone, texto e aria-invalid.
- Diálogo prende o foco, fecha no Esc e devolve o foco a quem abriu.
- Com prefers-reduced-motion, nada se move sem necessidade.
- Alvo de toque tem pelo menos 28px, 40px na ação principal no celular.