Come si rendono accessibili gli elementi di un modulo?

Tutti, prima o poi, si sono trovati a dover compilare un modulo. Se un tempo erano prevalentemente cartacei, oggi la maggior parte di essi è digitale. Che si tratti di inviare un messaggio, cercare qualcosa su Google o fare un acquisto online, i moduli sono ormai presenti ovunque. Tuttavia, per le persone con disabilità fisiche, cognitive o sensoriali, come chi è cieco o ipovedente, la compilazione di questi moduli può diventare una vera e propria sfida.
Per garantire a tutti il diritto di partecipare pienamente al digitale, è fondamentale che i moduli siano progettati senza barriere. Ma come si creano, concretamente, dei moduli accessibili?

Esistono diverse tecniche per rendere un modulo accessibile. Prima di esaminarle, però, è importante comprendere i vari elementi che compongono un modulo. Questi si dividono in diverse categorie, tra cui:

• Campi di input a riga singola

• Aree di input a più righe

• Liste di selezione

• Pulsanti di opzione (radio button)

• Caselle di controllo (checkbox)

• Pulsanti di invio o annullamento

Etichette chiare per moduli accessibili

Per garantire l’accessibilità dei moduli, è essenziale etichettare correttamente i vari controlli. Le etichette permettono alle tecnologie assistive di riconoscere e comunicare all’utente la funzione di ciascun elemento. Se l’etichetta non è correttamente associata al controllo, lo screen reader non sarà in grado di interpretarlo e gli utenti non sapranno quali dati inserire e dove, con un conseguente aumento degli errori.

Esistono due principali modalità di etichettatura: visibile e non visibile. In HTML, si utilizzano il tag <label> e gli attributi aria. Il tag <label> viene impiegato per campi di input, menu a tendina, pulsanti radio e checkbox. Per campi di input e selezioni, l’etichetta dovrebbe precedere il campo, mentre per radio e checkbox, dovrebbe seguirlo. È essenziale anche l'uso dell'attributo for per associare correttamente l’etichetta al relativo campo.

Gli attributi aria sono usati in HTML per elementi come pulsanti con funzioni specifiche, come "invia" o "annulla". Questi attributi sono visibili solo per le tecnologie assistive e possono essere utilizzati per campi di input che devono essere letti solo dallo screen reader, ma non visibili all'utente. Il più comune è aria-label, usato per etichettare in modo accessibile un elemento, mentre aria-labelledby consente di assegnare un’unica etichetta a più elementi.

Campi input a riga singola

I campi di input sono tra gli elementi più usati nei moduli online, e possono essere a riga singola o multilinea. I campi a riga singola sono ideali per inserimenti brevi, come il nome, l’indirizzo email, la via o la città.

Per creare questi campi in HTML, si utilizza il tag <input> aggiungendo l’attributo type per definire il tipo di dato da inserire. È anche possibile aggiungere altri attributi per specificare, ad esempio, la lunghezza della riga.

I campi multilinea, invece, sono usati per aree di testo più ampie, come i messaggi. Questi si creano con il tag <textarea>. Anche in questo caso, lo sviluppatore può definire il numero di righe e la lunghezza delle righe. Per garantire l’accessibilità, è necessario aggiungere l’etichetta corretta, associandola tramite gli attributi for e id.

Ecco un esempio di codice HTML che implementa etichette per i 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>

In questo caso, il campo di input per il nome viene creato con il tipo "text" e preceduto dall'etichetta "Ihr Vorname:". L'associazione tra l’etichetta e il campo è resa possibile dagli attributi for e id, che devono essere identici.

Note generali

In generale, i moduli devono essere chiari e privi di ambiguità. La prevedibilità è fondamentale, poiché permette agli utenti di comprendere rapidamente cosa è richiesto. Una struttura chiara e sensata è altrettanto importante: gli elementi correlati possono essere raggruppati insieme, mentre quelli separati possono essere distinti visivamente. L'uso del colore, se appropriato, può facilitare l’orientamento, ma è fondamentale mantenere un contrasto minimo di 4.5:1.

Operabilità tramite tastiera

Un altro aspetto cruciale nella progettazione di moduli accessibili è l'operabilità tramite tastiera. Esistono persone che non possono utilizzare un mouse, per cui è essenziale progettare moduli che possano essere navigati anche tramite tastiera. L'uso di etichette e attributi aria rende i moduli più facili da comprendere e utilizzare. Le scorciatoie da tastiera sono un ulteriore aiuto, e possono essere implementate con l'attributo accesskey in HTML, assegnando un tasto specifico per ogni elemento.

Riduzione al minimo

È buona prassi ridurre al minimo le informazioni richieste, evitando di creare un carico eccessivo per le persone con disabilità. Dovrebbero essere richiesti solo i dati strettamente necessari, ed è preferibile evitare di chiedere informazioni già disponibili. I campi opzionali o condizionati non dovrebbero essere sempre visibili, ma mostrati solo quando necessario, come nel caso dell'età dei bambini.

Assistenza e messaggi di errore

Offrire assistenza per la compilazione è fondamentale. È possibile farlo tramite finestre di dialogo o tooltip, che spiegano meglio cosa inserire nei campi. In caso di errori, è importante fornire messaggi chiari e utili. Ad esempio, se la password inserita è errata, invece di mostrare un generico "Nome utente o password errati", sarebbe più utile specificare "La password che hai inserito non è corretta. Ti preghiamo di inserire la password giusta".

I messaggi di errore possono riguardare diversi tipi di problemi: errori di formato (ad esempio, lettere al posto di numeri), errori di valore (ad esempio, un valore errato per una data), errori di inserimento non valido (valori non permessi) o l'assenza di dati nei campi obbligatori.

Campi obbligatori

I campi obbligatori devono essere chiaramente contrassegnati. Un asterisco "*" accanto al campo è un simbolo comune, ma dovrebbe essere spiegato all'inizio del modulo. Un altro approccio consiste nel visualizzare questi campi con un colore diverso, ma questa soluzione non è accessibile a tutti. Per garantire l'accessibilità anche agli utenti di screen reader, è importante usare gli attributi required o aria-required.

Segnaposto

I segnaposto sono testi temporanei che appaiono all’interno di un campo per indicare il tipo di informazioni richieste. Questi testi scompaiono una volta che l'utente interagisce con il campo. I segnaposto possono essere aggiunti facilmente in HTML con l'attributo placeholder.

Salvataggio degli inputs

Tutti gli utenti dovrebbero poter salvare le proprie voci, specialmente in moduli lunghi. Un pulsante per salvare lo stato attuale del modulo facilita la compilazione, evitando la perdita di dati e consentendo agli utenti di completare il modulo successivamente.

Autenticazione e limite di tempo

Le procedure di autenticazione e i limiti di tempo sono spesso problematici per le persone con disabilità. I moduli di login e i Captcha, in particolare, possono rappresentare una barriera significativa. È importante progettare questi processi in modo che siano accessibili a tutti, evitando limiti temporali troppo stretti e offrendo alternative, come una versione audio dei Captcha.

In sintesi, progettare moduli accessibili è fondamentale per un ambiente digitale inclusivo. Utilizzare designazioni corrette, una struttura chiara e operabilità tramite tastiera aumenta le possibilità che anche le persone con disabilità possano compilare i moduli in modo autonomo.