Il placeholder non è un label
Scopra perché i suggerimenti che scompaiono non sono accessibili agli utenti reali.
Il placeholder non è un label è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 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.
La scorciatoia allettante
È allettante inserire un testo suggerimento in un campo e fare a meno dell'etichetta. Ma un placeholder è un suggerimento, non un nome. ⚠️
Scompare
Nel momento in cui una persona inizia a digitare, il placeholder scompare. A quel punto non rimane nulla che indichi a cosa serviva il campo.
<input type="text" placeholder="Full name">Carico sulla memoria
Le persone con difficoltà di memoria o attenzione devono ricordare il suggerimento dopo che è scomparso. Un'etichetta persistente elimina questo carico.
Contrasto basso per impostazione predefinita
Il testo del placeholder è solitamente grigio chiaro e spesso non rispetta i requisiti di contrasto. Le persone ipovedenti potrebbero non riuscire a leggerlo affatto.
Sembra già compilato
Il testo grigio del suggerimento può sembrare un valore già compilato. Le persone saltano il campo e poi vengono sorprese da un errore che segnala che è obbligatorio.
Incoerente per gli screen reader
Il supporto degli screen reader per usare placeholder come nome è discontinuo e varia a seconda del browser. Non si può fare affidamento sul fatto che venga annunciato.
Usi entrambi, non uno solo
I placeholder vanno bene come suggerimenti aggiuntivi, ad esempio per mostrare un formato. Li abbini a una vera etichetta e non li usi mai da soli.
<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">Gli esempi di formato sono utili qui
Un placeholder è ottimo per un esempio di formato, come il modello di una data. L'etichetta continua a indicare il vero nome del campo.
Etichette fluttuanti
Le etichette fluttuanti scorrono verso l'alto quando si digita, mantenendo visibile il nome. Sono vere etichette, solo animate, quindi sono una soluzione valida.
Verifichi compilando il campo
Controllo rapido: digiti nel campo. Se non riesce più a capire cosa richiede, il placeholder stava svolgendo il lavoro di un'etichetta.
WCAG lo conferma
Il criterio Labels or Instructions delle WCAG richiede un nome chiaro e persistente. I campi che usano solo un placeholder non superano regolarmente le verifiche.
Controllo rapido
Perché un placeholder è un sostituto inadeguato di un'etichetta?
Riepilogo
Un placeholder è un suggerimento che scompare, non un nome. Mantenga una vera etichetta e usi i placeholder solo per fornire un aiuto aggiuntivo sul formato. 💡
Domande Frequenti
La lezione «Il placeholder non è un label» è gratuita?
Sì — il testo completo di «Il placeholder non è un 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 «Il placeholder non è un label»?
Scopra perché i suggerimenti che scompaiono non sono accessibili agli utenti reali. 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 2 di 4.
Quanto tempo richiede la lezione «Il placeholder non è un 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