---
id: 6143639d5eddc7094161648c
title: Passo 20
challengeType: 0
dashedName: step-20
---
# --description--
É importante vincular cada `input` ao elemento `label` correspondente. Isso fornece aos usuários de tecnologia assistiva uma referência visual para a entrada.
Isso é feito dando ao `label` um atributo `for`, que contém o `id` do `input`.
Esta seção terá o nome do aluno, endereço de e-mail e data de nascimento. Dê aos elementos `label` apropriados `for` atributos, bem como conteúdo de texto. Em seguida, vincule os elementos `input` aos elementos `label` correspondentes.
# --hints--
Você deve dar ao primeiro elemento `label` um atributo `for` apropriado.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
```
Você deve dar ao segundo elemento `label` um atributo `for` apropriado.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
```
Você deve dar ao terceiro elemento `label` um atributo `for` apropriado.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
```
Você deve dar ao primeiro elemento `label` um conteúdo de texto apropriado.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
```
Você deve dar ao segundo elemento `label` um conteúdo de texto apropriado.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
```
Você deve dar ao terceiro elemento `label` um conteúdo de texto apropriado.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
```
Você deve dar ao primeiro elemento `input` um atributo `id` que corresponda ao atributo `for` do primeiro `label`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
```
Você deve dar ao segundo elemento `input` um atributo `id` que corresponda ao atributo `for` do segundo `label`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
```
Você deve dar ao terceiro elemento `input` um atributo `id` que corresponda ao atributo `for` do terceiro `label`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
```
Você não deve usar o mesmo atributo `id` para mais de um elemento `input`.
```js
const id = (n) => document.querySelectorAll('input')?.[n]?.id;
assert.notEqual(id(0), id(1));
assert.notEqual(id(0), id(2));
assert.notEqual(id(1), id(2));
```
Você não deve usar o mesmo atributo `for` para mais de um elemento `label`.
```js
const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
assert.notEqual(htmlFor(0), htmlFor(1));
assert.notEqual(htmlFor(0), htmlFor(2));
assert.notEqual(htmlFor(1), htmlFor(2));
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
