Label e campi form

Associare label e input

Un form usable da tutti inizia da etichette chiare. Ogni controllo (input, select, textarea) deve avere un nome accessibile: di solito una label visibile collegata con for sull’id dell’input, oppure l’input annidato dentro <label>. Senza associazione, chi usa screen reader sente «campo di testo» senza sapere se chiedi email o codice fiscale.

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>

<label for="telefono">Telefono (opzionale)</label>
<input id="telefono" name="telefono" type="tel" autocomplete="tel">

Tipi di campo

Usa type appropriati: email, tel, url, number attivano tastiere e hint su mobile e validazione di base lato browser. Aggiungi autocomplete coerente (es. name, street-address) per autofill corretto. Per password usa autocomplete="current-password" o new-password nei form di registrazione.

Validazione accessibile

Quando un campo fallisce la validazione, non affidarti solo al colore rosso. Imposta aria-invalid="true" e collega il messaggio con aria-describedby puntando all’id del testo errore. Annuncia errori riassuntivi in cima al form con link ai campi, così chi usa tastiera non deve indovinare quale input correggere.

<label for="cap">CAP</label>
<input id="cap" name="cap" inputmode="numeric" pattern="[0-9]{5}"
  aria-describedby="cap-errore" aria-invalid="true">
<p id="cap-errore" role="alert">Inserisci 5 cifre.</p>

Fieldset e gruppi

Radio e checkbox correlati vanno in <fieldset> con <legend> che descrive il gruppo («Metodo di pagamento», «Giorno preferito»). Evita legend vuote o generiche «Opzioni».

Pattern comuni

Search box: label visibile «Cerca» o aria-label se design minimal. Checkbox accettazione privacy: label cliccabile include testo legale essenziale con link all’informativa. Date native input type="date" hanno supporto browser variabile: label chiara resta obbligatoria. Autocomplete disattivato su codici sconto va bene; su indirizzo spedizione no.

Multi-step form: indica progresso con testo («Passo 2 di 4») oltre a barra visiva, accessibile con aria-current="step".

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Label e campi form con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Label mancanti sostituite da placeholder o icone sole.
• Id duplicati che rompono l’associazione for/id.
• Click sulla label che non focusa l’input per id errato.
• Errori solo a colori senza testo né aria.
• Campi obbligatori senza indicazione visiva e programmatica (required o testo «obbligatorio»).

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

In breve

• Label visibile per ogni controllo.
• for + id o input dentro label.
• Placeholder ≠ label; errori con aria-describedby.
• Fieldset/legend per gruppi di scelta.