Indicadores de foco na navegação: o que usuários de teclado precisam ver

Um usuário navega pelo seu menu usando a tecla Tab. Ele pressiona Tab. O navegador move o foco para o próximo link. Mas ele não consegue ver onde está. O indicador de foco é um contorno cinza de 1 pixel em fundo branco—invisível a menos que você force a vista. Ele pressiona Tab novamente. Ainda nada visível. Ele desiste e sai.

Você acabou de perder um cliente que estava tentando ativamente usar seu site.

Indicadores de foco são a parte mais subestimada da navegação por teclado. A maioria dos designers os trata como um detalhe secundário ou os suprime ativamente porque “parecem feios”. Mas para usuários de teclado—sejam eles cegos, com deficiência motora ou apenas usuários eficientes que gostam de atalhos—indicadores de foco são o cursor. Sem eles, a navegação é impossível.

A boa notícia: projetar indicadores de foco eficazes não é difícil. A má notícia: a maioria dos sites de comércio eletrônico acerta errado, e a WCAG 2.2 elevou ainda mais o padrão.

O Que WCAG 2.2 Realmente Exige

WCAG 2.2, publicada em outubro de 2023, introduziu um novo critério de nível AA especificamente para indicadores de foco: Critério de Sucesso 2.4.11 Aparência do Foco.

Diretrizes anteriores (2.4.7 Foco Visível do WCAG 2.1) apenas exigiam que o foco fosse visível—qualquer indicador visível passava. Mas “visível” é subjetivo. Um contorno cinza claro de 1 pixel em branco tecnicamente conta como visível, embora seja funcionalmente inútil.

WCAG 2.2 estabelece requisitos específicos:

Requisito de Tamanho

O indicador de foco deve ter pelo menos 2 pixels CSS de espessura para o perímetro completo do componente focado, ou ter uma área equivalente.

O que isso significa na prática:

• Um contorno sólido de 2px ao redor de um botão: aprovado
• Um contorno de 1px: reprovado (a menos que cubra uma área maior)
• Um contorno de 4px apenas em um lado: reprovado (não cobre o perímetro)
• Uma linha grossa embaixo de um link com 2px de altura e pelo menos tão largo quanto o texto do link: aprovado

Requisito de Contraste

O indicador de foco deve ter uma razão de contraste de pelo menos 3:1 contra:

1. O estado não focado do componente
2. Cores adjacentes (fundo atrás do componente)

Isso é mais difícil do que parece. Se seu link de navegação é texto azul escuro em fundo branco, e seu indicador de foco é um contorno azul claro, você precisa:

• Contraste de 3:1 entre o contorno azul claro e o fundo branco (cor adjacente)
• Contraste de 3:1 entre o contorno azul claro e o texto azul escuro (cor do componente)

Muitos designers escolhem uma cor da marca para o foco que parece ótima mas falha em um desses testes de contraste.

O Problema do Contorno Padrão do Navegador

A maioria dos navegadores fornece um contorno de foco padrão—geralmente uma linha fina pontilhada ou sólida. Chrome usa um contorno azul de 2px. Firefox usa um contorno pontilhado. Safari usa um brilho azul.

Esses padrões falham em WCAG 2.2 em muitos contextos:

Pesquisa do WebAIM descobriu que estilos de foco padrão falham nos requisitos de contraste em aproximadamente 78% das combinações de cores usadas em sites reais.

É por isso que indicadores de foco personalizados importam. Você não pode contar com padrões do navegador.

Como São Os Bons Indicadores de Foco

Os melhores indicadores de foco equilibram visibilidade, consistência da marca e acessibilidade. Aqui estão padrões comprovados de sites de comércio eletrônico líderes.

Padrão 1: Contorno com Alto Contraste

O padrão mais comum é um contorno sólido com contraste forte:

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* Azul com alto contraste */
  outline-offset: 2px;        /* Espaço entre elemento e contorno */
}

Isso funciona bem para links de navegação, botões e entradas de formulário. O deslocamento de 2px evita que o contorno se sobreponha às bordas de texto ou ícone, melhorando a legibilidade.

Exemplo real: Amazon usa um contorno laranja de 3px (#FF9900) com deslocamento de 2px em todos os elementos interativos. O laranja passa no contraste em fundos brancos (6.8:1) e contra seus botões azul escuro (4.2:1).

Padrão 2: Combinação de Fundo + Contorno

Para integração visual mais apertada, combine uma mudança de cor de fundo com um contorno fino:

a:focus,
button:focus {
  background-color: #E6F2FF; /* Fundo azul claro */
  outline: 2px solid #0066CC; /* Contorno azul mais escuro */
  outline-offset: 0;
}

Isso é especialmente eficaz para menus de navegação onde você quer que o link focado se destaque do resto do menu.

Exemplo real: A navegação superior do Google usa fundo cinza claro (#F1F3F4) com contorno preto de 2px nos itens focados. O fundo cria um estado “selecionado” claro, enquanto o contorno fornece o contraste obrigatório.

Padrão 3: Sublinhado para Links de Texto

Para links de texto inline dentro do conteúdo, um sublinhado espesso é frequentemente mais claro que um contorno:

a:focus {
  outline: none; /* Remove contorno padrão */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

Isso mantém o indicador de foco perto do texto e evita a aparência “caixa ao redor de uma palavra” que os contornos criam.

Exemplo real: A documentação do Shopify usa um sublinhado azul de 3px em links focados, posicionado 4px abaixo da linha de base do texto.

Padrão 4: Sombra para Cards Interativos

Para layouts baseados em cards (cards de produtos, caixas de recursos), uma sombra de caixa cria profundidade:

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

A primeira camada de sombra (desfoque 0px, propagação 3px) atua como o indicador de foco. A segunda adiciona profundidade visual.

Exemplo real: Etsy usa uma sombra azul de 3px ao redor de cards de produtos quando focados, combinada com uma sombra sutil para profundidade.

O Truque :focus-visible

Uma reclamação comum de designers sobre indicadores de foco é que eles aparecem quando usuários clicam com o mouse, criando um contorno “preso” após o clique. Isso acontece porque :focus dispara em qualquer evento de foco—mouse, teclado ou programático.

A solução é a pseudoclasse :focus-visible, suportada em todos os navegadores modernos desde 2022:

/* Mostrar indicador de foco apenas para usuários de teclado */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Ocultar contorno padrão para usuários de mouse */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

Isso mostra o indicador de foco quando usuários navegam com Tab, mas o oculta quando clicam com o mouse. O melhor dos dois mundos.

Ressalva importante: Alguns usuários com deficiências motoras usam tanto teclado quanto mouse—podem clicar para focar um elemento e depois usar o teclado para interagir. Não assuma que :focus-visible significa “apenas usuário de leitor de tela”. Significa “navegação por teclado em progresso”.

Testando Seus Indicadores de Foco

Veja como testar se seus indicadores de foco atendem à WCAG 2.2:

Passo 1: Teste Manual de Teclado

Abra seu site e pressione Tab repetidamente. Pergunte a si mesmo:

• Sempre consigo ver onde o foco está?
• O indicador de foco tem pelo menos 2px de espessura?
• Ele parece diferente do estado não focado?
• Consigo vê-lo em fundos claros? Fundos escuros?
• Ele desaparece ou fica difícil de ver ao passar o mouse?

Se você responder “não” a qualquer uma dessas perguntas, você tem um problema de indicador de foco.

Passo 2: Verificação de Razão de Contraste

Use uma ferramenta como Verificador de Contraste do WebAIM para verificar:

1. Indicador de foco vs. fundo: Meça o contraste entre a cor do seu contorno de foco e o fundo atrás do elemento. Deve ser pelo menos 3:1.

2. Indicador de foco vs. componente: Meça o contraste entre a cor do seu contorno de foco e a cor principal do componente (cor do texto para links, cor de fundo para botões). Deve ser pelo menos 3:1.

Se seu indicador de foco é #0066CC (um azul comum), verifique contra:

• Fundo branco: 8.1:1 (aprovado)
• Fundo cinza claro (#F5F5F5): 7.2:1 (aprovado)
• Fundo azul claro (#CCE5FF): 2.2:1 (reprovado)

Quando falha, você precisa de uma cor de foco mais escura ou mais clara dependendo do contexto.

Passo 3: Auditoria Automatizada

Execute essas ferramentas para pegar problemas comuns de indicadores de foco:

• axe DevTools (extensão do navegador): Marca indicadores de foco ausentes e contornos com baixo contraste
• Lighthouse Accessibility (no Chrome DevTools): Verifica elementos focáveis sem estilos de foco visíveis
• WAVE (ferramenta de avaliação de acessibilidade web): Destaca problemas de ordem e visibilidade do foco

Nenhuma dessas ferramentas ainda aplicam perfeitamente os requisitos de tamanho e contraste do WCAG 2.2 (o padrão é novo), mas capturam problemas óbvios.

Erros Comuns de Indicadores de Foco

Estas são as falhas que vejo com mais frequência em lojas Shopify:

Erro 1: Suprimindo Foco Completamente

Muitos temas incluem este CSS:

*:focus {
  outline: none;
}

Isso remove todos os indicadores de foco em todo o site. É o pior erro de acessibilidade que você pode cometer.

Por que acontece: Designers não gostam do contorno padrão do navegador e o removem sem substituir.

Correção: Remova essa regra e adicione estilos de foco personalizados usando :focus-visible.

Erro 2: Contornos Invisíveis em Fundos Escuros

Um contorno de foco azul claro parece ótimo em fundos brancos mas desaparece em barras de navegação escura ou seções de rodapé.

Exemplo de falha:

a:focus {
  outline: 2px solid #66A3E0; /* Azul claro */
}

Em um fundo azul escuro (#1A2332), este contorno tem apenas 1.8:1 de contraste—falha em WCAG.

Correção: Use cores de foco diferentes para contextos claros e escuros:

/* Fundo claro */
.light-section a:focus {
  outline: 3px solid #0066CC; /* Azul escuro */
}

/* Fundo escuro */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* Branco */
}

Ou use uma cor de alto contraste que funciona em todos os lugares, como preto em fundos claros e branco em fundos escuros.

Erro 3: Indicadores de Foco Menores que 2px

Contornos finos falham no requisito de tamanho do WCAG 2.2:

button:focus {
  outline: 1px solid #0066CC; /* Muito fino */
}

Correção: Aumente para pelo menos 2px, ou use um contorno mais espesso em um lado:

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* Sublinhado espesso */
}

Erro 4: Contando Apenas com Mudança de Cor

Mudar apenas a cor do texto ou cor de fundo no foco falha se a mudança não criar um indicador visual claro:

a:focus {
  color: #0066CC; /* Texto fica azul */
}

Isso pode ser visível para usuários videntes, mas usuários de leitor de tela não recebem indicação de que o foco se moveu. E se a cor original do texto já era similar ao azul, a mudança pode ser muito sutil.

Correção: Sempre adicione um indicador de perímetro (contorno, sublinhado ou borda).

Indicadores de Foco para Mega Menus

Mega menus apresentam um desafio único porque contêm múltiplos níveis de navegação. Quando um usuário entra em um mega menu, para onde o foco deveria ir? Quando eles navegam para baixo pelos submenus, como você mostra qual item está focado?

Aqui está um padrão robusto:

/* Item de navegação de nível superior */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* Dentro do elemento */
  background-color: #F0F7FF;
}

/* Itens de submenu */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

Detalhes-chave:

• Itens de nível superior usam outline-offset: -3px para desenhar o contorno dentro da borda do elemento, evitando sobreposição com itens adjacentes
• Itens de submenu recebem tanto cor de fundo (para se destacar da grade) quanto contorno (para atender ao requisito de tamanho do WCAG)

Exemplo real: Navi+ Menu Builder gera mega menus com esse padrão incorporado—itens de nível superior se destacam com cor de fundo e contorno, e submenus usam navegação por seta com indicadores de foco claros em cada item.

O Caso Comercial para Melhores Indicadores de Foco

A maioria dos proprietários de lojas não prioriza indicadores de foco porque parecem um detalhe visual menor. Mas o impacto é mensurável.

A pesquisa do WebAIM de 2024 com usuários de leitores de tela descobriu que 87% dos respondentes citaram “navegação por teclado” como o recurso de acessibilidade mais importante, à frente de alt text, HTML semântico e rótulos ARIA. Dentro da navegação por teclado, indicadores de foco visíveis foram classificados como a principal frustração.

Quando os usuários não conseguem ver onde estão na página, não conseguem completar tarefas. Isso se traduz diretamente em receita perdida.

Pesquisa do Baymard Institute sobre usabilidade de checkout mostra que “checkout muito longo/complicado” causa 17% do abandono de carrinho. Para usuários de teclado em um site com indicadores de foco ruins, cada checkout é muito complicado—eles gastam tempo extra se reorientando em cada campo, ou abandonam completamente.

Inversamente, sites com indicadores de foco fortes veem melhorias nas taxas de conclusão de tarefas. Um estudo do Nomensa sobre ROI de acessibilidade descobriu que sites acessíveis (incluindo boa gestão de foco) tiveram 23% de taxas de conclusão de tarefas mais altas do que concorrentes inacessíveis.

Indicadores de foco melhores não apenas ajudam você a passar em auditorias. Eles ajudam usuários a terminar de comprar.

Checklist Rápido de Implementação

Aqui está um plano de ação de 20 minutos para melhorar seus indicadores de foco:

Imediato (5 minutos):

1. Adicione este CSS base ao seu tema:

   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
     outline: 3px solid #0066CC;
     outline-offset: 2px;
   }
   

2. Teste na sua página inicial, menu de navegação e checkout. Você vê o indicador de foco em todos os lugares?

Esta semana (1 hora):

1. Escolha uma cor de foco apropriada para a marca que passe nos requisitos de contraste. Use o Verificador de Contraste do WebAIM para verificar 3:1 contra suas cores de fundo principais.

2. Personalize estilos de foco para diferentes seções (fundos claros vs. fundos escuros).

3. Teste seu mega menu (se tiver um). Certifique-se de que itens de submenu focados são claramente visíveis.

Este mês (2-3 horas):

1. Adicione estilos de foco específicos para componentes interativos:
   • Cards de produtos
   • Botões adicionar ao carrinho
   • Checkboxes de filtro
   • Sugestões de autocompletar de busca
   • Botões de fechar modal

2. Execute uma auditoria automatizada com axe DevTools e corrija qualquer problema de foco sinalizado.

3. Peça a um membro da equipe (ou cliente) navegar seu site apenas com teclado e relatar onde o foco é difícil de ver.

Indicadores de foco são uma das vitórias de acessibilidade mais fáceis. O trabalho técnico é mínimo—algumas dúzias de linhas de CSS—mas o impacto é enorme. Cada usuário de teclado que cai no seu site se beneficiará.

Este artigo é parte do guia maior sobre Navegação por teclado: por que importa além da acessibilidade.