Ogni input richiede un vero label
Colleghi label e campi affinché tocchi e letture funzionino.
Ogni input richiede un vero label è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Perché le etichette sono importanti
Un campo del modulo senza nome è una scatola misteriosa. Una vera etichetta dice a ogni utente, vedente o meno, esattamente cosa inserire. 🏷️
L'elemento label
L'elemento label è il modo integrato in HTML per assegnare un nome a un campo. Browser, lettori di schermo e aree di tocco lo comprendono automaticamente.
Collegare con for e id
Il collegamento più semplice consiste nell'usare for sull'etichetta, facendolo corrispondere all'id dell'input. Ora i due elementi sono ufficialmente associati.
<label for="email">Email</label>
<input id="email" type="email">Gli ID devono essere univoci
L'id a cui si punta deve essere univoco nella pagina. Due input con lo stesso id interrompono silenziosamente l'associazione.
Anche il raggruppamento funziona
Può anche includere l'input all'interno dell'etichetta. Non serve alcun id, perché l'annidamento rende chiaro il collegamento.
<label>Email
<input type="email">
</label>Un'area cliccabile più grande
Un'etichetta collegata offre agli utenti un'area cliccabile più grande. Toccando il testo si assegna il focus al campo o lo si seleziona, aiutando chi ha le mani poco ferme e chi usa schermi piccoli.
I lettori di schermo la leggono
Quando il focus raggiunge un input associato, il lettore di schermo pronuncia prima l'etichetta. Senza di essa, gli utenti sentono soltanto il tipo di campo.
title non basta
Un attributo title può essere visualizzato al passaggio del mouse, ma è inaffidabile sui dispositivi touch e con la tastiera. Non sostituisce una vera etichetta.
Anche le caselle hanno bisogno di etichette
Visivamente, caselle di controllo e pulsanti radio sembrano intuitivi, ma è un'etichetta a renderli attivabili al tocco e annunciabili. Non li lasci mai privi di etichetta.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Il visibile è meglio del nascosto
Mantenga le etichette visibili quando possibile. Gli utenti vedenti sottoposti a carico cognitivo ne traggono beneficio tanto quanto gli utenti di lettori di schermo.
Quando è necessario nasconderla
Se una casella di ricerca non ha spazio per il testo, nasconda l'etichetta con una classe visually-hidden, mai con display none, così continuerà a essere disponibile per le tecnologie assistive.
Verifica rapida
Come fa un'etichetta a sapere quale input identifica?
Riepilogo
Ogni input ha bisogno di una vera etichetta, collegata tramite for e id oppure includendo l'input al suo interno. Questa semplice abitudine rende i moduli attivabili al tocco, leggibili e chiari. ✅
Domande Frequenti
La lezione «Ogni input richiede un vero label» è gratuita?
Sì — il testo completo di «Ogni input richiede un vero label» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Ogni input richiede un vero label»?
Colleghi label e campi affinché tocchi e letture funzionino. Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Ogni input richiede un vero label»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Ogni input richiede un vero label
- Il placeholder non è un label
- Raggruppare i campi con fieldset e legend
- Testo di aiuto e campi obbligatori annunciati