Come si rendono accessibili gli elementi di un modulo?

Tutti, prima o poi, si sono trovati a dover compilare moduli. In passato, si trattava perlopiù di moduli cartacei. Oggi, invece, i moduli digitali sono sempre più diffusi, perché facilitano l'interazione dell'utente con un sito web. Che si tratti di comunicare online o di ordinare un prodotto, i moduli sono ovunque. Anche le ricerche su Internet, ad esempio con Google, ne risentono. Compilare questi moduli è più difficile per le persone con disabilità fisiche o cognitive, così come 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 a tutti. Ma come si creano concretamente elementi di modulo accessibili?

Esistono diverse tecniche per questo scopo. Tuttavia, prima di occuparci delle tecniche, è opportuno conoscere gli elementi della forma. Questi possono essere suddivisi in diverse tipologie. Tra le altre, ci sono le seguenti tipologie

• campi di input a riga singola

• aree di input multilinea

• Elenchi di selezione

• Pulsanti radio

• caselle di controllo

• Pulsanti Invia/Annulla

Etichettatura dei campi del modulo

Per garantire l'accessibilità nei moduli, i vari controlli devono essere etichettati. 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, altrimenti gli screen reader non saranno in grado di collegarsi agli elementi. Di conseguenza, gli utenti avranno difficoltà a comprendere il modulo. Non riusciranno a identificare quali informazioni devono essere inserite in quali campi. Di conseguenza, non saranno in grado di compilare il modulo correttamente e spesso commetteranno errori. Tuttavia, le descrizioni non sono tutte etichettate allo stesso modo. Il fattore determinante è se debbano essere visibili a tutti o meno. Nel linguaggio di programmazione HTML, si distingue quindi tra l'elemento label e l'attributo ARIA. L'elemento label viene utilizzato per i campi di input, le liste di selezione, i pulsanti di opzione e le caselle di controllo e deve essere posizionato di conseguenza. Per i campi di input e le liste di selezione, l'etichetta viene posizionata prima dei controlli. Per i pulsanti di opzione e le caselle di controllo, invece, viene posizionata dopo l'elemento di controllo. L'attributo ARIA deve essere aggiunto in modo che le etichette possano essere collegate anche all'elemento corrispondente.

L'attributo aria viene utilizzato in HTML per i pulsanti. I pulsanti possono rappresentare, ad esempio, l'invio o l'annullamento di un modulo. Gli attributi aria rendono le descrizioni dei rispettivi elementi riconoscibili solo dalle tecnologie assistive. Pertanto, possono essere utilizzati anche per i campi di input che dovrebbero essere visibili solo allo screen reader. Esistono molti attributi aria utilizzati per migliorare l'accessibilità web. Tuttavia, questi differiscono per tipo e funzione. Il cosiddetto aria-label viene utilizzato per etichettare un elemento. Naturalmente, è anche possibile utilizzare la stessa etichetta per più elementi. Ciò è reso possibile da aria-labelledby.

Campi di input a riga singola e a più righe

I campi di input 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, come il nome di una persona, un indirizzo email, un indirizzo stradale o una città.

Vengono creati in HTML con il tag input e l'attributo type.

Inoltre, è possibile aggiungere altri attributi che definiscono, ad esempio, la lunghezza della riga.

I campi multilinea vengono generalmente utilizzati per aree di testo più ampie, come i messaggi di testo. Questi vengono creati con 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, è comunque necessario aggiungere il tag `<label>`. Non è possibile creare un collegamento tra l'etichetta e gli elementi se questi non sono identificati in modo univoco. Devono quindi essere collegati tramite l'attributo `for` e l'attributo `id`. Nell'esempio HTML seguente, vengono implementate delle semplici etichette in tali campi di input.

<label for="vorname">Ihr Vorname: </label>

<tipo di input“text“ name=“vorname“ id=“vorname“ />

<br />

<label for="message">Il tuo messaggio:</label>

<textarea name="message" id="message"> </textarea>

Qui, viene creato innanzitutto un campo di input a riga singola per il nome, di tipo "testo". L'etichetta "Il tuo nome:" è resa visibile a tutti dall'elemento label. Quest'ultimo è posizionato prima dell'elemento input, poiché viene visualizzato prima del campo di input. L'attributo for nel tag label e l'attributo id nell'elemento input collegano queste aree. È importante che entrambi i contenuti siano identici, altrimenti non possono essere collegati. L'attributo name funge da identificatore per questo campo ed è necessario per trasferire i dati a una pagina server.

Successivamente, viene creata un'area di input multilinea con il tag "textarea". L'etichetta "Il tuo messaggio:" appare quindi in quest'area tramite l'elemento label. Anche in questo caso, le due aree con lo stesso contenuto testuale sono collegate tramite gli attributi for e id.

Note generali

In generale, i moduli devono essere chiari e inequivocabili. Anche la prevedibilità è molto utile, perché permette agli utenti di capire rapidamente cosa ci si aspetta da loro. Una struttura chiara e logica è altrettanto importante. Gli elementi di contenuto correlati possono essere raggruppati. Le unità logicamente separate possono essere ulteriormente distinte visivamente, facilitando l'orientamento. Inoltre, è possibile differenziarle l'una dall'altra tramite colori diversi. È fondamentale mantenere un contrasto minimo di 4,5:1.

Funzionamento della tastiera

Una delle caratteristiche più importanti per la progettazione accessibile dei campi dei moduli è la possibilità di utilizzarli tramite tastiera. Alcune persone, a causa di una disabilità, non sono in grado di usare il mouse. È quindi fondamentale progettare i moduli in modo che possano essere utilizzati anche tramite tastiera. L'uso di elementi <label> e attributi <aria> semplifica la comprensione e l'utilizzo dei moduli. Un altro modo per semplificare l'utilizzo tramite tastiera è l'impiego di scorciatoie da tastiera. In questo modo, agli elementi del modulo possono essere associate delle scorciatoie. Ciò consente di raggiungere più rapidamente determinate aree o di eseguire funzioni in modo più veloce. A tale scopo si utilizza l'attributo <accesskey> in HTML. Questo attributo viene inserito nell'elemento a cui si desidera associarlo. Viene semplicemente assegnato il tasto, che verrà poi utilizzato per il comando da tastiera. Ad esempio, se si assegna il tasto "n" a un campo o a un pulsante, in Windows sarà possibile azionarlo con la scorciatoia da tastiera (Alt + n).

Assicurati però 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à. Pertanto, dovrebbero essere richiesti solo i dati assolutamente necessari. La richiesta di dati già esistenti dovrebbe essere evitata. Inoltre, la visibilità dei campi del modulo può essere adattata alla situazione. I campi di input facoltativi o quelli collegati a determinate condizioni non devono necessariamente essere visibili. Possono essere visualizzati solo quando necessario. Ad esempio, la richiesta dell'età dei bambini non ha senso se in precedenza è stata selezionata l'opzione "nessun bambino presente".

Messaggi di aiuto e di errore

Inoltre, dovrebbe essere offerto un aiuto per l'inserimento dei dati. Questo può essere fornito sotto forma di finestra di dialogo o di tooltip. Grazie a questo aiuto, l'inserimento dei dati può essere spiegato in modo più dettagliato. Un'altra possibilità sarebbe quella di inserire un link a una pagina di aiuto dedicata. Ciò aumenterebbe enormemente il tasso di successo. Gli errori, tuttavia, possono sempre capitare. Pertanto, è fondamentale che i messaggi di errore siano significativi. Ad esempio, se la password è stata inserita in modo errato durante l'accesso, non dovrebbe comparire il messaggio "Nome utente o password errati". È preferibile filtrare l'errore. Il messaggio corretto sarebbe: "La password inserita non è corretta. Inserisci 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 anziché numeri. Possono verificarsi anche errori di valore. Ciò può accadere quando viene inserito un valore errato nonostante il formato sia valido. Un esempio potrebbe essere l'inserimento del valore 34 come Tag per la data. Il messaggio visualizzato sarebbe, ad esempio: "Il mese di marzo ha 31 giorni. Si prega di inserire nuovamente il Tag".

Un altro tipo di errore è quello relativo a input non validi. In questo caso, lo sviluppatore specifica valori non corretti. Infine, c'è l'errore che si verifica quando non viene inserito alcun dato nei campi obbligatori. Questo accade, ad esempio, se l'indirizzo email è un campo obbligatorio e ci si dimentica di inserirlo. Spesso questo problema si verifica anche con i termini e le condizioni generali. Su molti siti web, non sarà possibile procedere senza aver accettato tali condizioni.

Campi obbligatori

I moduli spesso contengono campi obbligatori. Questi devono essere contrassegnati come tali. Un simbolo comunemente usato per indicare un campo obbligatorio è un asterisco (*) visualizzato accanto al campo del modulo. In questo caso, tuttavia, è opportuno specificare fin dall'inizio del modulo che i campi contrassegnati da un asterisco sono obbligatori. Un'altra opzione è quella di visualizzare questi campi obbligatori con un colore o una sfumatura diversi. Tuttavia, queste opzioni non sono accessibili a tutti. Affinché anche gli utenti di screen reader possano riconoscerli, è consigliabile utilizzare l'attributo `required` o `aria-required`. Questo indica allo screen reader che si tratta di un campo obbligatorio.

Titolare

Un modo per rendere i moduli ancora più comprensibili e facili da usare è quello di utilizzare i segnaposto nei campi del modulo. I segnaposto sono testi temporanei che compaiono all'interno di un campo del modulo per indicare all'utente quale tipo di informazione deve essere inserita. Questi testi scompaiono non appena si fa clic sul campo del modulo o si seleziona il cursore, e possono essere sostituiti con il contenuto effettivo del campo. I segnaposto possono essere facilmente inseriti nell'elemento HTML input di un campo del modulo utilizzando l'attributo placeholder.

Salva input

Tutti gli utenti dovrebbero avere la possibilità di salvare i propri dati. I moduli lunghi spesso presentano problemi. Per evitare la perdita di dati, è possibile salvare le informazioni inserite. A tale scopo, si può implementare un pulsante che salvi lo stato corrente. Questo semplifica la compilazione di moduli complessi e offre il vantaggio di poter completare i dati mancanti in un secondo momento. Ripetere gli stessi dati, infatti, può indurre alcuni utenti ad abbandonare il modulo, risultando fastidioso sia per il gestore del 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 continuano a presentarsi. Queste si manifestano spesso sui siti web che richiedono un login. Affinché questi siti siano accessibili a tutti, i moduli di accesso devono essere progettati in modo da essere privi di barriere. Questo perché, in molti casi, le procedure di autenticazione sono a tempo limitato. Gli utenti hanno quindi pochissimo tempo per effettuare il login, spesso solo 30 o 60 secondi. Per molte persone con disabilità, questo non è sufficiente. Pertanto, è importante non limitare l'accesso con un limite di tempo.

I captcha presentano un altro problema. Vengono utilizzati per identificare l'utente come essere umano e non come computer. In questo caso, all'utente viene chiesto di identificare un'immagine distorta e di inserire il risultato in un campo di un modulo. Spesso, tuttavia, è necessario cliccare su tutte le immagini, ad esempio quelle che mostrano un'automobile. Questi sistemi, però, non sono sempre accessibili a tutti. Le persone non vedenti o ipovedenti non riescono a riconoscere queste immagini. Per superare questo ostacolo, sarebbe opportuno offrire un'opzione audio.

In sintesi, la progettazione accessibile dei campi dei moduli è un passo importante verso un ambiente digitale accessibile. L'utilizzo di designazioni corrette, un layout chiaro e strutturato, nonché la possibilità di utilizzare la tastiera e i relativi messaggi di errore aumentano la probabilità che anche le persone con disabilità siano in grado di compilare i moduli in autonomia.