Foco e ordem de leitura
Quem navega só pelo teclado depende inteiramente da ordem em que o código está escrito. Ela precisa bater com a ordem visual que os olhos veem.
Estudar esta lição interativa →Quando você usa o mouse, a ordem em que os elementos aparecem no código não importa muito: você clica direto onde quer. Mas quem navega só com o teclado, apertando Tab para pular de campo em campo, depende inteiramente da ordem em que os elementos foram escritos no HTML. Essa é a chamada "ordem de foco", e ela precisa fazer sentido.
Pense na ordem em que as páginas de um livro estão encadernadas. Você pode pintar a capa de qualquer cor (isso é CSS, é só aparência), mas não dá para reordenar fisicamente as páginas por fora sem confundir quem lê na sequência, virando página por página. A ordem do HTML é a encadernação do livro; ela é o que define em que sequência o Tab visita cada elemento interativo, independentemente de como tudo é pintado depois.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Tente navegar este formulário só com Tab (clique num campo e aperte Tab): a ordem segue o código.
E se a ordem visual for diferente da ordem do código? O CSS consegue inverter ou reposicionar elementos sem mexer no HTML, e o Tab continua seguindo o código. O exemplo abaixo inverte uma fileira de botões: na tela eles aparecem como C, B, A, mas o foco passa por A, B, C, e portanto "pula" da direita para a esquerda. Para quem enxerga e usa o teclado, isso desorienta; para quem usa leitor de tela, o que vale é só a ordem do código.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique no texto e aperte Tab: o foco anda de A para B para C, mesmo com a fileira invertida na tela.
O atributo tabindex mexe nessa ordem, e vale conhecer os três casos. tabindex="0" coloca um elemento que normalmente não receberia foco (como uma div que você transformou num componente próprio) na ordem natural do Tab. tabindex="-1" deixa o elemento focável só por JavaScript ou por âncora, mas o Tab passa direto por ele. E números positivos (tabindex="3") criam uma fila separada que passa na frente de todo o resto: quase sempre bagunçam a página, então evite. Para a maioria dos casos, a solução é a ordem certa no código.
Quem navega pelo teclado precisa ver onde o foco está. O navegador já desenha um contorno ao redor do elemento focado; apagar esse contorno (outline: none no CSS, assunto do próximo curso) sem colocar outro no lugar deixa a pessoa sem saber onde está. Neste curso, o que importa é saber que o contorno existe por um bom motivo e que não deve sumir.
Um último recurso de quem navega por teclado: o link para pular direto ao conteúdo. Numa página com um menu de vinte links, apertar Tab vinte vezes antes de chegar ao texto é cansativo, e isso se repete em toda página do site. A solução é o primeiro elemento do body ser um link âncora, como <a href="#conteudo">Pular para o conteúdo</a>, apontando para o id do main. Ele costuma ficar escondido e aparecer só quando recebe o foco (a parte visual é CSS). (Na prévia abaixo há um pequeno <script> no fim que só existe por causa da plataforma, para o link âncora funcionar dentro dela, inclusive levando o foco ao conteúdo; num arquivo seu, o navegador faz isso sozinho.)
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Aperte Tab uma vez: o link 'Pular para o conteúdo' aparece. Enter leva o foco direto ao conteúdo principal.
Um detalhe importante que reforça tudo isso: prefira sempre elementos nativos interativos, como <button> e <a>, no lugar de uma <div> com um evento de clique colado nela via JavaScript. Um <button> já vem, de fábrica, navegável por Tab e ativável com Enter ou Espaço; uma <div> comum não tem nada disso por padrão, exigiria recriar manualmente um comportamento que o navegador já te dá de graça com a tag certa.
Elementos "clicáveis" construídos com <div onclick="..."> em vez de <button> são invisíveis para quem navega só pelo teclado: o Tab simplesmente pula por cima deles, porque uma div não é, por padrão, um elemento focável. Reserve a div para agrupamento estrutural sem interação; para qualquer coisa clicável, use a tag semântica correta.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Troque a div por um button navegável pelo teclado.