Terzo appuntamento della rubrica “Web e Accessibilità: come rendere un sito accessibile in 5 semplici passi”. Una nuova rubrica interamente dedicata all’accessibilità dei siti web e alla loro progettazione (clicca qui per leggere l’articolo di introduzione).
Rendere un sito accessibile è infatti semplice e conveniente, per questo motivo abbiamo pensato di approfondire alcuni degli aspetti più importanti per progettare un sito web accessibile a tutti.
Lo scorso mese abbiamo parlato dei colori e del contrasto approfondendo i vantaggi e l’uso corretto per garantire un sito web accessibile (se te lo sei perso puoi leggerlo cliccando qui).
Nell’articolo di oggi affrontiamo invece un altro aspetto che viene spesso ignorato, ma di fondamentale importanza nella progettazione di un sito web accessibile: form e moduli
I form e i moduli vengono utilizzati molto spesso all’interno dei siti web perché permettono di raccogliere una serie di dati sull’utente o di compiere operazioni come ad esempio prenotare una camera d’albergo o effettuare un semplice acquisto. In particolare in questi esempi ci si riferisce ad aziende che offrono servizi di prenotazione online e vendite di prodotti (i cosiddetti e-commerce) e che investono ingenti risorse per migliorare, ottimizzare e rendere più visibili i moduli contatto al fine di aumentare le conversioni e ricevere più richieste da parte degli utenti che visitano il sito web. Rendere i moduli di contatto e i form accessibili significa permettere a più utenti, ovvero anche alle persone con disabilità, di poter inviare i propri dati, fare un acquisto o prenotare una vacanza online. In altre parole è un modo più semplice e meno dispendioso per aumentare le conversioni degli utenti e allo stesso tempo facilita la navigazione sul sito web per le persone con disabilità.
L’importanza di form e moduli accessibili
Un sito web accessibile deve necessariamente garantire a tutti gli utenti di poter essere in grado di compilare tutti i campi dei moduli presenti all’interno di una pagina web. Quando si realizza un form o un modulo è opportuno innanzitutto inserire un titolo chiaro che permetta all’utente di comprendere immediatamente che tipo di modulo si sta compilando.
Per questo motivo è molto importante verificare che tutti i form e moduli siano inseriti correttamente e limitare al minimo possibili errori di compilazione. Inserire anche una breve spiegazione introduttiva per fornire altre informazioni o semplicemente chiarire il motivo della richiesta di dati rappresenta una soluzione gradita dagli utenti.
L’utente deve cogliere immediatamente ciò che viene richiesto. Progettare un form in cui l’utente non coglie l’utilità dei dati richiesti è uno degli errori più comuni. Lo scopo è quello di rendere il processo il più semplice possibile per far sentire l’utente a proprio agio: un form costruito male infatti può indurre l’utente all’abbandono.
Un form ben progettato prevede un raggruppamento coerente dei campi da dover compilare. Mescolare i vari campi e dati contribuisce solamente a creare confusione per l’utente. Un form chiaro e strutturato è il primo passo per una buona accessibilità.
Anche la lunghezza del form dev’essere progettata in maniera tale da non risultare estremamente difficoltoso. Come principio generale, se il form risulta eccessivamente lungo bisognerà considerare la possibilità di suddividerlo in sezioni (ricorrendo al cosidetto splitting). In questo caso si dovrà tener conto di inserire una paginazione oppure un’indicazione che informi l’utente degli step da percorrere. Questo consente all’utente di capire esattamente a che punto della compilazione si trova evitando così di perdersi all’interno della navigazione.
Ma quali sono i principi che devono essere adottati per la realizzazione dei form?
Di seguito presentiamo alcuni principi generali da tenere a mente nella realizzazione di form accessibili:
1) Nei campi di testo assicurarsi che la lunghezza dei campi contenga lo spazio necessario all’inserimento della risposta dell’utente. Se infatti lo spazio disponibile è troppo corto l’utente per poter controllare ciò che ha scritto sarà costretto a ricorrere allo scorrimento del testo. Si tratta di piccoli accorgimenti che saranno molto apprezzati dall’utente finale, soprattutto se presenta difficoltà visive.
2) Il testo di ogni campo di un form dovrebbe apparire prima del campo relativo.
3) Nei form con opzioni di scelta il testo dovrebbe apparire subito dopo il campo stesso.
4) Se le opzioni di scelta sono suddivise in gruppi distinti, inserire il titolo dei vari gruppi prima del gruppo stesso.
Scegli la destinazione: Mare Montagna
5) Nelle aree di inserimento testo inserire già un breve testo esplicativo
6) Se nei form vengono utilizzate delle immagini per indicare una scelta o anche semplicemente come “call to action” bisogna assicurarsi che contengano il testo alternativo così da essere leggibili dagli screen reader.
Per esempio nell’immagine seguente il codice dovrebbe contenere la dicitura alt=”ricerca”.
Se vuoi approfondire l’uso del testo alternativo puoi leggere l’articolo dedicato cliccando qui.
7) Evitare di utilizzare i frame. La composizione a mosaico di una pagina crea disorientamento per le persone non vedenti: si perde infatti la percezione di quale finestra sia attiva in un determinato momento.
8) Per gli avvisi di compilazione errata o incompleta utilizzare dei campi testuali ben visibili, evitando le “classiche” diciture di errore in colore rosso che molto spesso non sono percepite da persone con problemi di daltonismo.
Conclusioni
Quando si progetta un sito web accessibile sono molti gli ostacoli che un utente con disabilità può incontrare: tra i più diffusi ci sono proprio i form e i moduli, usati da molti siti web. Abbiamo analizzato gli elementi che costituiscono un form, concentrandoci sul loro corretto utilizzo e in generale abbiamo presentato alcuni “buoni” principi da tenere a mente quando si progettano form e moduli per renderli accessibili a tutti gli utenti.
Infine come premesso anche all’inizio dell’articolo abbiamo ragionato su come per le aziende che si occupano di vendite di prodotti, servizi o prenotazioni online l’accessibilità dei moduli e dei form rappresenta uno dei modi per aumentare la probabilità di conversione dell’utente, ma con un investimento minore rispetto alle tecniche tradizionali.
Ci auguriamo che questo articolo della rubrica che abbiamo condiviso con te oggi ti sia piaciuto.
Ti aspettiamo con la prossima uscita della rubrica! Continua a seguirci 😉
Il tuo sito web è accessibile a tutti? Scoprilo con l’accessibility check-up di Yeah! (inserire link)