Resumo

  • O rascunho de fevereiro de 2018 de Selectors Level 4 separou o controle que possui foco, capturado por :focus, daquele cujo foco o navegador decide evidenciar por meio de :focus-visible.
  • As versões seguintes detalharam pistas como navegação por teclado, campos de digitação, preferência por foco sempre visível e continuidade quando um script transfere o foco.

O designer clica em um botão e encontra uma linha em volta dele que não estava no desenho. Uma regra CSS manda a linha embora. O botão fica impecável na demonstração com mouse. Chega outro leitor, agora com Tab. O foco percorre a página, mas a página não diz onde ele parou. Apertar Enter vira uma pequena aposta. O contorno foi demitido porque aparecia demais; sua função era justamente aparecer.

O rascunho do W3C de 2 de fevereiro de 2018 separou as duas perguntas escondidas na cena. :focus identifica o elemento que recebe a entrada. :focus-visible também considera se o navegador julga útil mostrar esse fato. O texto compara um campo de texto, pronto para receber as próximas letras, com um botão alcançado pelo teclado. Os dois pedem um endereço visível. Um clique direto no botão já traz a indicação do ponteiro. É o mesmo controle, mas a viagem até ele foi diferente.

A divisão de trabalho evita que cada site tente reconstruir a viagem com uma coleção de eventos de mouse e teclado. O navegador conhece o modo de interação e as preferências do leitor. O site conhece sua paleta, seus contrastes e a forma do indicador. Apagar outline de todo :focus joga fora a informação da primeira parte. Dar um estilo claro a :focus-visible transforma essa informação em desenho. A borda pode ganhar roupa nova sem perder o crachá.

O texto de 21 de novembro de 2018 oferece um exemplo sem timidez: linha amarela grossa para elementos que combinam com :focus-visible, mais fundo amarelo nos links. O recado era prático. Autores podiam criar um indicador coerente com a página e forte o bastante para ser encontrado entre dezenas de opções. A estética deixa de ser a desculpa para sumir com a localização do leitor.

O rascunho também enumera pistas para os navegadores. Uma pessoa pode pedir foco sempre visível nas configurações. Um campo de digitação merece sinalização porque recebe caracteres. Percorrer a página com teclado ou outro dispositivo sem ponteiro torna a marca importante; selecionar um botão com o ponteiro fornece outra pista de localização. São orientações de partida, com espaço para diferenças de ambiente e preferências. O seletor entrega à folha de estilo o resultado daquela decisão.

Há um momento em que o percurso fica mais complicado: um script move o foco. O leitor abre um painel com o teclado, e o programa escolhe a primeira ação lá dentro. O texto de novembro orienta a conservar uma indicação visível se o elemento anterior já a mostrava. Fazer a marca desaparecer na porta do painel seria uma recepção bastante ruim. Ele também trata a continuidade de um percurso guiado pelo ponteiro. O navegador precisa lembrar de onde o leitor veio, não apenas olhar para o elemento onde ele chegou.

O rascunho de 7 de maio de 2022 deixou a definição mais nítida. :focus acompanha sempre o elemento focado; :focus-visible corresponde aos momentos em que o navegador decide indicar esse foco. O autor muda a aparência da marca sem redesenhar o calendário em que ela aparece. O texto ainda sugere que os agentes de usuário usem :focus-visible no estilo padrão do foco. A marca criada pelo site e a do navegador podem, assim, seguir a mesma lógica de exibição.

O rascunho de 11 de novembro de 2022 preservou esse arranjo. O histórico de publicações do W3C situa as revisões. O ganho cabe numa cena pequena: o botão recebe um clique sem fazer alarde, mas acende quando Tab o transforma no próximo endereço. O leitor descobre onde está; o designer ainda escolhe como mostrar isso.

A linha voltou ao trabalho. Com um cargo melhor: avisar aonde a próxima tecla vai chegar.