Navegação por teclado e focus-visible: o detalhe que separa sites amadores

Faça o teste agora: abra o seu site e navegue só com a tecla Tab. Você consegue ver qual botão ou link está selecionado? Em muitos sites, o foco simplesmente desaparece — alguém removeu o contorno padrão porque "estava feio".

Quem depende do teclado

• Pessoas com deficiência motora.
• Usuários de leitores de tela.
• Usuários avançados que preferem o teclado.
• Qualquer pessoa preenchendo um formulário longo.

focus vs. focus-visible

O antigo :focus mostrava o contorno também em cliques de mouse, por isso tanta gente o removia. O :focus-visible resolve: o navegador mostra o foco só quando a pessoa navega por teclado.

:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 3px; }

Checklist rápido

1. 1.Todo elemento interativo recebe foco — e nada que não seja interativo.
2. 2.A ordem do foco segue a ordem visual.
3. 3.Modais prendem o foco dentro deles e o devolvem ao fechar.
4. 4.Menus abrem e fecham pelo teclado (Enter, Esc).
5. 5.Link "pular para o conteúdo" no topo.
6. 6.Contraste suficiente do contorno (Contraste de cores e WCAG: como checar em cinco minutos).

Use os elementos certos

<button> para ações e <a> para navegação ganham foco e teclado de graça. Uma <div> com onClick não.

O foco faz parte dos estados de todo componente (Tailwind sem bagunça: estados hover, focus, active e disabled do jeito certo) e do cuidado com temas escuros (Dark mode e acessibilidade: como construir interfaces inclusivas sem comprometer o design).

Navegue por este site com Tab. Veja sites da We Codex ou fale com a gente.