Teste de Navegação por Teclado - A11y Avaliator

Por que Testar com Teclado?

Se seu site só funciona com mouse, você está excluindo muita gente:

👥 Deficiência motora: Não conseguem usar mouse com precisão
⌨️ Poder e produtividade: Muitos preferem teclado (desenvolvedores inclusos)
📱 Mobile: Teclado em celular é lento; automação com teclado é melhor
🌐 Assistência tecnológica: Switches, joysticks, reconhecimento de voz - tudo se reduz para teclado

Teste simples: Coloque o mouse de lado e tente usar seu site usando APENAS teclado. Se não conseguir, seus usuários também não conseguem.

Procura por: Elementos sem indicador visual de focus (outline, border, mudança de cor)

Problema: Usuários de teclado não sabem onde estão

Solução: Sempre adicionar outline ou style customizado visível

Procura por: Atributos tabindex com valores > 0

Problema: Pode quebrar a ordem natural de navegação

Solução: Use tabindex="-1" ou "0", nunca positivo

Procura por: Modais/dropdowns sem botão de fechar visível

Problema: Focus fica preso, impossível avançar

Solução: Sempre fornecer forma de sair (ESC, fechar botão)

Procura por: Contagem de elementos interativos

Relatório mostra: Quantos elementos podem receber focus

Interpretação: Muito poucos? Pode haver interatividade quebrada

<div onclick="submitForm()">Enviar</div>

Problema: Div não é focável, teclado não consegue ativar

<button onclick="submitForm()">Enviar</button>

Ou se deve ser div:

<div role="button" tabindex="0" onclick="submitForm()" onkeydown="if(event.key==='Enter') submitForm()">Enviar</div>

Modal aberto → Tab dentro do modal → Fica preso → Não consegue sair

Problema: Sem forma de fechar com teclado (ESC ou botão)

Modal com botão X [✕] ou Botão "Cancelar" + Suporte para ESC onkeydown="if(event.key==='Escape') closeModal()"

Elementos focáveis encontrados: 12

Elementos sem indicador de foco: 3

Problemas com tabindex: 0

Possíveis keyboard traps: 1 (modal #contact-form)