Indicadores de Foco: Navegação por Teclado
Tornar o foco visível e acessível. Estilos CSS, cores de contraste e padrões que funcionam para utilizadores com navegação por teclado.
Porque é que o Foco Importa
Muita gente não usa o rato. Não por escolha, mas porque não consegue — pessoas com deficiências motoras, utilizadores de tecnologia de apoio, ou simplesmente alguém que prefere navegar com o teclado. Quando o foco desaparece, eles desaparecem também.
O indicador de foco é aquele retângulo, borda ou brilho que mostra onde está o cursor do teclado. Sem ele, é impossível saber em que botão ou campo de texto estás. É como tentar ler um livro com os olhos fechados. Ainda consegues passar páginas, mas não sabes onde estás.
O Essencial: Contraste e Visibilidade
Um bom indicador de foco segue três regras simples.
O WCAG AA exige uma proporção de contraste de 3:1 para indicadores de foco. Parece pouco? Não é. Significa que se o teu fundo é branco (#ffffff), o foco não pode ser cinzento claro (#e0e0e0). Tem de ser mais escuro. Muito mais escuro.
A maioria dos browsers usa um azul predefinido que funciona bem em fundos claros. Mas em fundos escuros? Desaparece completamente. É por isso que muitos sites customizam o foco — não para ser bonito, mas para ser visível em qualquer contexto.
Três coisas que precisas:
- Uma cor que contrasta com o fundo (3:1 mínimo)
- Espaço suficiente à volta do elemento (2px mínimo)
- Que se vê em qualquer contexto — luz ou escuro
CSS: Como Implementar Foco Acessível
A forma mais simples é usar `outline`. É uma propriedade CSS que cria uma borda à volta do elemento quando tem foco. Não afeta o layout — não empurra outros elementos para o lado. Perfeito.
Podes customizar a cor, a largura e o estilo. A maioria dos sites usa uma borda sólida de 2-3px em azul escuro ou outra cor que contrasta bem. Alguns adicionam uma sombra (box-shadow) para mais profundidade.
O importante é remover o outline predefinido (outline: none) apenas se estiveres a adicionar um próprio. Se removeres sem substituir? O utilizador fica perdido.
Dica: Testa o teu foco em diferentes fundos. Claro, escuro, colorido. Se desaparecer em qualquer um, não está acessível.
Navegação por Teclado: Ordem e Sequência
Não basta ter um bom indicador de foco. A sequência também importa. Quando alguém prime Tab, o foco deve mover-se de forma lógica — da esquerda para a direita, de cima para baixo. Não em saltos aleatórios.
A propriedade `tabindex` controla isto. Um valor de 0 coloca o elemento na sequência natural. Valores positivos (1, 2, 3) sobrescrevem a ordem — mas é complicado manter. A maioria dos designers não recomenda.
O que realmente funciona? HTML semântico. Se usares `
Ferramentas e Técnicas de Teste
Como verificar se o teu indicador de foco está a funcionar?
Testa com o Teclado
Abre o teu site e prima Tab repetidamente. Consegues ver o foco? Move-se na ordem correta? Se não consegues responder com sim, tens um problema.
DevTools do Browser
Chrome e Firefox mostram o foco actual no inspetor. Podes ver a cor exacta, a largura, tudo. Usa isto para verificar se o contraste é suficiente.
Verificadores WCAG
Axe DevTools e WAVE são extensões que verificam acessibilidade. Não apanham tudo, mas apanham erros comuns com o foco.
Simuladores de Daltonismo
Se usas cor azul para o foco, verifica como fica para pessoas com daltonismo. Uma borda também ajuda — cor sozinha não é suficiente.
Melhores Práticas que Realmente Funcionam
Existem muitas formas de implementar foco. Algumas funcionam melhor que outras.
Usa sempre uma cor que contrasta bem. Se o teu design usa muitas cores, escolhe uma que funcione em todas. Azul escuro (#0052cc) funciona em fundos claros e escuros. Amarelo pode desaparecer.
Adiciona espaço à volta — pelo menos 2 pixels. Isto torna o foco visível mesmo que o elemento seja pequeno. E não uses outline: none sem adicionar o teu próprio. É a maior falha que vemos em sites portugueses.
Por fim, testa em dispositivos reais. Um ecrã de laptop não mostra a mesma coisa que um tablet ou telemóvel. O foco precisa ser visível em todos.
O Foco É Invisível Até Precisares Dele
A maioria dos utilizadores não pensa no indicador de foco. Mas para quem navega com teclado, é tudo.
Um bom indicador de foco é simples: tem de ser visível, estar na posição correcta e funcionar em qualquer contexto. Não precisa ser bonito. Precisa funcionar.
Se ignoras isto, estás a dizer a essas pessoas que o teu site não é para elas. Não é intencional — é apenas negligência. E é fácil de corrigir.
Começa hoje: abre um dos teus sites, prime Tab, e vê o que acontece. Se o foco desaparecer, sabes o que fazer.
Nota sobre Acessibilidade
As recomendações neste artigo baseiam-se em normas WCAG 2.1 AA. As leis de acessibilidade variam por país e contexto. Em Portugal, a Acessibilidade Web é obrigatória para entidades públicas e recomendada para privadas. Consulta a Lei de Acessibilidade e as Directivas da UE para requisitos específicos da tua situação.
