O mínimo sobre focus de elementos em HTML, CSS e Javascript (bônus: tabindex)

Entender como focar um elemento é fácil.

Você por acaso:

• Já tirou foto com fundo desfocado?

• Já embaçou o fundo do seu vídeo no Zoom/Teams/Meet/Discord para não aparecer a bagunça do quarto?

• Já usou a ferramenta blur do Photoshop?

• Ou usa óculos?

Então tem todas as informações para entender o que é e como funciona o focus.

Mesmo que não tenha passado por essas situações, vem comigo.

O que é o focus?

Focus é dizer o que é mais importante.

O focus é um recurso visual para aplicar hierarquia nas informações. Em outras palavras, ele destaca qual é o elemento ativo, o mais importante, que está em uso ou onde está o cursor.

No design gráfico, a pessoa criadora deve definir quais informações são mais importantes, e aplicar maior destaque nelas.

Quando você desenvolve para a web, a lógica é a mesma.

Perceba que na imagem abaixo, o título é maior e possui uma cor de fundo, logo sua importância aumenta. Enquanto isso, a data da publicação da matéria é menor e possui uma cor cinza, o que remove a importância dessa informação. E o texto está em preto em tamanho médio.

Porém, na web existe um detalhe a mais do que no design gráfico: o foco pode mudar conforme o usuário interage com a página. Se ele está preenchendo um formulário, a cada campo preenchido o foco muda. E é importante aplicar um efeito visual para deixar claro qual elemento está em foco.

Na imagem acima, o campo utilizado fica muito claro. E será esse o campo preenchido, caso o usuário digite algo.

Veja agora como focar um elemento.

Focus em elementos HTML

Focalizável.

Não é uma palavra do meu dia a dia, mas é a forma certa de chamar elementos que podem estar em foco, ou seja, com qual deles o usuário está interagindo.

Conforme você usa a tecla tab, é possível perceber que o focus muda para o próximo elemento.

Além disso, o HTML permite focar automaticamente um elemento no carregamento da página. Nesse caso, use o atributo autofocus:

<input type="text">
<input type="checkbox">
<input type="radio">
<select></select>
<textarea autofocus></textarea>

No exemplo acima, o <textarea> virá em foco logo no começo.

Como controlar o focus com o atributo tabindex

O tabindex é um atributo HTML que define a ordem de focus da página.

• tab: tabulação, tabela, organização

• index: índice, ordem

É a ordem dos elementos focalizáveis.

Por padrão, a tecla tab avança o foco sempre para o próximo elemento na ordem do código. Agora, com o atributo tabindex, você pode pular algum ou até voltar por eles.

Se você estivesse em uma página com três botões:

<button>Cachorro</button>
<button>Gato</button>
<button>Cavalo</button>

O tab colocaria o focus neles na seguinte ordem:

• Cachorro

• Gato

• Cavalo

Mas essa ordem poderia ser invertida assim:

<button tabindex="1">Cachorro</button>
<button tabindex="3">Gato</button>
<button tabindex="2">Cavalo</button>

A ordem atualizada é:

• Cachorro

• Cavalo

• Gato

Uma característica importante sobre o tabindex é que ele torna um elemento focalizável. O <button> recebe focus de forma nativa, mas uma <div> não. Logo você deve ter percebido que é possível tornar qualquer elemento focalizável.

Como uma <div> não recebe foco, o código CSS abaixo é inútil:

div:focus {
  /* estilo aplicado no focus */
}

Mas se ela tiver o atributo tabindex com o valor 0 ou acima, o estilo em :focus será aplicado normalmente:

<button tabindex="1">Cachorro</button>
<button tabindex="2">Gato</button>
<button tabindex="3">Cavalo</button>
<div tabindex="0">Pássaro</div>

Por fim, se você atribuir um tabindex com valor negativo, não será possível focar nesse elemento através do teclado. Esse recurso é muito usado naqueles itens que iniciam escondidos na página.

No código abaixo, o foco pula do gato diretamente para o pássaro:

<button tabindex="1">Cachorro</button>
<button tabindex="2">Gato</button>
<button tabindex="-1">Cavalo</button>
<div tabindex="0">Pássaro</div>

Legal, tem um elemento em foco. E agora?

Focus em CSS

E quando o focus acontece, você pode aplicar um estilo personalizado no elemento:

input {
  border: 4px solid lightgrey;
}

input:focus {
  border-color: red;
}

Esse efeito é muito bom por vários motivos:

• Experiência: é muito fácil para o usuário identificar onde está o foco ou cursor

• Acessibilidade: facilita o acesso para usuários que não usam mouse

• Design: fica mais bonito, vamos combinar né?

Mas você não depende apenas da tecla tab ou do atributo autofocus para focar um elemento.

Focar um elemento em Javascript

Com Javascript tudo é possível .

Além do tab e do atributo autofocus, você pode focar através do método focus() do Javascript.

Veja um exemplo:

<button id="submit-button">
  Enviar dados
</button>

const submitButton = document.getElementById('submit-button');
submitButton.focus();

Outro atributo muito interessante sobre o focus em Javascript é o document.activeElement (somente leitura). Ele retorna qual elemento da DOM está em foco.

Exemplo:

<input type="text" name="cidade" id="input" />

<button id="submit-button">
  Enviar dados
</button>

const submitButton = document.getElementById('submit-button');
const input = document.getElementById('input');
submitButton.focus();
console.log(document.activeElement); // submitButton
input.focus();
console.log(document.activeElement); // input

Callback

O focus é um recurso visual para destacar o elemento ativo da página.

Você pode fazer isso logo que a página carrega de forma simples, nativa e sem Javascript. Basta aplicar o atributo autofocus em um elemento.

Use a pseudoclasse :focus do CSS, para estilizar seus elemento em foco. Seu site ganha pontos em acessibilidade, experiência e design.

Caso precise trabalhar de forma mais controlada com o focus, não deixe de usar o método element.focus() do Javascript.

E aí, quais dessas técnicas você ainda não conhecia?