Acessibilidade
WCAG AA por padrão. Cada componente do sistema implementa um padrão ARIA documentado.
Princípios
Quatro pilares
A WCAG 2.2 organiza a acessibilidade em perceptível, operável, compreensível e robusto. O Sinapse DS adota o nível AA como mínimo.
Perceptível
Alternativa textual em ícones, contraste mínimo 4.5:1 em texto, foco visível, conteúdo não depende só de cor.
Operável
Tudo via teclado. Tab/Shift+Tab cobre rota completa. Sem armadilha de teclado: overlays prendem o foco, mas sempre fecham com Esc. Atalhos previsíveis.
Compreensível
Linguagem clara, ordem lógica, erros explicados, rótulo associado ao campo via for/id ou aria-labelledby.
Robusto
HTML válido, ARIA semântico (button vs role=button), parsing confiável por leitores de tela.
Padrões ARIA
Implementados no sistema
Cada componente segue um padrão da APG (ARIA Authoring Practices Guide).
| Componente | Padrão APG | Comportamento garantido |
|---|---|---|
| Select | combobox 1.2 | Listbox personalizada, navegação ↑↓ Home/End, Enter seleciona, Esc fecha, type-ahead. |
| Modal | dialog (modal) | Trap de foco, Esc fecha, devolve o foco ao gatilho, aria-labelledby para o título. |
| Tabs | tablist + tabpanel | ← → entre tabs, Home/End extremos, aria-selected, painel via aria-labelledby. |
| Side Panel | dialog + tablist interno | Painel lateral com abas internas. Esc fecha, devolve o foco ao gatilho. |
| Tooltip | tooltip + aria-describedby | Passar o mouse ou focar revela o conteúdo, associado ao gatilho via aria-describedby. |
| Toast | live region (status) | role=status anuncia feedback transitório sem interromper. role=alert para erros críticos. |
| Callout | role=status | Anúncio não intrusivo (aria-live=polite). Não rouba foco. Mudança de status comunicada. |
| Breadcrumb | nav + ol + aria-current | Landmark navegacional, item atual marcado, separadores aria-hidden. |
| Pagination | nav + button labels | aria-label descritivo em cada botão, como Página 3 ou Próxima página. |
| Field | label + aria-describedby | Label associado via for/id, texto de apoio e erro via aria-describedby, aria-invalid em erro. |
Foco
Visível, sempre
focus-visible
focus-visible:outline-none
focus-visible:ring-2
focus-visible:ring-primary
focus-visible:ring-offset-2Por que focus-visible
:focus mostra o anel de foco também após clique do mouse.
:focus-visible mostra foco quando a navegação precisa dele,
mantendo legibilidade visual sem sacrificar acessibilidade.
Contraste
Mínimos da WCAG
| Elemento | AA | AAA | Token do Sinapse DS |
|---|---|---|---|
| Texto normal (<18px) | 4.5:1 | 7:1 | text-foreground · text-muted-foreground |
| Texto grande (≥18px ou 14px bold) | 3:1 | 4.5:1 | text-muted-foreground (mínimo permitido) |
| UI (borda, ícone) | 3:1 | — | border-border · text-foreground |
| Focus ring | 3:1 em relação às cores adjacentes | — | ring-primary |
Teclado
Atalhos universais
Próximo elemento focável
Elemento focável anterior
Ativar botão, link ou opção de listbox
Alternar checkbox/switch ou ativar botão
Fechar overlay: modal, panel, tooltip ou dropdown
Navegação dentro de listbox ou radio group
Navegação entre tabs
Primeiro ou último item em coleções
Antipadrões
O que nunca fazer
| Evite | Por quê | Corrija com |
|---|---|---|
<div onclick="..."> | Div não recebe foco e não responde a teclado. | <button> ou role=button + tabindex=0 + onkeydown |
placeholder como label | Some ao digitar, baixo contraste, leitor de tela inconsistente. | <label> visível associado via for/id |
outline: none | Remove foco visível e quebra navegação por teclado. | focus-visible:ring-2 ring-primary |
aria-label em texto visível | Sobrescreve o texto para leitores de tela e confunde. | Deixe o texto visível ser o nome acessível |
cor como único sinal | Falha em daltonismo, modo monocromático e baixa visão. | Cor + ícone + texto de estado explícito |
Ferramentas
Validação contínua
axe DevTools
Auditoria automatizada no navegador. Detecta boa parte dos problemas estruturais.
Lighthouse
Score de acessibilidade integrado ao Chrome DevTools.
NVDA / VoiceOver
Teste real com leitor de tela. Insubstituível.
Teclado apenas
Completar tarefa sem mouse. Detecta armadilhas de foco, ordem ilógica e foco invisível.