accessibility
CHDS é WCAG 2.1 AA por padrão. Esta página documenta os critérios, padrões de teclado e ARIA aplicados em todos os componentes.
barra de acessibilidade — obrigatória
Todo produto Casa Hacker deve incluir a barra de acessibilidade oficial (github.com/casahacker/barra-acessibilidade ↗), que cobre 12 features WCAG-aligned + integração VLibras. Detalhes de integração na página global header.
- Tema (claro/escuro/alto contraste) + 3 tamanhos de fonte (14/16/18)
- Fonte Atkinson Hyperlegible pra dislexia
- Régua de leitura, modo foco, cursor ampliado
- VLibras (Língua Brasileira de Sinais) oficial do governo
- Pausa de animação (WCAG 2.3.3), foco realçado (2.4.7), alvos ampliados (2.5.8)
- Carrega via CDN jsDelivr — peso ~30KB minificado
- Este design system já inclui automaticamente em todas as páginas
contraste
Texto normal exige razão 4.5:1 contra o fundo. Texto grande (18pt+ regular, 14pt+ bold) exige 3:1. Bordas e ícones também 3:1.
| par | razão | aa text | aa large |
|---|---|---|---|
| text-primary / background (light) | 11.7:1 | ✓ | ✓ |
| text-secondary / background (light) | 7.2:1 | ✓ | ✓ |
| text-on-color / background-brand | 11.5:1 | ✓ | ✓ |
| text-primary / background (dark) | 13.4:1 | ✓ | ✓ |
| text-secondary / background (dark) | 9.1:1 | ✓ | ✓ |
| support-error / background (light) | 5.2:1 | ✓ | ✓ |
navegação por teclado
Todo elemento interativo é acessível via Tab. Componentes complexos seguem ARIA Authoring Practices.
| componente | tecla | ação |
|---|---|---|
| Tabs | ← / → | move foco entre tabs |
| Tabs | Home / End | primeiro / último tab |
| Dropdown | ↓ / ↑ | navega opções |
| Dropdown | Enter / Space | abre / seleciona |
| Modal | Esc | fecha |
| Modal | Tab | cycla com focus trap |
| Accordion | Enter / Space | expande / colapsa |
| Sidebar nav | / | foca busca |
foco visível
Todo elemento focado tem indicação visual evidente. outline: 2px solid var(--focus) ou box-shadow: inset 0 0 0 2px var(--focus). Nunca outline: none sem fallback.
aria & semântica
- HTML semântico antes de ARIA — usar <button>, <nav>, <main>, <article> em vez de divs
- aria-label em controles sem texto visível
- aria-expanded em toggles (accordion, dropdown)
- aria-current="page" no link ativo da nav
- aria-live="polite" em toasts/notificações dinâmicas
- role="dialog" + aria-modal="true" em modais
- role="tablist", role="tab", role="tabpanel" em tabs
motion & reduced motion
Animações longas (>200ms) e parallax são respeitados via prefers-reduced-motion. Durações Carbon: fast-01 (70ms) até slow-02 (700ms).
áreas de toque
Alvos interativos têm no mínimo 44×44px (botões padrão são 48px de altura). Tamanhos menores (small) só em toolbars internas com espaçamento extra.
formulários
- Todo input tem <label> associado (for + id)
- Mensagens de erro são programaticamente associadas (aria-describedby)
- Campos obrigatórios marcados visualmente E semanticamente (required)
- Erros não são apenas cor — incluem ícone e texto
- Helper text antes do erro, não substituído por ele
checklist por componente
Antes de qualquer componente entrar no sistema, passa por este checklist.
- Operável só com teclado (sem mouse, sem touch)
- Visível ao zoom 200% sem perda de função
- Funciona em leitor de tela (NVDA, VoiceOver)
- Estado focado é evidente visualmente
- Contraste verificado em ambos os temas (light e dark)
- prefers-reduced-motion respeitado
- Padrão ARIA aplicado conforme APG