---
name: sites-web-accessibility
description: Padrões de acessibilidade web — WCAG 2.1 AA, ARIA, navegação por teclado e testes. Injectado em EROS (sites-ux-alpha) e LUMEN (sites-ux-beta).
---
# Sites Web Accessibility — WCAG 2.1 AA
## Checklist obrigatório
### Percepção
- [ ] Contraste mínimo 4.5:1 (texto normal) e 3:1 (texto grande)
- [ ] Alt text em todas as imagens (`alt=""` para decorativas)
- [ ] Vídeos com legendas
- [ ] Não depender só de cor para transmitir info
### Operação
- [ ] Todos os elementos interactivos acessíveis por teclado
- [ ] Focus visible em todos os elementos interactivos
- [ ] Skip links para conteúdo principal
- [ ] Sem armadilhas de foco (focus traps apenas em modais)
### Compreensão
- [ ] `lang` definido no ``
- [ ] Labels em todos os inputs
- [ ] Mensagens de erro descritivas
- [ ] Sem timeout inesperado
### Robustez
- [ ] HTML semântico correcto
- [ ] ARIA apenas quando HTML nativo não chega
## Padrões ARIA essenciais
```tsx
// Botão que abre modal
// Modal
Título
// Nav
// Imagem decorativa
// Loading state
...
```
## Focus management
```tsx
// Focus visible custom (substituir outline padrão)
.focus-visible:focus-visible {
@apply outline-2 outline-offset-2 outline-primary;
}
// Skip link
Saltar para conteúdo
```
## Teste rápido
1. Navegar toda a página só com Tab/Enter/Escape
2. Usar VoiceOver (Mac) ou NVDA (Win) para testar leitura
3. Desactivar CSS e verificar estrutura semântica