Criterio WCAG 3.3.2 · Livello A CRITICO
Campi del modulo senza etichetta
Un campo senza etichetta associata è un campo indovinello: chi usa uno screen reader non sa cosa scriverci. E i moduli sono dove si acquista.
Cos'è
Ogni campo di un form deve avere un'etichetta associata a livello di codice, non solo visiva. Il caso più frequente è affidarsi al solo placeholder: sparisce appena si inizia a digitare e non è un'etichetta valida per la tecnologia assistiva.
Chi ne è penalizzato
Quando questo requisito non è rispettato, una parte reale dei tuoi visitatori non riesce a usare il sito:
- Chi usa uno screen reader e sente "campo di testo" senza sapere se è l'email, il nome o l'indirizzo.
- Chiunque, quando il placeholder sparisce mentre scrive e non ricorda più cosa andava in quel campo.
- Chi compila moduli lunghi come il checkout — cioè esattamente il punto in cui perdi la vendita.
- Criterio
- WCAG 2.1 — 3.3.2 Etichette o istruzioni
- Livello
- A
- Norma UE
- EN 301 549 §9.3.3.2
- Italia
- D.Lgs. 82/2022 (recepimento EAA)
Come appare l'errore
Qui il campo si appoggia al solo placeholder. Nessuna etichetta è associata: appena l'utente digita, l'indicazione sparisce.
<input type="email" placeholder="La tua email">Come si corregge
Aggiungi una <label> associata con l'attributo for, collegato all'id del campo.
<label for="email">La tua email</label>
<input id="email" type="email">Se il design richiede che l'etichetta non sia visibile, non eliminarla: nascondila visivamente ma tienila nel codice, così resta leggibile dallo screen reader.
Vuoi sapere se il tuo sito ha questo problema?
Scansiona il tuo sito gratis →Domande frequenti
Il placeholder non è già un'etichetta?
No. Il placeholder è un suggerimento che sparisce alla digitazione e ha spesso un contrasto troppo basso. Non sostituisce la label: serve un'etichetta vera associata al campo.
Come associo la label al campo?
Con l'attributo for della label uguale all'id del campo. In alternativa, racchiudendo il campo dentro la label. La sola vicinanza visiva non basta: il legame deve essere nel codice.
Posso nascondere l'etichetta per motivi di design?
Sì, ma nascondila solo visivamente (con una tecnica che la mantiene nel DOM), non con display:none. Deve restare disponibile per la tecnologia assistiva.