Etichette o istruzioni

Cosa richiede

Quando all’utente viene chiesto di inserire dati — un campo di testo, una casella di selezione, un pulsante radio, un elenco a discesa, un selettore di date, un selettore di file — deve essere presente un’etichetta o un’istruzione che indichi cosa è atteso. L’etichetta può essere testo visibile, un elemento <label>, un attributo aria-label o aria-labelledby; le istruzioni possono includere il formato richiesto, i valori consentiti o degli esempi.

I campi obbligatori, i formati attesi («GG/MM/AAAA») e i vincoli particolari («minimo 8 caratteri, maiuscole e minuscole miste») rientrano tutti in questo criterio di successo.

Come soddisfarlo

• Associare ogni <input>, <textarea> e <select> a un elemento <label for="…"> il cui attributo for corrisponda all’id dell’input.
• Non usare mai il solo testo segnaposto come etichetta — i segnaposto scompaiono al ricevimento del focus e hanno scarso contrasto.
• Indicare visivamente i campi obbligatori (asterisco, la parola «obbligatorio» o aria-required="true") e spiegare la convenzione adottata nella parte superiore del modulo.
• Specificare il formato atteso prima che l’utente commetta un errore, non dopo: «Data (GG/MM/AAAA)» o «Numero di telefono, es. 02-1234567».
• Per i gruppi di caselle di selezione o pulsanti radio, usare <fieldset> e <legend> per etichettare il gruppo.
• Per gli input con sola icona o le barre di filtro, usare aria-label per assegnare un nome significativo.

Errori comuni

• Moduli in cui il testo segnaposto è l’unica etichetta e scompare nel momento in cui l’utente inizia a digitare.
• Campi obbligatori contrassegnati solo da asterischi rossi senza associazione programmatica.
• Campi per la data di nascita che richiedono un formato specifico e lo comunicano all’utente solo dopo il fallimento della validazione.
• Campi di ricerca con un’icona a lente d’ingrandimento privi di nome accessibile.
• Moduli di accesso in cui i campi nome utente e password sono posizionati visivamente accanto alle etichette ma senza associazione programmatica.

Perché è importante

I moduli sono il luogo in cui la maggior parte degli utenti interagisce con un sito web — registrazione, acquisto, contatto, assistenza, prenotazione. I moduli privi di etichetta o con etichettatura insufficiente escludono completamente gli utenti di screen reader, che non riescono a capire quale dato ciascun campo stia richiedendo. Escludono anche gli utenti con dislessia, che perdono il contesto nel momento in cui un segnaposto scompare, e gli utenti con disabilità cognitive, che traggono beneficio dalle istruzioni sul formato fornite in anticipo.

Le etichette sono inoltre elementi portanti per i gestori di password, il completamento automatico e il software di controllo vocale, che usano il testo delle etichette per abbinare i campi. Un modulo ben etichettato è un vantaggio per tutti.