Etichette dei moduli

Una casella di testo accanto alla parola «Email» non ha un'etichetta finché l'elemento label non le viene collegato; fino ad allora un lettore di schermo può dire soltanto «campo di modifica».

Ogni campo ha bisogno di un nome

Quando il focus arriva su un campo di un modulo, il lettore di schermo ne annuncia l'etichetta, il tipo e lo stato: «Email, campo di modifica, obbligatorio». L'etichetta viene da un elemento label collegato al campo. Ci sono due modi per collegarli. Dai all'input un id e alla label un for con lo stesso valore, oppure metti l'input dentro la label. In entrambi i casi, un clic sul testo dell'etichetta porta il focus nel campo, e così caselle di controllo e pulsanti di opzione piccoli diventano molto più facili da colpire.

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

<label>
  <input type="checkbox" name="news"> Send me the weekly menu
</label>

Il criterio di successo 3.3.2 Etichette o istruzioni delle WCAG 2.2, di livello A, chiede etichette o istruzioni ogni volta che un contenuto richiede un input dell'utente. Il criterio 1.3.1 Informazioni e correlazioni chiede che il legame tra etichetta e campo esista nel codice, non solo sullo schermo. Un paragrafo che si trova sopra un input gli è vicino solo a vista; niente dice alle tecnologie assistive che i due vanno insieme.

Il segnaposto non è un'etichetta

L'attributo placeholder mostra un testo grigio di suggerimento dentro un campo vuoto. Viene voglia di usarlo al posto dell'etichetta, e molti moduli di registrazione lo fanno. Il problema è che sparisce appena scrivi, quindi non puoi più controllare a che cosa serviva il campo, e di solito è così chiaro da non rispettare le regole sul contrasto dell'unità precedente. Usa un'etichetta visibile e, se vuoi, anche un placeholder con un valore di esempio.

Gruppi, scopo ed errori

Anche i pulsanti di opzione e le caselle di controllo collegate tra loro hanno bisogno di un'etichetta di gruppo. Racchiudili in un fieldset e metti la domanda nel suo legend: così il lettore di schermo dice «Size, gruppo» prima di «Small, pulsante di opzione, 1 di 3». Per i dati personali, l'attributo autocomplete dice al browser a che cosa serve un campo, con nomi presi dallo standard HTML come name, email, tel, new-password e one-time-code. Il criterio 1.3.5 Identificare lo scopo degli input, di livello AA, chiede proprio questo, perché permette ai browser di compilare i campi e ad alcuni strumenti di mostrare accanto icone familiari.

Quando qualcosa va storto, dillo a parole. Il criterio 3.3.1 Identificazione di errori chiede che un errore di inserimento venga individuato e descritto all'utente con un testo, non solo colorando di rosso il bordo. Le WCAG 2.2 hanno aggiunto anche il 3.3.7 Inserimento ridondante: le informazioni che una persona ha già inserito nello stesso processo vanno compilate di nuovo al suo posto o offerte da selezionare, invece di farle scrivere due volte. Infine il 3.3.8 Autenticazione accessibile (minimo), di livello AA, dice che un passaggio di accesso non deve dipendere dal ricordare o dal ricopiare qualcosa, a meno che non ci sia un aiuto; lasciare che i gestori di password compilino il campo e permettere di incollare valgono entrambi come aiuto.

Di' che cosa serve prima che si cominci

Le istruzioni vanno prima dei campi a cui si riferiscono, non in un messaggio di errore dopo che qualcuno ha sbagliato. Se una password deve avere almeno 15 caratteri, scrivilo accanto all'etichetta. Segna i campi obbligatori nel testo dell'etichetta, per esempio con la parola «obbligatorio», e aggiungi l'attributo required perché anche il browser lo annunci. Quando compare un messaggio di errore, tienilo accanto al suo campo e collega i due con aria-describedby, che punta all'id del messaggio: il lettore di schermo leggerà il messaggio quando il campo riceve il focus. Infine sposta il focus sul primo campo con un problema, o su un riepilogo degli errori in cima, così chi usa la tastiera non resta in fondo a un modulo lungo a chiedersi che cosa sia successo.