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.
Come creare un form con campi accessibili
Di per sé, la struttura HTML di un form accessibile è semplice. I campi più comuni hanno solo 2 tag:
