Tutti hanno avuto a che fare con i moduli, prima o poi. In passato, più che altro su carta. Oggi si tratta sempre più di moduli digitali, utilizzati per l'interazione degli utenti con un sito web. Che si tratti di comunicare su Internet o di ordinare un prodotto, li troviamo ovunque. Anche le ricerche su Internet, ad esempio con Google, ne risentono. La compilazione di questi moduli è difficile 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 fa a creare elementi di modulo accessibili?
Esistono varie tecniche per farlo. Tuttavia, prima di imparare le tecniche, è necessario familiarizzare con 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 per inviare/annullare
Etichettatura dei campi del modulo
Per ottenere l'accessibilità dei moduli, i vari elementi di controllo devono essere etichettati. Queste etichette consentono alle tecnologie assistive di riconoscere le funzioni dei controlli e di trasmetterle all'utente. È importante che le etichette siano chiaramente collegate ai controlli, altrimenti gli screen reader non saranno in grado di stabilire una connessione con gli elementi. Di conseguenza, gli utenti avranno difficoltà a comprendere il modulo. Non riescono a riconoscere quali informazioni devono essere inserite in quali campi. Di conseguenza, non riescono a completare 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 viene posizionata prima degli elementi di controllo. Per i pulsanti di opzione e le caselle di controllo, invece, viene posizionata dopo l'elemento di controllo. È necessario aggiungere l'attributo for affinché le etichette possano essere collegate all'elemento corrispondente.
L'attributo aria viene utilizzato in HTML per i pulsanti. I pulsanti possono, ad esempio, rappresentare la funzione di invio o di annullamento in un modulo. Con gli attributi aria, le descrizioni dei rispettivi elementi sono riconoscibili solo dalle 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 una città.
Vengono creati in HTML con il tag input e l'attributo type.
È possibile aggiungere ulteriori attributi, ad esempio per definire la lunghezza della linea.
I campi multilinea sono 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 della riga. Tuttavia, per rendere accessibili questi campi, è necessario aggiungere il tag label. Tuttavia, non è possibile creare un collegamento tra l'etichetta e gli elementi se questi non sono chiaramente assegnati. Questi devono quindi essere collegati tra loro 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>
Qui viene creato un campo di input a riga singola per il nome con il tipo "text". L'etichetta "Nome:" è resa visibile a tutti dall'elemento label. Quest'ultimo è collocato prima dell'elemento input, poiché viene emesso prima del campo di input. Queste aree sono collegate tra loro tramite l'attributo for del tag label e l'attributo id dell'elemento input. È 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 utilizzando il tag "textarea". L'elemento label visualizza quindi la didascalia "Your message:". Anche in questo caso, le due aree con lo stesso contenuto testuale sono collegate tra loro tramite gli attributi for e id.
Informazioni generali
In generale, i moduli devono essere chiari e non ambigui. Anche la prevedibilità è molto utile. Ciò consente agli utenti di riconoscere rapidamente ciò che viene loro richiesto. Anche una struttura chiara e sensata è molto importante. Gli elementi di contenuto correlati possono essere raggruppati. Le unità logicamente separate possono essere separate anche visivamente. Questo facilita l'orientamento. Possono anche essere separate l'una dall'altra dal 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 è la loro operatività tramite tastiera. Ci sono persone che non possono usare il mouse a causa della loro disabilità. Questo rende 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 facilita la comprensione e l'uso dei moduli. Un altro modo per semplificare l'utilizzo della tastiera è quello di utilizzare le scorciatoie da tastiera. Agli elementi del modulo possono essere assegnate combinazioni di tasti. 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 aggiunto all'elemento per il quale deve essere utilizzato. Il tasto utilizzato per il comando da tastiera viene semplicemente assegnato lì. Ad esempio, se si assegna il tasto "n" a un campo o a un pulsante, questo può essere utilizzato in Windows con la scorciatoia da tastiera (Alt + n).
Tuttavia, è importante assicurarsi che questa scorciatoia non sia già utilizzata per un altro comando nel browser.
Riduzione al minimo
È inoltre consigliabile ridurre l'intero processo all'essenziale per non gravare inutilmente sulle persone con disabilità. Pertanto, devono essere richiesti solo i dati assolutamente necessari. I dati esistenti non dovrebbero essere richiesti. Inoltre, la visibilità dei campi del modulo può essere adattata alla situazione. I campi di input facoltativi o legati a condizioni non devono essere necessariamente visibili. Possono essere visualizzati se sono necessari. Ad esempio, non ha senso chiedere l'età dei figli se si è precedentemente selezionato che non ci sono figli.
Messaggi di aiuto e di errore
È inoltre necessario fornire un aiuto per l'input. Questo può assumere la forma di una finestra di dialogo o di un tooltip. Questi possono essere utilizzati per spiegare l'input in modo più dettagliato. Un'altra opzione potrebbe essere quella di collegarsi a una pagina di aiuto separata. Questo aumenterebbe enormemente il tasso di successo. Gli errori si verificano comunque. È quindi importante che i messaggi di errore siano 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. In questo caso sarebbe corretto: "La password inserita non è corretta. Inserire la password corretta".
Esistono diversi tipi di errori. In primo luogo, 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 è l'inserimento del valore 34 per un giorno della data. Il messaggio sarà: "Il mese di marzo ha 31 giorni. Inserire nuovamente il giorno".
Un altro tipo di errore è rappresentato dalle voci non valide. In questo caso, lo sviluppatore specifica valori che non sono validi. Infine, c'è il tipo di errore che si verifica quando non è stata inserita alcuna voce per i campi obbligatori. Ciò si verifica, ad esempio, se la richiesta dell'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 proseguire 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, tuttavia, è necessario indicare all'inizio del modulo che i campi contrassegnati da un asterisco sono obbligatori. Un'altra possibilità è quella di visualizzare i campi obbligatori in un colore o in una tonalità 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. In questo modo si informa lo screen reader che si tratta di un campo obbligatorio.
Segnaposto
Un modo per rendere i moduli ancora più facili da capire e 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 avere la possibilità di salvare le proprie voci. Ci sono sempre problemi 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 aggiunte in un secondo momento. La ripetizione di queste voci porta alcuni utenti a non completare il modulo. Questo può essere 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, è anche uno degli ostacoli che si ripresentano di volta in volta. Spesso si tratta di siti web in cui è richiesto il login. Tuttavia, per garantire che siano accessibili a tutti, i moduli devono essere progettati in modo da essere privi di barriere. In molti casi, le procedure di autenticazione sono limitate nel tempo. L'utente ha 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 accedere. È quindi importante non fissare un limite di tempo per l'accesso.
I captchas pongono un ulteriore problema. Vengono utilizzati per 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. Tuttavia, spesso è necessario fare clic su tutte le immagini che mostrano, ad esempio, un'automobile. Tuttavia, queste non sono sempre accessibili. Le persone non vedenti o ipovedenti non possono riconoscere queste immagini. Per superare questa barriera, è necessario offrire un'opzione audio.
In sintesi, si può affermare che la progettazione accessibile dei campi dei moduli è un passo importante verso un ambiente digitale accessibile. L'uso di un'etichettatura corretta, di un layout chiaro e strutturato, nonché l'utilizzo della tastiera e dei relativi messaggi di errore aumentano la probabilità che anche le persone con disabilità siano in grado di completare i moduli in modo indipendente.
