Interação
Contorno de foco
Focus ring
Indica qual elemento receberá a próxima ação do teclado.
VoltarO contorno mostra onde o teclado está.
Exemplo didático · Representação visual do padrão
Quando usar
Permitir orientação ao navegar sem mouse.
Cuidados e acessibilidade
Não remova o outline sem oferecer uma indicação de foco equivalente e visível.
Partes e comportamento
Contorno ou outro indicador perceptível do controle com foco.
Não confunda
Foco, hover e seleção são estados diferentes; todos precisam ser distinguíveis.
Exemplo de código
:focus-visible {
outline: 3px solid #6045cb;
outline-offset: 3px;
}Trecho didático. Integre e teste no contexto do seu projeto.