Tag HTML label: la soluzione ideale per l’accessibilità e una maggiore fruibilità
La redazione di IONOS4 mins
Con il tag label in HTML rendete il vostro sito web più fruibile e accessibile. label può essere utilizzato, tra le altre cose, per campi di input, caselle di spunta e pulsanti e funziona con attributi globali ed event, nonché con for e form.
- Certificato SSL e protezione DDoS
- Velocità, flessibilità e scalabilità
- Dominio e consulente personale
- 1 anno gratis del gestionale di fatturazione elettronica FlexTax
Per cosa viene utilizzato il tag label in HTML?
Il tag HTML label è particolarmente importante per la chiarezza e l’accessibilità dei siti web. Si usa nei moduli e aggiunge una didascalia o un’etichetta esplicativa a elementi come campi di input, pulsanti o caselle di spunta.
È particolarmente importante per due casi d’utilizzo. In primo luogo, facilita la navigazione per le/gli utenti che hanno problemi con le aree di piccole dimensioni: rende più semplice fare clic ingrandendo l’area da cliccare. Inoltre, questo tag HTML facilita anche le/gli utenti che utilizzano uno screen reader, rendendo possibile la lettura ad alta voce delle didascalie. Ciò migliora l’usabilità del vostro sito web per chi lo visita.
Come si usa il tag label in HTML?
Esistono due modi per utilizzare il tag label in HTML. Con l’attributo for potete collegare label direttamente al campo di input. In alternativa, potete includere il modulo accanto all’etichetta direttamente all’interno del tag HTML label. Per aiutarvi, di seguito vi mostriamo entrambe le opzioni di label in HTML.
Per le caselle di spunta:
<p>
<input type="checkbox" name="letto" id="read" value="sì" />
<label for="read">Ho letto le condizioni</label>
</p>Nel farlo, è importante che l’attributo for utilizzato nel tag HTML label abbia lo stesso valore dell’attributo id nel campo di input.
Per i pulsanti:
<input type="radio" id="radio" value="acconsento" />
<label for="read">Acconsento</label>Con la seconda opzione, la didascalia è inclusa. Apparirà più o meno così:
<p>
<label>
<input type="checkbox" name="letto" value="sì" />
Ho letto le condizioni
</label>
</p>Quali elementi sono contrassegnati dal tag label in HTML?
Per consentire alle/agli utenti con uno screen reader di accedere senza barriere al vostro sito web, ad esempio, i seguenti elementi dovrebbero essere contrassegnati con un tag label in HTML:
- Campi di input: <input type="text" />, <input type="password" />, <testarea>
- Caselle di spunta: <input type="checkbox" />
- Pulsanti: <input type="radio" />
- Elenchi di selezione: <select>
- Campi per i caricamenti: <input type="file" />
Quali attributi supporta il tag label?
Il tag HTML label supporta tutti gli attributi HTML globali e quelli event. A questo scopo, i seguenti attributi possono essere collegati al tag HTML:
for: l’attributo for determina l’ID dell’elemento di input a cui deve essere collegata la didascalia. Ciò significa che anche in un documento, il primo elemento di input che corrisponde a questo valore viene automaticamente associato alla didascalia.
form: l’attributo form definisce quale elemento del modulo deve essere assegnato al tag label in HTML. In pratica, il risultato apparirà ad esempio così:
<form id="partecipante">
<label class="h2" form="partecipante">Nome</label>
<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 le informazioni</button>
</form>Progettate il sito web dei vostri desideri! Con MyWebsite Now di IONOS potete creare il vostro sito web professionale autonomamente, senza particolari conoscenze di base. Piuttosto, potete avvalervi dell’esperienza delle nostre sviluppatrici e dei nostri sviluppatori. Non dovrete far altro che scegliere la soluzione adatta alle vostre esigenze.
