---
id: 587d7790367417b2b2512ab0
title: Usar tabindex para adicionar foco a um elemento usando o teclado
challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzMDHW'
forumTopicId: 301027
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
---
# --description--
O atributo HTML `tabindex` tem três funções distintas relacionadas ao foco de um elemento utilizando o teclado. Quando ele está em uma tag, indica que o elemento pode receber foco. O valor (um número inteiro positivo, negativo ou zero) determina o comportamento.
Certos elementos, como links e inputs de formulário, recebem foco automaticamente quando um usuário aperta a tecla tab em uma página. O foco acompanha a ordem em que os elementos aparecem na tela. Essa mesma funcionalidade pode ser dada a outros elementos, como `div`, `span` e `p`, colocando um atributo `tabindex="0"` neles. Exemplo:
```html
I need keyboard focus!
```
**Observação:** um elemento `tabindex` com valor negativo (normalmente -1) indica que um elemento está focado, mas não será acessado pelo teclado. Este método é geralmente usado para trazer o foco para o conteúdo programaticamente (como quando um `div` usado para uma janela pop-up é ativado) e está além do escopo desses desafios.
# --instructions--
Camper Cat criou uma nova pesquisa para coletar informações sobre os usuários. Ele sabe que os campos de entrada obtêm o foco do teclado automaticamente, mas ele quer ter certeza de que os usuários do teclado façam uma pausa nas instruções enquanto percorrem os itens. Adicione um atributo `tabindex` à tag `p` e defina o valor como `0`. Bônus - usar `tabindex` também permite que a pseudoclasse CSS `:focus` funcione na tag `p`.
# --hints--
O código deve adicionar um atributo `tabindex` à tag `p` que contém as instruções do formulário.
```js
assert($('p').attr('tabindex'));
```
O código deve definir o atributo `tabindex` na tag `p` com um valor de 0.
```js
assert($('p').attr('tabindex') == '0');
```
# --seed--
## --seed-contents--
```html