HTML `label`: la soluzione ottimale per l’ac­ces­si­bi­li­tà e una migliore usabilità

Con il tag label in HTML migliori l’usabilità del tuo sito web e ga­ran­ti­sci un accesso senza barriere. label può essere uti­liz­za­to, 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 label è par­ti­co­lar­men­te im­por­tan­te per garantire chiarezza e l’ac­ces­si­bi­li­tà di un sito web. Viene uti­liz­za­to nei moduli e aggiunge una de­scri­zio­ne espli­ca­ti­va agli elementi quali campi di input, pulsanti di opzione o caselle di controllo.

È par­ti­co­lar­men­te im­por­tan­te per due casi d’uso:

• Da un lato agevola le vi­si­ta­tri­ci e i vi­si­ta­to­ri che hanno dif­fi­col­tà con le superfici ridotte nella na­vi­ga­zio­ne su un sito web. Poiché l’area clic­ca­bi­le aumenta, anche il clic risulta più semplice.
• Per le persone che uti­liz­za­no uno screen reader il tag HTML label ga­ran­ti­sce inoltre che la de­scri­zio­ne possa essere letta ad alta voce. In questo modo si migliora l’usabilità per tutte le vi­si­ta­tri­ci e tutti i vi­si­ta­to­ri del tuo sito web.

Rilevanza WCAG del tag label

I moduli HTML non devono essere solo com­pren­si­bi­li dal punto di vista visivo, ma anche conformi agli standard attuali di ac­ces­si­bi­li­tà digitale. Le WCAG (Web Content Ac­ces­si­bi­li­ty Gui­de­li­nes) 2.2 ri­chie­do­no, ad esempio, che tutti i campi di input siano eti­chet­ta­ti o ricevano istru­zio­ni chiare (criterio di successo 3.3.2 “Labels or In­struc­tions”). Si ga­ran­ti­sce così che le persone con di­sa­bi­li­tà cognitive o visive capiscano quale input è richiesto.

Inoltre, il criterio di successo WCAG 2.5.3 “Label in Name” ga­ran­ti­sce che l’etichetta visibile sia presente anche nel codice come nome ac­ces­si­bi­le. Questo è im­por­tan­te per gli utenti che uti­liz­za­no tec­no­lo­gie assistive o comandi vocali.

Come si utilizza il tag label in HTML?

Esistono due modi per uti­liz­za­re il tag label in HTML. Entrambe le varianti fanno sì che le tec­no­lo­gie assistive come gli screen reader ri­co­no­sca­no cor­ret­ta­men­te l’etichetta e che gli utenti possano, cliccando sull’etichetta, passare di­ret­ta­men­te al campo di input cor­ri­spon­den­te.

As­so­cia­zio­ne esplicita (con for e id)

Con il metodo esplicito separi nel codice HTML l’etichetta e il campo del modulo, ma li colleghi uti­liz­zan­do l’attributo for con il valore id del campo di input. Questa variante offre il miglior supporto da parte dei browser e delle tec­no­lo­gie assistive. Per questo motivo è ge­ne­ral­men­te rac­co­man­da­ta come soluzione migliore.

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

È im­por­tan­te che il valore dell’attributo for cor­ri­spon­da esat­ta­men­te all’attributo id del campo di input.

As­so­cia­zio­ne implicita (input nel label)

In al­ter­na­ti­va puoi inserire il campo di input all’interno dell’elemento <label>. In questo caso l’as­so­cia­zio­ne viene creata au­to­ma­ti­ca­men­te, senza dover impostare for e id. Anche questa variante è HTML corretto, tuttavia non è sup­por­ta­ta da tutti i di­spo­si­ti­vi.

<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 uti­liz­za­no screen reader un accesso senza barriere al tuo sito, dovresti so­prat­tut­to con­tras­se­gna­re 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 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 cor­ri­spon­de­re esat­ta­men­te al valore dell’attributo id di un altro modulo di controllo nello stesso documento.
• form: l’attributo form è un attributo ag­giun­ti­vo spe­cia­liz­za­to che può essere utile in layout complessi. Non è ne­ces­sa­rio per i normali moduli ac­ces­si­bi­li con label e il relativo campo di input. Il col­le­ga­men­to dovrebbe avvenire tramite for / id o tramite an­ni­da­men­to. Uf­fi­cial­men­te, tuttavia, form non rientra tra gli attributi standard definiti dalla specifica HTML per label.

<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>