Foco no CSS

Quem navega o site do Laboratório Belavista só com teclado precisa ver onde está. Foco visível (~3px), contraste e :focus-visible fazem parte da acessibilidade de verdade — não são enfeite.

O exemplo deste capítulo é 39-foco-css, no pacote que acompanha o volume. Tabule pelos links e pelo campo. Mude a cor do outline, preveja, confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir. Servidor de estudo: 127.0.0.1.

O que você vai aprender

• Por que remover outline sem substituto quebra o teclado.
• Estilizar :focus e preferir :focus-visible.
• Usar outline + outline-offset.
• Combinar skip-link com destino focável.
• Testar Tab e Shift+Tab na página.

Quem recebe foco

Links, botões e controles de formulário já entram na ordem de tabulação. tabindex="0" inclui um bloco na ordem natural. tabindex="-1" permite foco programático (skip-link, script), sem Tab direto.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Foco — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Ir para o conteúdo</a>
    <header>
      <nav aria-label="Principal">
        <a href="index.html" aria-current="page">Início</a>
        <a href="oficinas.html">Oficinas</a>
      </nav>
    </header>
    <main id="conteudo" tabindex="-1">
      <h1>Agenda fictícia</h1>
      <label for="busca">Buscar oficina</label>
      <input id="busca" name="busca" type="search">
      <button type="button">Filtrar</button>
    </main>
  </body>
</html>

Outline visível

.skip {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: 0.5rem;
  transform: translateY(-120%);
}

.skip:focus {
  transform: none;
  z-index: 10;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.skip:focus-visible {
  outline: 3px solid #8b1e1e;
  outline-offset: 3px;
}

/* Evite isto sem alternativa: */
/* a:focus { outline: none; } */

Erro comum: outline: none em todos os :focus porque “fica feio no clique”. Use :focus-visible e um anel claro (~3px) com contraste.

Foco e overflow

overflow: hidden no pai pode cortar o outline do filho. Teste Tab depois de arredondar e recortar. outline-offset ajuda a afastar o anel da borda.

Critério para avançar

Você avança se: percorre a página só com teclado; o skip-link aparece no foco; nenhum controle interativo fica sem indicação visível.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual a diferença prática entre :focus e :focus-visible?
2. Para que serve tabindex="-1" no main do exemplo?
3. Por que outline: none global é perigoso?

Respostas comentadas

1. :focus em qualquer foco (incluindo clique em muitos casos); :focus-visible tende a destacar quando o indicador faz sentido (ex.: teclado).
2. Para o destino do skip-link poder receber foco ao ativar o âncora.
3. Quem usa teclado perde o rastro do controle ativo.