CSS Focus Ring Acessível

Focus ring acessível: o salva-vidas do usuário de teclado

O focus ring é o contorno visível que aparece em volta de um elemento interativo — link, botão, input ou widget customizado — quando ele recebe foco do teclado. É o que avisa o usuário que apertou Tab: "você está aqui, aperte Enter para ativar". Os navegadores trazem rings padrão (azul sólido no Chrome, pontilhado no Firefox, glow sutil no Safari), mas eles brigam com qualquer design e historicamente os desenvolvedores apelaram para outline: none. Fazer isso sem colocar nada no lugar destrói a acessibilidade por teclado de todo mundo que não usa ou não pode usar mouse — usuários de leitores de tela, pessoas com limitação motora e power users que preferem teclado.

O padrão moderno e alinhado com as specs é usar :focus-visible em vez de :focus. O navegador só expõe focus-visible quando o foco veio do teclado ou tecnologia assistiva — nunca de clique do mouse. Resultado: o ring some depois do clique, mas continua aparecendo quando o usuário tabula. Suporte universal nos navegadores evergreen (Chrome 86+, Firefox 85+, Safari 15.4+) e fallback gracioso para :focus em uma linha.

Duas formas de desenhar o ring

Use outline + outline-offset quando o elemento não tem border-radius — outline é barato, rápido e respeita o Modo de Alto Contraste do Windows automaticamente:

button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

Use box-shadow quando o elemento é arredondado — box-shadow acompanha o border-radius em todos os navegadores, enquanto outline só passou a fazer isso a partir do Chrome 94 e Safari 16.4:

.pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.5);
  outline: 2px solid transparent; /* fallback Alto Contraste */
}

Requisitos WCAG que você precisa cumprir

• 2.4.7 Foco Visível (AA): todo elemento interativo precisa expor um indicador de foco visível.
• 2.4.11 Foco Não Obscurecido (AA, WCAG 2.2): o indicador não pode ficar escondido atrás de header fixo, cookie banner ou overlay.
• 1.4.11 Contraste de Não-Texto (AA): o ring precisa de no mínimo 3:1 de contraste com o fundo adjacente.
• 2.4.13 Aparência do Foco (AAA, WCAG 2.2): espessura mínima de 2 CSS pixels envolvendo todo o componente.

Tailwind, design systems e Alto Contraste do Windows

O Tailwind já entrega focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 que compila exatamente para o mesmo padrão com box-shadow. Para o Modo de Alto Contraste do Windows e usuários de forced-colors, acrescente @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } } para a cor do sistema sempre prevalecer.

Metodologia de teste

Tabule por todos os elementos interativos da página, do topo até o rodapé. Observe: (a) elementos que nunca acendem (provavelmente outline: 0 sem substituto), (b) rings escondidos atrás de headers fixos (resolva com scroll-margin-top), (c) rings em pastel invisíveis no branco. Ferramentas automatizadas — axe DevTools, WAVE, Lighthouse — pegam o óbvio; NVDA e VoiceOver pegam o resto.

Perguntas frequentes

Outline ou box-shadow — qual escolher? Outline é mais rápido, respeita Alto Contraste automaticamente e nunca afeta o layout. Box-shadow é a escolha certa para botões e pílulas arredondados porque acompanha o border-radius de forma confiável em todos os navegadores. Muitos design systems combinam os dois: um outline transparente como fallback e o ring visível em box-shadow.

Posso simplesmente remover o focus ring de um botão? Nunca sem colocar nada no lugar. outline: none sozinho quebra o WCAG 2.4.7 e torna o botão inutilizável para usuários de teclado. Se o designer pedir, contra-argumente com um ring que case com a marca.

Como mostrar o ring só quando o usuário está no teclado? Use :focus-visible. O navegador rastreia a última modalidade de input e expõe a pseudo-classe apenas quando o foco veio do teclado ou tecnologia assistiva, não de clique ou toque.

O CSS gerado é enviado para algum servidor? Não. O CSS é montado no seu navegador. Nada sai da página — você pode copiar o resultado e colar direto no seu stylesheet.