O mínimo sobre focus de elementos em HTML, CSS e Javascript (bônus: tabindex)
Tags: focus, html, css, javascript
Published: 2022-10-13 17:50:22

## Saber trabalhar com focus em elementos HTML faz o seu site melhorar em experiência, acessibilidade e design.
 
O focus é um recurso visual para mostrar qual elemento está sendo utilizado, ou o mais importante no momento.
 
Você pode focar um elemento através da tecla `tab`, do atributo `autofocus` ou do método `element.focus()`.
 
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.**
 
![](https://www.datocms-assets.com/64896/1665662912-hierarquia.png)
 
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.
 
![Uma matéria do Uol, onde o título recebe mais destaque, seguido do texto e da data da publicação da matéria](https://www.datocms-assets.com/64896/1665662944-hie.png)
 
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.
 
![quatro campos de formulário e um botão, o primeiro campo possui uma borda diferenciada](https://www.datocms-assets.com/64896/1665662953-html-form.jpg)
 
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`:
 
```html
<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.
 
Tá pensando no que eu tô pensando?
 
*"e Se Eu CoLoCaR *`*aUtOFoCuS*`* eM mAiS dE uM eLeMeNtO?"*
 
Tive que testar isso para matar minha curiosidade. Já que não é possível focar em mais de um elemento ao mesmo tempo, o foco ficará no primeiro elemento encontrado que possua o atributo `autofocus`.
 
### 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:
 
```html
<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:
 
```html
<button tabindex="1">Cachorro</button>
<button tabindex="3">Gato</button>
<button tabindex="2">Cavalo</button>
```
 
A ordem atualizada é:
 
- Cachorro
- Cavalo
- Gato
 
Inserir um valor acima de 0 em `tabindex` é [uma prática desencorajada pelo Google](https://web.dev/i18n/pt/control-focus-with-tabindex/#evite-tabindex-greater-0), pois ele altera a ordem natural esperada. Isso porque os usuários esperam que o foco siga a ordem dos elementos da página.
 
O ideal é mover esse elemento para um ponto anterior na DOM.
 
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:
 
```css
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:
 
```html
<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*:
 
```html
<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:
 
```css
input {
  border: 4px solid lightgrey;
}

input:focus {
  border-color: red;
}
```
 
{% embed https://www.datocms-assets.com/64896/1665107460-focus.mp4 %}
 
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](https://twitter.com/francidellamora/status/1444706570793885701).
 
Além do `tab` e do atributo `autofocus`, você pode focar através do método `focus()` do Javascript.
 
 Veja um exemplo:
 
```html
<button id="submit-button">
  Enviar dados
</button>
```
 
```javascript
const submitButton = document.getElementById('submit-button');
submitButton.focus();
```
 
Veja mais sobre o `focus()` na [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) e [W3Schools](https://www.w3schools.com/jsref/met_html_focus.asp).
 
Outro atributo muito interessante sobre o focus em Javascript é o `document.activeElement` (somente leitura). Ele retorna qual elemento da DOM está em foco.
 
Exemplo:
 
```html
<input type="text" name="cidade" id="input" />

<button id="submit-button">
  Enviar dados
</button>
```
 
```javascript
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?