hydroimperium/acessibilidade

O que acessibilidade faz?

Torne a interface utilizável sem mouse, sem visão perfeita e sem paciência para ambiguidades.

Quando usar

Use quando o usuário:

• solicitar uma revisão de acessibilidade;
• estiver construindo formulários, navegação, modais ou componentes interativos;
• precisar de orientação sobre WCAG;
• quiser suporte a teclado ou leitor de tela;
• perguntar sobre contraste ou estados de foco.

1. Definir o escopo

• Quais páginas ou componentes?
• Quais grupos de usuários e tecnologias assistivas são relevantes?
• Qual padrão se aplica: WCAG 2.2 AA, política interna, exigência legal?
• O que está fora do escopo?

2. Verificar o básico

Semântica

• Use elementos nativos: button, a, input, label, nav, main.
• Não use um div como botão.
• Use cabeçalhos em ordem.
• Atribua nomes acessíveis a pontos de referência e seções.

Teclado

• Todo elemento interativo é acessível por Tab.
• A ordem de foco corresponde à ordem visual.
• O foco é visível.
• Não há armadilha de teclado.
• Escape fecha modais.
• As teclas de seta funcionam em menus, abas e grades onde esperado.

Formulários

• Todo campo de entrada tem um rótulo.
• Erros são anunciados e vinculados ao campo.
• Campos obrigatórios são marcados em texto, não apenas por cor.
• Autocompletar é usado quando apropriado.
• As instruções vêm antes do campo.

Imagens e mídia

• Imagens significativas têm texto alternativo.
• Imagens decorativas têm texto alternativo vazio.
• Vídeo tem legendas.
• Áudio tem transcrição.
• Nenhuma informação é transmitida apenas por cor.

Contraste e texto

• O contraste do texto atende ao WCAG AA.
• O texto pode ser redimensionado para 200% sem perda.
• Comprimento da linha e espaçamento são legíveis.
• O conteúdo reorganiza-se em 320px.

Conteúdo dinâmico

• Estados de carregamento são anunciados.
• Toasts e alertas usam regiões ativas apropriadas.
• Modais gerenciam o foco.
• Mudanças de rota no lado do cliente atualizam o título e o foco.

3. Testar

• Percorrer apenas com teclado.
• Teste básico com leitor de tela, se disponível.
• Zoom para 200%.
• Modo de alto contraste.
• Movimento reduzido.
• Verificações automatizadas, com o entendimento de que cobrem apenas parte do problema.

Formato de saída

## Escopo

## Descobertas

### <severidade>: <problema>

- **Localização:** `<caminho ou componente>`
- **WCAG:** <critério>
- **Impacto:** <quem é bloqueado e como>
- **Correção:** <mudança específica>
- **Verificação:** <como testar>

## O que funciona

## Não testado

## Prioridade

1. ...

Regras

• Não afirme conformidade total com WCAG a partir de uma varredura automatizada.
• Não use aria-* para corrigir semântica ruim.
• Não remova contornos de foco sem um substituto visível.
• Não dependa apenas de cor.
• Não adicione uma classe "somente leitor de tela" como substituto para um rótulo.
• Se a revisão for parcial, diga o que não foi testado.

Verificações de qualidade

• Semântica nativa é usada.
• Acesso por teclado funciona.
• Foco é visível.
• Formulários têm rótulos e erros.
• Contraste é suficiente.
• Conteúdo dinâmico é anunciado.
• A revisão declara o que não foi testado.