--- id: 587d7790367417b2b2512ab0 title: Use tabindex to Add Keyboard Focus to an Element challengeType: 0 videoUrl: '' localeTitle: Use tabindex para adicionar foco do teclado a um elemento --- ## Description
O atributo tabindex HTML possui três funções distintas relacionadas ao foco do teclado de um elemento. Quando está em uma tag, indica que o elemento pode ser focado. O valor (um inteiro que é positivo, negativo ou zero) determina o comportamento. Determinados elementos, como links e controles de formulário, recebem automaticamente o foco do teclado quando um usuário é direcionado por uma página. Está na mesma ordem em que os elementos vêm na marcação de fonte HTML. Essa mesma funcionalidade pode ser fornecida a outros elementos, como div , span e p , colocando-se um tabindex="0" neles. Aqui está um exemplo: <div tabindex="0">I need keyboard focus!</div> Observação
Um valor de tabindex negativo (tipicamente -1) indica que um elemento é focalizável, mas não é alcançável pelo teclado. Esse método geralmente é usado para trazer o foco ao conteúdo de forma programática (como quando um div usado para uma janela pop-up é ativado) e está além do escopo desses desafios.
## Instructions
A Camper Cat criou uma nova pesquisa para coletar informações sobre seus usuários. Ele sabe que os campos de entrada recebem automaticamente o foco do teclado, mas ele quer ter certeza de que seus usuários de teclado pausem nas instruções enquanto navegam pelos itens. Adicione um atributo tabindex à tag p e defina seu valor como "0". Bônus - usando tabindex também ativa a pseudo-classe CSS :focus para trabalhar na tag p .
## Tests
```yml tests: - text: Seu código deve adicionar um atributo tabindex à tag p que contém as instruções do formulário. testString: 'assert($("p").attr("tabindex"), "Your code should add a tabindex attribute to the p tag that holds the form instructions.");' - text: Seu código deve definir o atributo tabindex na tag p para um valor de 0. testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the tabindex attribute on the p tag to a value of 0.");' ```
## Challenge Seed
```html

Ninja Survey

Instructions: Fill in ALL your information then click Submit


What level ninja are you?


Select your favorite weapons:




```
## Solution
```js // solution required ```