Contexto
Em uma interface operada por teclado, o foco mostra qual elemento receberá a próxima ação. Ao pressionar Tab, a pessoa precisa identificar visualmente onde está e saber qual controle será acionado por Enter ou Espaço.
O navegador costuma fornecer um indicador nativo, mas estilos que removem o outline, contrastes baixos e barras fixas que encobrem o controle podem tornar o foco imperceptível. Este padrão trata da indicação visual e da visibilidade do foco. Ele não substitui a ordem lógica de navegação, a semântica ou a operação completa por teclado.
Mostre sempre qual botão, link ou controle recebeu foco de teclado.
Preserve o indicador nativo quando ele for visível e suficiente.
Ao personalizar o foco, use um contorno claro ao redor do controle inteiro, sem depender apenas de uma mudança sutil de fundo.
Garanta contraste entre o indicador e as cores adjacentes quando o estilo for definido pelo site.
Mantenha o controle visível quando o foco avançar, evitando cabeçalhos, rodapés e painéis fixos que o encubram.
Aplique o estado a todos os controles operáveis, incluindo links, botões, campos, menus e componentes personalizados.
Teste com Tab, Shift + Tab, Enter e Espaço, em diferentes tamanhos de tela e níveis de zoom.
Porque isso importa?
Sem um indicador de foco, uma pessoa que navega pelo teclado pode não saber onde está nem qual elemento será acionado. Isso aumenta a desorientação, torna tarefas mais lentas e pode impedir a operação de uma interface aparentemente funcional.
O foco também beneficia pessoas com limitações de atenção, memória ou processos executivos, pois mantém visível o ponto atual da interação. O indicador não precisa ter uma forma única, mas precisa ser perceptível, persistente enquanto o controle estiver focado e distinguível do estado normal.
Quando usar?
- Links de navegação e links de conteúdo.
- Botões de ação e botões apenas com ícone.
- Campos, caixas de seleção, opções e interruptores.
- Menus, listas suspensas, abas e outros controles interativos.
- Componentes personalizados que recebem foco programático.
- Interfaces com teclado, leitor de tela, comando de voz ou switch.
Quando evitar?
- Remover o outline sem criar um indicador equivalente.
- Usar apenas hover para comunicar a posição atual.
- Trocar somente a cor de fundo por uma variação quase imperceptível.
- Esconder o foco atrás de cabeçalhos, rodapés ou painéis fixos.
- Aplicar foco apenas em botões e esquecer links ou controles personalizados.
Recomendações
Faça
- Preserve o foco nativo.
- Use contorno claro.
- Garanta contraste suficiente.
- Mantenha o foco visível.
- Teste a sequência com teclado.
Evite
- Remover o outline.
- Depender só de hover.
- Usar cor quase invisível.
- Encobrir o controle focado.
- Esquecer links e componentes customizados.
