Foco no HTML

Foco é onde o teclado “está” agora. Links, botões e controles de formulário já entram na ordem de Tab. Outros elementos são inertes até você decidir o contrário — com cuidado.

O exemplo deste capítulo é 17-foco-html, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira. Teste com Tab e Shift+Tab, não só com o mouse.

O que você vai aprender

• Reconhecer o que é focável e tabulável por padrão.
• Usar tabindex com parcimônia (0 e -1).
• Evitar tabindex positivo e ordem visual desalinhada.
• Conhecer autofocus e o risco de roubar o foco.
• Preparar o terreno para estilos de foco no CSS (sem substituí-los aqui).

Ordem natural

A ordem de navegação sequencial segue, em geral, a ordem do código-fonte. CSS pode mudar a ordem visual (flex reverso, order, posicionamento) sem mudar a ordem de Tab — e isso confunde. Não reordene elementos focáveis só no visual.

tabindex

O atributo global tabindex aceita inteiros:

• 0 — entra na ordem sequencial normal (código).
• -1 (ou outro negativo) — focável por script/clique, mas fora do Tab.
• 1 ou maior — prioridade artificial; evite. Cria ordem caótica e difícil de manter.

<button type="button">Salvar rascunho</button>
<div tabindex="0" role="button">Evite div botão; prefira button</div>

Custom elements e widgets às vezes precisam de tabindex="0". Prefira elementos nativos quando bastarem.

Autofocus e script

autofocus move o foco ao carregar. Em páginas longas ou com leitores de tela, pode desorientar. Use raro e só quando o campo for claramente a tarefa principal (ex.: busca numa página de busca).

element.focus() no script faz o mesmo sob demanda — útil após abrir um diálogo, perigoso se disparar sem ação da pessoa.

Inert e interativo

Atributos como contenteditable e tabindex podem tornar focável o que era texto estático. O inverso também: disabled em controles, ou inert em regiões (visto com diálogos modais). Não remova a capacidade de focar de um controle só porque “fica mais bonito”.

Erro comum: tabindex="1", 2, 3… para “consertar” a ordem. Corrija a ordem no HTML. Outro erro: esconder o anel de foco com CSS (outline: none) sem alternativa visível — isso quebra teclado.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Foco no HTML — Belavista</title>
    <style>
      :focus-visible {
        outline: 3px solid #0b5;
        outline-offset: 2px;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Inscrição rápida (demo)</h1>
      <p>Percorra com Tab. A ordem deve seguir o HTML.</p>
      <p><a href="#formulario">Ir ao formulário</a></p>
      <p><a href="https://example.com" rel="noopener">Site externo (exemplo)</a></p>
      <form id="formulario" action="obrigado.html" method="get">
        <p>
          <label for="nome">Nome</label>
          <input id="nome" name="nome" type="text">
        </p>
        <p>
          <label for="email">E-mail</label>
          <input id="email" name="email" type="email">
        </p>
        <button type="submit">Enviar</button>
        <button type="button" id="ajuda" tabindex="0">Ajuda</button>
      </form>
      <p id="painel" tabindex="-1">Painel focável só por script (tabindex -1).</p>
    </main>
  </body>
</html>

Inverta dois campos no HTML e confira se o Tab acompanha. Não use tabindex positivo para “consertar”.

Ligação com CSS

:focus e :focus-visible estilizam o anel. Neste capítulo o HTML precisa estar na ordem certa; o volume de foco no CSS (faixa CSS) aprofunda o visual. Mantenha contraste e espessura perceptível (~3px).

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. O que tabindex="0" faz de diferente de omitir tabindex num div?
2. Por que evitar tabindex="3"?
3. Por que testar com Tab importa além do clique?

Respostas comentadas

1. div sem tabindex não entra no Tab; com 0, entra na ordem sequencial (ainda assim prefira button/a quando for ação/link).
2. Valores positivos criam fila prioritária artificial, frágil e confusa.
3. Porque quem navega só por teclado depende da ordem lógica e do indicador de foco visível.