Foco Visível: Nunca Esconda Onde a Pessoa Está

Quem navega com teclado precisa enxergar qual controle receberá a próxima ação. Um bom indicador não depende apenas de uma mudança sutil de cor.

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

Em um botão azul-escuro, o contorno amarelo cria contraste com o controle e com o fundo próximo. Teste em todos os temas e estados, não apenas no botão padrão.

Não apague o foco sem substituir

/* evite */
*:focus {
  outline: none;
}

Se o estilo padrão não combina com o design, crie outro tão visível quanto. Nunca remova primeiro para "resolver depois"; esse depois costuma não chegar.

:focus-visible reduz ruído visual

Ele permite mostrar um indicador quando o navegador entende que ele é necessário, especialmente em navegação por teclado. :focus continua útil quando o próprio componente precisa reagir a qualquer tipo de foco.

/* Destaca o grupo quando qualquer campo interno recebe foco. */
.campo:focus-within {
  border-color: #2563eb;
}

O foco também não pode ficar escondido

Headers fixos, barras de cookies e containers com overflow podem cobrir o elemento focado. Além de testar a navegação real, reserve espaço ao rolar até âncoras:

:target,
[tabindex="-1"] {
  scroll-margin-block-start: 5rem;
}

• Indicador visível mostra onde a interação está.
• outline: none sem substituto cria uma barreira.
• :focus-visible ajuda a diferenciar foco de teclado e outros casos.
• Foco não encoberto mantém o controle inteiro ou parcialmente visível.

Dica: percorra a tela inteira com Tab. Se em algum momento você precisar adivinhar onde está, o foco não está bom o suficiente.

Compare visualmente

No checkpoint abaixo, o botão começa sem um estilo de foco próprio. Adicione um contorno que continue claro sobre o fundo escuro e use outline-offset para separá-lo da borda.

No próximo nó, vamos aplicar semântica e foco a uma parte cheia de detalhes: formulários.