---
id: 6143639d5eddc7094161648c
title: Step 20
challengeType: 0
dashedName: step-20
---
# --description--
È importante collegare ogni `input` al corrispondente elemento `label`. Questo fornisce agli utenti di tecnologie assistive un riferimento visivo all'input.
Ciò si realizza assegnando al `label` un attributo `for` che contiene l'`id` dell'`input`.
Questa sezione conterrà il nome, l'indirizzo e-mail e la data di nascita di uno studente. Assegna agli elementi `label` gli attributi `for` appropriati, oltre al contenuto di testo. Quindi, collega gli elementi `input` agli elementi `label` corrispondenti.
# --hints--
Dovresti assegnare al primo elemento `label` un attributo `for` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
```
Dovresti assegnare al secondo elemento `label` un attributo `for` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
```
Dovresti assegnare al terzo elemento `label` un attributo `for` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
```
Dovresti assegnare al primo elemento `label` un contenuto di testo appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
```
Dovresti assegnare al secondo elemento `label` un contenuto di testo appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
```
Dovresti assegnare al terzo elemento `label` un contenuto di testo appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
```
Dovresti assegnare al primo elemento `input` un attributo `id` corrispondente all'attributo `for` del primo `label`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
```
Dovresti assegnare al secondo elemento `input` un attributo `id` corrispondente all'attributo `for` del secondo `label`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
```
Dovresti assegnare al terzo elemento `input` un attributo `id` corrispondente all'attributo `for` del terzo `label`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
```
Non dovresti usare lo stesso attributo `id` per più di un 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));
```
Non dovresti usare lo stesso attributo `for` per più di un 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
