Acessibilidade

Acessibilidade não é uma camada extra — é a interface funcionando para todo mundo, inclusive quem navega por teclado, usa leitor de tela ou tem baixa visão. A meta do ME é WCAG 2.1 nível AA. Como os componentes vêm de EletroDS → Nuxt UI, boa parte do trabalho já vem pronta — o cuidado está em como você os compõe e escreve.

Princípios

• Tudo pelo teclado — toda ação alcançável no mouse também no teclado (Tab, Enter/Espaço, Esc). Nada de armadilha de foco.
• Foco sempre visível — nunca remova o anel de foco; use o token de foco do DS. Quem navega por teclado precisa ver onde está.
• Ordem que faz sentido — a ordem de foco segue a leitura (cima→baixo, esquerda→direita). Não force com tabindex positivo.
• Cor nunca sozinha — status, erro e seleção precisam de texto ou ícone além da cor (ver Badge).
• Semântica antes de ARIA — use o elemento certo (button, nav, heading real). ARIA só quando não há equivalente nativo.

Teclado e foco

A ação destrutiva e o overlay são onde mais se erra:

• Modal prende o foco enquanto aberto, fecha no Esc e devolve o foco ao gatilho ao fechar.
• DropdownMenu e Tabs navegam por setas; o item ativo é anunciado.
• Ícone-só (kebab, ações da linha) precisa de rótulo acessível (aria-label) — ver Button bar.

Contraste

• Texto normal: 4.5:1; texto grande (≥ 24px ou ≥ 19px bold) e ícones/bordas significativas: 3:1.
• Use os tokens de cor — eles já são calibrados. Nunca HEX cru, que escapa do contraste validado.
• Estado desabilitado é exceção de contraste, mas não deve ser o único sinal de "indisponível".

Leitores de tela

• Toda imagem informativa tem texto alternativo; a decorativa é marcada como tal (não captura foco).
• Título de seção é heading real na ordem certa (h1 → h2 → h3), não texto grande em negrito — é como o leitor monta o índice da página (ver Card).
• Conteúdo que muda sem recarregar (filtro aplicado, Toast) é anunciado por região viva.

Formulários

• Todo campo tem rótulo visível associado — placeholder não é rótulo. Ver FormField.
• Erro é descrito em texto (não só borda vermelha) e ligado ao campo, para o leitor de tela ler junto.
• Campo obrigatório é sinalizado de forma textual, não só pelo asterisco de cor.

Alvos de toque e movimento

• Alvo mínimo de 44×44px em telas de toque; espaçamento suficiente entre ações.
• Respeite prefers-reduced-motion — anime com moderação e ofereça alternativa estática.

Veja tambémCores Voz e conteúdo Componentes