Come funziona un campo input (form field)?
Di per sé, la struttura HTML di un form accessibile è semplice. I campi più comuni hanno solo 2 tag:
- <label> Per dire a cosa si riferisce il campo;
- <input> Il campo vero e proprio. Il campo deve avere un ID e anche un attributo “type” per indicare il tipo del campo.
Qual è il modo più comune?
Spesso vedo usare la label solo per introdurre il campo sottostante. Altre volte, per ragioni semplicemente estetiche, la label manca completamente, ed è sostituita da un placeholder.
Label VS Placeholder: perché si dovrebbe preferire la Label?
I vantaggi di usare la Label nel modo corretto sono:
- Sempre visibile, mentre il placeholder viene nascosto cliccando o scrivendo sul form field. Questo è ottimo per avere sempre un riferimento di quello che si sta facendo;
- Inoltre si può associare all’input, creando un’area cliccabile più ampia. Questo è ottimo per mobile, per chi è di fretta e per persone con qualche tipo di difficoltà.
Come fare per associare Label e Input?
Nella label, basta assegnare l’attributo “for” con lo stesso nome dell’ID dell’Input. È una piccola integrazione che però migliora tanto l’accessibilità e la UX in generale. Perché allora non farlo?
In quali altri casi può tornare utile?
Sicuramente è utile per i campi Radio Button e Checkbox, sempre molto difficili da cliccare senza aggiungere questo dettaglio.
Ti interessa approfondire l’argomento form?
Questo post è ispirato al lavoro di Adam Silver, Interaction Designer che si occupa dei form sul sito Gov.uk. Se ti interessa approfondire i form, argomento tanto ampio quanto affascinante, sul sito di Adam Silver puoi trovare tanti pratici consigli sul miglioramento dell’esperienza d’uso dei form.