Tutti hanno avuto a che fare almeno una volta con i moduli. In passato erano soprattutto cartacei. Oggi sono sempre più diffusi i moduli digitali, poiché servono all’interazione dell’utente con un sito web. Che si tratti di comunicare su Internet o di ordinare un articolo, li si trova ovunque. Anche la ricerca su Internet, ad esempio con Google, ne è interessata. La compilazione di questi moduli risulta complicata per le persone con disabilità fisiche o cognitive, nonché per i non vedenti e gli ipovedenti. Per consentire a tutti di partecipare alla vita pubblica, questi moduli devono essere progettati in modo da essere accessibili. Ma: come si creano effettivamente elementi di modulo accessibili?
Esistono diverse tecniche per farlo. Tuttavia, prima di approfondire le tecniche, è opportuno conoscere gli elementi del modulo. Questi, infatti, possono essere suddivisi in diverse tipologie. Tra le altre, esistono le seguenti tipologie
- campi di immissione su una sola riga
- campi di immissione su più righe
- Elenchi di selezione
- Pulsanti di opzione
- Caselle di selezione
- Pulsanti per inviare/annullare
Etichettatura dei campi dei moduli
Per garantire l'accessibilità nei moduli, è necessario assegnare un'etichetta ai vari controlli. Queste etichette consentono alle tecnologie assistive di riconoscere le funzioni dei controlli e di comunicarle all'utente. È importante che le etichette siano chiaramente associate ai controlli, poiché altrimenti gli screen reader non sono in grado di stabilire una connessione con gli elementi. Di conseguenza, gli utenti hanno difficoltà a comprendere il modulo. Non riescono a capire quali informazioni debbano essere inserite in quali campi. Ciò impedisce loro di compilare correttamente il modulo e spesso commettono errori. Tuttavia, le descrizioni non sono tutte etichettate allo stesso modo. È fondamentale stabilire se debbano essere visibili a tutti o meno. Nel linguaggio di programmazione HTML si distingue quindi tra l’elemento `label` e gli attributi `aria`. L’elemento label viene utilizzato per campi di immissione, elenchi a discesa, pulsanti di opzione e caselle di controllo e deve essere posizionato in modo appropriato. Nei campi di immissione e negli elenchi a discesa, l’etichetta si trova prima degli elementi di controllo. Nei pulsanti di opzione e nelle caselle di controllo, invece, viene posizionata dopo l’elemento di controllo. Affinché le etichette possano essere collegate all’elemento corrispondente, è necessario aggiungere l’attributo for.
L'attributo `aria` viene utilizzato in HTML per i pulsanti. I pulsanti possono, ad esempio, rappresentare le opzioni "Invia" o "Annulla" in un modulo. Grazie agli attributi `aria`, le descrizioni dei rispettivi elementi diventano riconoscibili solo dalle tecnologie assistive. Possono quindi essere utilizzati anche per i campi di immissione che devono essere visibili solo allo screen reader. Esistono numerosi attributi aria utilizzati per migliorare l’accessibilità sul web. Questi, tuttavia, differiscono per tipologia e funzione. Per l’etichettatura di un elemento si utilizza il cosiddetto attributo aria-label. Naturalmente è anche possibile utilizzare la stessa etichetta per più elementi; ciò è reso possibile dall’attributo aria-labelledby.
Campi di immissione a riga singola e a più righe
I campi di immissione sono tra gli elementi più utilizzati nei moduli. Possono essere a riga singola o a più righe. I campi a riga singola vengono utilizzati per richieste brevi, ad esempio per il nome di una persona, un indirizzo e-mail, una via o una località.
Vengono creati in HTML utilizzando il tag `input` e l'attributo `type`.
Inoltre, è possibile aggiungere altri attributi che, ad esempio, definiscono la lunghezza della riga.
I campi multiriga vengono solitamente utilizzati per aree di testo più estese, come i messaggi di testo. Questi vengono creati tramite il tag `textarea`. Anche in questo caso, lo sviluppatore può specificare il numero di righe e la lunghezza di ciascuna riga. Tuttavia, affinché questi campi siano accessibili senza barriere, è necessario aggiungere il tag `label`. Non è tuttavia possibile stabilire una connessione tra l’elemento `label` e gli elementi di input se questi non sono associati in modo univoco. È quindi necessario collegarli tra loro tramite gli attributi `for` e `id`. Nell’esempio HTML riportato di seguito vengono implementate semplici etichette in tali campi di immissione.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
Qui viene innanzitutto creato un campo di immissione di una riga per il nome, di tipo “text”. L’etichetta “Il tuo nome:” viene resa visibile a tutti tramite l’elemento label. Questo si trova prima dell’elemento input, poiché viene visualizzato prima del campo di immissione. Questi elementi vengono collegati tra loro tramite l’attributo for nel tag label e l’attributo id nell’elemento input. È importante che entrambi i contenuti siano identici, altrimenti non è possibile collegarli. L’attributo name funge da identificatore per questo campo ed è necessario per il trasferimento dei dati al lato server.
Successivamente, con il tag “textarea” viene creato un campo di immissione multilinea. Qui compare quindi, tramite l’elemento label, l’etichetta “Il tuo messaggio:”. Anche in questo caso, i due campi con lo stesso contenuto testuale vengono collegati tra loro tramite gli attributi for e id.
Note generali
In generale, i moduli dovrebbero essere chiari e inequivocabili. Anche la prevedibilità è molto utile: in questo modo gli utenti possono capire rapidamente cosa viene loro richiesto. È inoltre molto importante che la struttura sia chiara e logica. Gli elementi di contenuto correlati possono essere raggruppati, mentre le unità logicamente distinte possono essere separate anche visivamente. Ciò facilita l’orientamento. Inoltre, è possibile distinguerli tra loro tramite colori diversi. È importante rispettare il contrasto minimo di 4,5:1.
Usabilità della tastiera
Una delle caratteristiche più importanti per la progettazione accessibile dei campi dei moduli è la possibilità di utilizzarli tramite la tastiera. Ci sono persone che, a causa della loro disabilità, non sono in grado di utilizzare il mouse. È quindi ancora più importante progettare i moduli in modo che sia possibile navigarli anche con la tastiera. L’uso degli elementi `label` e degli attributi `aria` facilita la comprensione e l’utilizzo dei moduli. Un’altra possibilità per semplificare l’utilizzo tramite tastiera è l’uso delle scorciatoie da tastiera. In questo modo è possibile associare combinazioni di tasti agli elementi del modulo. Ciò può aiutare a raggiungere più rapidamente determinate aree o a utilizzare più velocemente determinate funzioni. A tal fine si utilizza l’attributo `accesskey` in HTML. Questo attributo viene inserito nell’elemento a cui si desidera applicarlo. Qui si assegna semplicemente il tasto che verrà poi utilizzato per la scorciatoia da tastiera. Se, ad esempio, si assegna il tasto «n» a un campo o a un pulsante, in Windows sarà possibile utilizzarlo con la scorciatoia da tastiera (Alt + n).
È tuttavia necessario assicurarsi che questa scorciatoia da tastiera non sia già utilizzata per un altro comando nel browser.
Riduzione al minimo
Allo stesso modo, è consigliabile ridurre il tutto all’essenziale per non gravare inutilmente sulle persone con disabilità. Si dovrebbero quindi richiedere solo i dati strettamente necessari. Si dovrebbe evitare di richiedere dati già disponibili. Inoltre, la visibilità dei campi del modulo può essere adattata alla situazione. I campi di inserimento facoltativi o quelli soggetti a determinate condizioni non devono necessariamente essere visibili; possono essere visualizzati solo quando necessario. Ad esempio, non ha senso richiedere l’età dei figli se in precedenza è stato selezionato che non se ne hanno.
Guida e messaggi di errore
Inoltre, dovrebbe essere fornita una guida all’inserimento dei dati. Ciò può avvenire sotto forma di finestra di dialogo o di tooltip. Con il loro aiuto è possibile spiegare più dettagliatamente come inserire i dati. Un’altra possibilità sarebbe inserire un link a una pagina di aiuto dedicata. Ciò aumenterebbe enormemente la percentuale di successo. Gli errori, tuttavia, capitano comunque. In questi casi è importante che i messaggi di errore siano chiari e pertinenti. Se, ad esempio, durante il login viene inserita una password errata, non dovrebbe comparire il messaggio «Nome utente o password errati». È preferibile specificare l’errore in modo preciso. In questo caso, sarebbe corretto: «La password inserita non è corretta. Si prega di inserire la password corretta».
Esistono diversi tipi di errori. Innanzitutto, l'errore di formato. In questo caso, la password viene inserita in un formato errato. Ad esempio, vengono inserite lettere al posto dei numeri. Possono verificarsi anche errori di valore. Ciò può accadere quando, nonostante il formato sia corretto, viene inserito un valore errato. Un esempio potrebbe essere l’inserimento del valore 34 come giorno della data. Il messaggio di errore potrebbe essere, ad esempio: «Il mese di marzo ha 31 giorni. Si prega di reinserire il giorno».
Un altro tipo di errore è rappresentato dagli inserimenti non validi. In questo caso, lo sviluppatore specifica valori che non sono validi. Infine, esiste anche il caso in cui non venga inserito alcun dato nei campi obbligatori. Ciò accade, ad esempio, quando il campo relativo all’indirizzo e-mail è obbligatorio e l’utente dimentica di inserirlo. Spesso, però, ciò si verifica anche con le condizioni generali di contratto. Su molti siti web non è possibile proseguire senza aver accettato tale dichiarazione.
Campi obbligatori
I moduli contengono spesso campi obbligatori. Questi devono essere contrassegnati come tali. Un simbolo comunemente utilizzato per indicare un campo obbligatorio è un “*”, che viene visualizzato accanto al campo del modulo. In questo caso, tuttavia, già all’inizio del modulo dovrebbe essere specificato che i campi contrassegnati con un asterisco sono obbligatori. Un’altra possibilità consiste nel visualizzare questi campi obbligatori con un colore o una sfumatura diversi. Tuttavia, questa soluzione non è accessibile a tutti. Affinché anche gli utenti di screen reader possano riconoscerli, è opportuno utilizzare inoltre l’attributo «required» o «aria-required». In questo modo si comunica allo screen reader che si tratta di un campo obbligatorio.
Segno di sostituzione
Un modo per rendere i moduli ancora più chiari e intuitivi consiste nell’utilizzare i segnaposto nei campi dei moduli. I segnaposto sono testi temporanei visualizzati all’interno di un campo del modulo per indicare all’utente quale tipo di informazione deve essere inserita. Questi testi scompaiono non appena si clicca sul campo del modulo o lo si seleziona, e possono essere sostituiti dal contenuto effettivo del campo stesso. I segnaposto possono essere facilmente inseriti nell’elemento HTML di input di un campo del modulo utilizzando l’attributo placeholder.
Salva le impostazioni
Tutti gli utenti dovrebbero avere la possibilità di salvare i dati inseriti. Nei moduli più lunghi si verificano spesso dei problemi. Per evitare la perdita di dati, è possibile salvarli. A tal fine è possibile implementare un pulsante che salvi lo stato attuale. Ciò facilita la compilazione di moduli complessi. Ciò presenta anche il vantaggio di poter integrare in un secondo momento i dati mancanti. Infatti, dover reinserire tali dati porta alcuni utenti ad abbandonare la compilazione del modulo. Ciò può risultare fastidioso sia per il gestore di un sito web che per l’utente.
Autenticazione e limite di tempo
L’autenticazione aumenta la sicurezza su Internet. Tuttavia, rappresenta anche una delle barriere che si presentano ripetutamente. Queste si riscontrano spesso sui siti web in cui è richiesto un login. Affinché tali siti siano accessibili a tutti, i moduli devono essere progettati in modo da essere privi di barriere. Infatti, in molti casi le procedure di autenticazione hanno un limite di tempo. Si ha quindi pochissimo tempo per effettuare l’accesso. Spesso si tratta solo di 30 o 60 secondi. Per molte persone con disabilità, questo tempo non è sufficiente per effettuare l’accesso. È quindi importante non limitare la compilazione del modulo a un limite di tempo.
Un altro problema è rappresentato dai captcha. Servono a identificare l’utente come persona e non come computer. In questo caso, all’utente viene chiesto di identificare un’immagine distorta e di inserire il risultato in un campo del modulo. Spesso, però, è necessario cliccare su tutte le immagini in cui è visibile, ad esempio, un’auto. Queste, tuttavia, non sono sempre accessibili. Le persone non vedenti o ipovedenti non sono in grado di riconoscere queste immagini. Per aggirare questa barriera, dovrebbe essere offerta un’opzione audio.
In sintesi, si può affermare che la progettazione senza barriere dei campi dei moduli rappresenta un passo importante verso un ambiente digitale accessibile. L'uso di etichette corrette, una struttura chiara e ben organizzata, la possibilità di utilizzare la tastiera e messaggi di errore appropriati aumentano la probabilità che anche le persone con disabilità possano compilare i moduli in modo autonomo.
