# 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](/componentes/select) | `combobox 1.2` | Listbox personalizada, navegação ↑↓ Home/End, Enter seleciona, Esc fecha, type-ahead. |
| [Modal](/componentes/modal) | `dialog (modal)` | Trap de foco, Esc fecha, devolve o foco ao gatilho, aria-labelledby para o título. |
| [Tabs](/componentes/tabs) | `tablist + tabpanel` | ← → entre tabs, Home/End extremos, aria-selected, painel via aria-labelledby. |
| [Side Panel](/componentes/side-panel) | `dialog + tablist interno` | Painel lateral com abas internas. Esc fecha, devolve o foco ao gatilho. |
| [Tooltip](/componentes/tooltip) | `tooltip + aria-describedby` | Passar o mouse ou focar revela o conteúdo, associado ao gatilho via aria-describedby. |
| [Toast](/componentes/toast) | `live region (status)` | role=status anuncia feedback transitório sem interromper. role=alert para erros críticos. |
| [Callout](/componentes/callout) | `role=status` | Anúncio não intrusivo (aria-live=polite). Não rouba foco. Mudança de status comunicada. |
| [Breadcrumb](/componentes/breadcrumb) | `nav + ol + aria-current` | Landmark navegacional, item atual marcado, separadores aria-hidden. |
| [Pagination](/componentes/pagination) | `nav + button labels` | aria-label descritivo em cada botão, como Página 3 ou Próxima página. |
| [Field](/componentes/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

```css
focus-visible:outline-none
focus-visible:ring-2
focus-visible:ring-primary
focus-visible:ring-offset-2
```

Por 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

Tab

Próximo elemento focável

Shift + Tab

Elemento focável anterior

Enter

Ativar botão, link ou opção de listbox

Space

Alternar checkbox/switch ou ativar botão

Esc

Fechar overlay: modal, panel, tooltip ou dropdown

↑ ↓

Navegação dentro de listbox ou radio group

← →

Navegação entre tabs

Home / End

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.