Accessibilità Web:
Come creare un form
Con campi accessibili

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 19

Data di pubblicazione: 2 Agosto 2022

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:

  1. <label> Per dire a cosa si riferisce il campo;
  2. <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.