Tutti hanno avuto a che fare con i moduli, prima o poi. In passato, più che altro su carta. Oggi sono sempre più moduli digitali, perché servono all'interazione dell'utente con un sito web. Che si tratti di comunicare su Internet o di ordinare un prodotto, li troviamo ovunque. Anche la ricerca su Internet, ad esempio con Google, ne risente. La compilazione di questi moduli è più difficile per le persone con disabilità fisiche o cognitive, nonché per i non vedenti e gli ipovedenti. Per consentire a tutte le persone di partecipare alla vita pubblica, questi moduli devono essere progettati per essere privi di barriere. Ma come si fa a creare elementi di modulo accessibili?
Esistono varie tecniche per farlo. Tuttavia, prima di affrontare le tecniche, è necessario conoscere gli elementi del modulo. Questi possono essere suddivisi in diversi tipi. Tra gli altri, vi sono i seguenti tipi
- Campi di immissione a riga singola
- aree di input multilinea
- Elenchi di selezione
- Pulsanti radio
- Caselle di controllo
- Pulsanti di invio/annullamento
Etichettatura dei campi del modulo
Per ottenere l'accessibilità dei 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 collegate ai controlli, altrimenti gli screen reader non saranno in grado di collegarsi agli elementi. Di conseguenza, gli utenti hanno difficoltà a comprendere il modulo. Non possono vedere quali informazioni devono essere inserite in quali campi. Di conseguenza, non possono compilare il modulo correttamente e spesso commettono errori. Tuttavia, le descrizioni non sono tutte etichettate allo stesso modo. Il fattore decisivo è se devono 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 i campi di input, gli elenchi di selezione, i pulsanti di opzione e le caselle di controllo e deve essere posizionato di conseguenza. Per i campi di input e gli elenchi di selezione, l'etichetta è posta davanti agli elementi di controllo. Per i pulsanti di opzione e le caselle di controllo, invece, viene posizionata dopo l'elemento di controllo. Affinché le etichette siano collegate all'elemento corrispondente, è necessario aggiungere l'attributo for.
L'attributo aria viene utilizzato nell'HTML per i pulsanti. I pulsanti possono, ad esempio, rappresentare l'invio o la cancellazione in un modulo. Attraverso gli attributi aria, le descrizioni dei rispettivi elementi diventano riconoscibili solo per le tecnologie assistive. Possono quindi essere utilizzati anche per i campi di input che devono essere visibili solo agli screen reader. Esistono molti attributi aria che vengono utilizzati per migliorare l'accessibilità su Internet. Tuttavia, essi differiscono per tipo e funzione. Il cosiddetto aria-label viene utilizzato per etichettare un elemento. Naturalmente, è possibile utilizzare la stessa etichetta per più elementi. Ciò è reso possibile da un'aria-labelledby.
Campi di input a una o più righe
I campi di input sono tra gli elementi più utilizzati nei moduli. Possono essere a una o più righe. I campi a una riga sono utilizzati per interrogazioni brevi, ad esempio per il nome di una persona, un indirizzo e-mail, una via o un luogo.
Vengono creati in HTML con l'attributo input-Tag e l'attributo type.
Inoltre, è possibile aggiungere altri attributi, ad esempio definire la lunghezza della linea.
I campi multilinea sono solitamente utilizzati per aree di testo più ampie, come i messaggi di testo. Questi vengono creati con la funzione textarea-Tag . Anche in questo caso, lo sviluppatore può specificare il numero di righe e la lunghezza della riga. Tuttavia, affinché questi campi siano accessibili senza barriere, è necessario aggiungere l'etichettaTag . Tuttavia, non è possibile stabilire un collegamento tra l'etichetta e gli elementi se questi non sono chiaramente assegnati. Questi devono quindi essere collegati tramite l'attributo for e l'attributo id. Nel seguente esempio HTML, sono state implementate delle semplici etichette in tali campi di input.
<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>
Innanzitutto, viene creato un campo di input a riga singola per il nome con il tipo "text". La didascalia "Il tuo nome:" è resa visibile a tutti dall'elemento label. Questo è posto davanti all'elemento input, poiché viene emesso prima del campo di input. L'attributo for dell'elemento labelTag e l'attributo id dell'elemento input collegano tra loro queste aree. È importante che i due contenuti siano identici, altrimenti non possono essere collegati. L'attributo name serve come identificatore di questo campo ed è necessario per trasferire i dati a una pagina del server.
Successivamente, viene creata un'area di input multilinea con l'elemento Tag "textarea". L'etichetta "Il tuo messaggio:" appare qui tramite l'elemento label. Anche in questo caso, le due aree con lo stesso contenuto testuale sono collegate tra loro tramite gli attributi for e id.
Note generali
In generale, i moduli devono essere chiari e non ambigui. Anche la prevedibilità è molto utile. In questo modo, gli utenti possono capire rapidamente cosa viene loro richiesto. Anche una struttura chiara e sensata è molto importante. Gli elementi di contenuto correlati possono essere raggruppati. Anche le unità logicamente separate possono essere separate visivamente. Questo facilita l'orientamento. Inoltre, possono essere distinte l'una dall'altra per mezzo del colore. È importante che sia mantenuto il contrasto minimo di 4,5:1.
Operatività della tastiera
Una delle caratteristiche più importanti per la progettazione accessibile dei campi dei moduli è l'operatività tramite tastiera. Ci sono persone che non possono usare il mouse a causa della loro disabilità. È quindi ancora più importante progettare i moduli in modo che possano essere navigati anche con la tastiera. L'uso degli elementi label e degli attributi aria rende i moduli più facili da capire e da utilizzare. Un altro modo per semplificare l'uso della tastiera è quello di utilizzare le scorciatoie da tastiera. In questo caso, gli elementi del modulo possono essere memorizzati con scorciatoie da tastiera. Ciò può aiutare a raggiungere più rapidamente determinate aree o a utilizzare più rapidamente le funzioni. A questo scopo si utilizza l'attributo accesskey in HTML. Questo attributo viene inserito nell'elemento per il quale deve essere utilizzato. Lì viene semplicemente assegnato il tasto che verrà poi utilizzato per il comando da tastiera. Se, ad esempio, il tasto "n" è assegnato a un campo o a un pulsante, in Windows può essere utilizzato con la scorciatoia da tastiera (Alt + n).
Tuttavia, occorre verificare che questa scorciatoia da tastiera non sia già utilizzata per un altro comando nel browser.
Riduzione al minimo
È inoltre consigliabile ridurre il tutto all'essenziale per non gravare inutilmente sulle persone con disabilità. Pertanto, dovrebbero essere richiesti solo i dati assolutamente necessari. Si dovrebbe rinunciare alla richiesta di dati già esistenti. Inoltre, la visibilità dei campi del modulo può essere adattata alla situazione. I campi di input facoltativi o quelli legati a condizioni non devono essere necessariamente visibili. Possono essere visualizzati quando sono necessari. Ad esempio, chiedere l'età dei bambini non ha senso se in precedenza è stato selezionato che non ci sono bambini.
Messaggi di aiuto e di errore
Inoltre, deve essere offerto un aiuto per l'input. Questo può assumere la forma di una finestra di dialogo o di un suggerimento dello strumento. Con il loro aiuto, l'input può essere spiegato in modo più dettagliato. Un'altra possibilità sarebbe quella di collegarsi a una pagina di aiuto separata. Questo aumenterebbe enormemente il tasso di successo. Gli errori si verificano comunque. È importante fornire messaggi di errore significativi. Ad esempio, se la password è stata inserita in modo errato al momento dell'accesso, il messaggio "Nome utente o password non corretti" non dovrebbe apparire. È meglio filtrare l'errore. Il messaggio corretto sarebbe: "La password inserita non è corretta. Inserire la password corretta".
Esistono diversi tipi di errori. Innanzitutto, l'errore di formato. In questo caso la password viene inserita nel formato sbagliato. Ad esempio, vengono inserite lettere invece di numeri. Possono verificarsi anche errori di valore. Questo può accadere se viene inserito un valore errato nonostante il formato sia valido. Un esempio potrebbe essere l'inserimento del valore 34 per un Tag della data. Il messaggio sarà ad esempio: "Il mese di marzo ha 31 giorni. Immettere nuovamente Tag ".
Un altro tipo di errore è l'input non valido. In questo caso, lo sviluppatore specifica valori che non sono validi. Infine, c'è il tipo di errore che si verifica quando non è stato inserito alcun dato nei campi obbligatori. Ciò accade, ad esempio, quando l'indirizzo e-mail è un campo obbligatorio e l'inserimento è stato dimenticato. Tuttavia, questo accade spesso anche con i termini e le condizioni generali. Su molti siti web non è possibile procedere senza aver accettato questa dichiarazione.
Campi obbligatori
I moduli contengono spesso campi obbligatori. Questi devono essere contrassegnati come tali. Un simbolo spesso utilizzato per indicare un campo obbligatorio è un "*", che viene visualizzato accanto al campo del modulo. In questo caso, però, si dovrebbe segnalare già all'inizio del modulo che i campi contrassegnati da un asterisco sono campi obbligatori. Un'altra possibilità è quella di visualizzare questi campi obbligatori con un colore o un'ombreggiatura diversa. Tuttavia, questi non sono accessibili a tutti. Affinché anche gli utenti di screen reader possano riconoscerli, è opportuno utilizzare l'attributo required o aria-required. Questo indica allo screen reader che si tratta di un campo obbligatorio.
Segnaposto
Un modo per rendere i moduli ancora più comprensibili e facili da usare è quello di utilizzare i segnaposto nei campi dei moduli. I segnaposto sono testi temporanei che vengono visualizzati all'interno di un campo del modulo per indicare all'utente il tipo di informazione da inserire. Questi testi scompaiono non appena il campo del modulo viene cliccato o focalizzato e possono essere sostituiti dal contenuto effettivo del campo del modulo. I segnaposto possono essere facilmente inseriti nell'elemento di input HTML di un campo modulo utilizzando l'attributo placeholder.
Salvare le voci
Tutti gli utenti dovrebbero essere in grado di salvare le proprie voci. I problemi si verificano spesso con i moduli più lunghi. Per evitare la perdita di dati, è possibile salvarli. A tale scopo, è possibile implementare un pulsante che salvi lo stato corrente. In questo modo si facilita la compilazione di moduli complessi. Questo ha anche il vantaggio che le voci mancanti possono essere completate in un secondo momento. Infatti, la ripetizione di queste voci porta alcuni utenti a non continuare a compilare il modulo. Questo può essere 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. Ma è anche uno degli ostacoli che si ripresentano di continuo. Spesso si tratta di siti web in cui è richiesto il login. Affinché questi siano accessibili a tutti, i moduli devono essere progettati in modo da essere privi di barriere. Questo perché in molti casi le procedure di autenticazione sono limitate nel tempo. Le persone hanno quindi pochissimo tempo per effettuare il login. Spesso si tratta solo di 30 o 60 secondi. Per molte persone con disabilità, questo tempo non è sufficiente per effettuare il login. È quindi importante non limitare l'accesso in base al tempo.
I captchas pongono un altro problema. Vengono utilizzati per identificare l'utente come un essere umano e non come un 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, ad esempio quelle che mostrano un'automobile. Tuttavia, non sempre queste immagini sono prive di barriere. Le persone non vedenti o ipovedenti non possono riconoscere queste immagini. Per aggirare questa barriera, è necessario offrire un'opzione audio.
In sintesi, la progettazione accessibile dei campi dei moduli è un passo importante verso un ambiente digitale accessibile. L'uso di denominazioni corrette, un layout chiaro e strutturato, nonché l'utilizzo della tastiera e i corrispondenti messaggi di errore aumentano la probabilità che anche le persone con disabilità siano in grado di compilare i moduli in modo indipendente.
