# HTML `label`: la soluzione ottimale per l’accessibilità e una migliore usabilità

Con il tag `label` in HTML migliori l’usabilità del tuo sito web e garantisci un accesso senza barriere. `label` può essere utilizzato, tra l’altro, per campi di input, caselle di controllo e pulsanti di opzione e funziona con attributi globali, attributi di evento nonché con `for` e `form`.

## A cosa serve il tag HTML `label`?

Il [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) `label` è particolarmente importante per garantire chiarezza e l’[accessibilità di un sito web](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/sito-web-accessibile/). Viene utilizzato nei moduli e aggiunge una descrizione esplicativa agli elementi quali **campi di input, pulsanti di opzione o caselle di controllo**.

È particolarmente importante per due casi d’uso:

- Da un lato agevola le visitatrici e i visitatori che hanno difficoltà con le superfici ridotte nella [navigazione su un sito web](https://www.ionos.it/digitalguide/siti-web/web-design/navigazione-del-sito-web/). Poiché **l’area cliccabile aumenta**, anche il clic risulta più semplice.
- Per le persone che utilizzano uno [screen reader](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/screen-reader-i-software-per-gli-utenti-ciechi-o-ipovedenti/) il tag HTML `label` garantisce inoltre che la descrizione possa essere letta ad alta voce. **In questo modo si migliora l’usabilità** per tutte le visitatrici e tutti i visitatori del tuo sito web.

## Rilevanza WCAG del tag `label`

I moduli HTML non devono essere solo comprensibili dal punto di vista visivo, ma anche conformi agli standard attuali di [accessibilità digitale](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/accessibilita-digitale/). Le [WCAG](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/linee-guida-per-laccessibilita-nel-web-wcag/) (Web Content Accessibility Guidelines) 2.2 richiedono, ad esempio, che tutti i campi di input siano etichettati o ricevano istruzioni chiare (criterio di successo 3.3.2 “Labels or Instructions”). Si garantisce così che le persone con disabilità cognitive o visive capiscano quale input è richiesto.

Inoltre, il criterio di successo WCAG 2.5.3 “Label in Name” garantisce che l’etichetta visibile sia presente anche nel codice come nome accessibile. Questo è importante per gli utenti che utilizzano tecnologie assistive o comandi vocali.

N.B. Dal 28 giugno 2025 si applica in tutta l’Unione Europea la normativa European Accessibility Act (EAA). Di conseguenza molte offerte digitali (inclusi i moduli) devono essere progettate in modo accessibile, affinché siano fruibili e utilizzabili dalle persone con disabilità. Con questa direttiva si rafforza l’obbligo di accessibilità digitale per le aziende.

## Come si utilizza il tag `label` in HTML?

Esistono due modi per utilizzare il tag `label` in HTML. Entrambe le varianti fanno sì che le tecnologie assistive come gli screen reader riconoscano correttamente l’etichetta e che gli utenti possano, cliccando sull’etichetta, passare direttamente al campo di input corrispondente.

### Associazione esplicita (con `for` e `id`)

Con il metodo esplicito **separi nel codice HTML l’etichetta e il campo del modulo**, ma li colleghi utilizzando l’attributo `for` con il valore `id` del campo di input. Questa variante offre il miglior supporto da parte dei browser e delle tecnologie assistive. Per questo motivo è generalmente raccomandata come soluzione migliore.

```html
<p>
    <input type="checkbox" name="letto" id="read" value="sì" />
    <label for="read">Ho letto le condizioni del contratto</label>
</p>
```

È importante che il valore dell’attributo `for` corrisponda esattamente all’attributo `id` del campo di input.

### Associazione implicita (input nel `label`)

In alternativa puoi inserire il campo di input all’interno dell’elemento `<label>`. In questo caso l’associazione viene creata automaticamente, senza dover impostare `for` e `id`. Anche questa variante è HTML corretto, tuttavia non è supportata da tutti i dispositivi.

```html
<p>
    <label>
        <input type="checkbox" name="letto" value="sì" />
        Ho letto le condizioni del contratto
    </label>
</p>
```

## Quali elementi vengono marcati con il tag HTML `label`?

Per offrire, ad esempio, agli utenti che utilizzano screen reader un accesso senza barriere al tuo sito, dovresti soprattutto contrassegnare in HTML con un tag `label` i seguenti elementi:

- **Campi di input**: `<input type="text" />`, `<input type="password" />`, `<textarea>`
- **Caselle di controllo**: `<input type="checkbox" />`
- **Pulsanti di opzione**: `<input type="radio" />`
- **Liste di selezione**: `<select>`
- **Campi per upload:** `<input type="file" />`

## Quali attributi supporta il tag `label`?

Il tag HTML `label` supporta tutti gli [attributi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) globali, così come tutti gli attributi evento. Inoltre, con il tag HTML possono essere associati i seguenti attributi:

- `for`: tramite l’attributo `for` si indica l’ID dell’elemento di input a cui deve essere collegata l’etichetta. Il valore di `for` deve corrispondere esattamente al valore dell’attributo `id` di un altro modulo di controllo nello stesso documento.
- `form`: l’attributo `form` è un attributo aggiuntivo specializzato che può essere utile in layout complessi. Non è necessario per i normali moduli accessibili con `label` e il relativo campo di input. Il collegamento dovrebbe avvenire tramite `for` / `id` o tramite annidamento. Ufficialmente, tuttavia, `form` non rientra tra gli attributi standard definiti dalla specifica HTML per `label`.

```html
<form id="partecipante">
    <label for="nome">Nome</label>
    <input name="nome" id="nome" maxlength="25">
    <label for="cognome">Cognome</label>
    <input name="cognome" id="cognome" maxlength="30">
    <button>Conferma i dati</button>
</form>
```


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-label/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-label/) for AI/LLM consumption.