Compatibilità:

WebSite X5 Evo e Pro dalla v.2025.1

Le form sono uno degli strumenti più utilizzati sul web: permettono agli utenti di iscriversi a newsletter, inviare richieste, acquistare prodotti e molto altro. Tuttavia, se non sono progettate correttamente, possono rappresentare una barriera per le persone con disabilità, impedendo loro di completare le azioni desiderate.


L’accessibilità delle form è fondamentale per garantire che tutti gli utenti, inclusi coloro che utilizzano screen reader, navigano con la tastiera o hanno difficoltà visive o cognitive, possano interagire con i tuoi moduli senza problemi. Realizzare form accessibili non solo favorisce l’inclusività, ma migliora anche l’esperienza utente complessiva: istruzioni chiare, feedback immediato e navigazione intuitiva rendono le form più semplici e comprensibili per tutti.


In questa guida esamineremo i principi fondamentali per rendere una form accessibile, concentrandoci su:


Principali Linee Guida WCAG di riferimento

Le Web Content Accessibility Guidelines (WCAG) forniscono una serie di criteri per rendere le form accessibili a tutti gli utenti, inclusi coloro con disabilità visive, motorie o cognitive. Questi criteri assicurano che le form siano utilizzabili sia da dispositivi assistivi, come gli screen reader, sia da chi naviga esclusivamente con la tastiera. 


Tra i principali requisiti delle WCAG per le form, troviamo:

  • Criterio 1.3.1 - Informazioni e Relazioni (Livello A)

Questo criterio richiede che le informazioni o le relazioni visibili su una pagina siano preservate anche quando il contenuto viene presentato in modo diverso, ad esempio attraverso uno screen reader o altri strumenti di navigazione assistiva. In altre parole, le informazioni devono essere organizzate in modo semantico e comprensibile per tutti. 

Nel caso delle form, ciò significa garantire che ogni campo sia associato correttamente alla propria etichetta per fare in modo che le relazioni tra i vari elementi siano utilizzabili da tutti gli utenti. 

  • Criterio 3.3.1 - Identificazione degli Errori (livello A)

Questo criterio richiede che, quando un utente commette un errore nella compilazione di una form, tale errore venga identificato e comunicato in modo chiaro e comprensibile. L'obiettivo è garantire che l'utente sia consapevole del problema e abbia le informazioni necessarie per risolverlo.

  • Criterio 3.3.2 - Etichette o Istruzioni (livello A)

Questo criterio richiede che ogni campo di una form includa etichette o istruzioni chiare per aiutare gli utenti a comprendere cosa è richiesto e come compilare correttamente il campo. L'obiettivo è fornire un contesto adeguato, riducendo la possibilità di errori e rendendo il processo di compilazione semplice e intuitivo per tutti.

  • Criterio 4.1.2 - Nome, Ruolo, Valore (Livello A)

Questo criterio richiede che gli elementi interattivi di una pagina web, come i campi delle form, abbiano un nome, un ruolo e un valore definiti in modo chiaro e semantico. Ciò garantisce che questi elementi siano comprensibili non solo per gli utenti che li vedono, ma anche per chi utilizza tecnologie assistive come gli screen reader.


Etichette e Istruzioni

Il primo passo per rendere una form accessibile, dunque, è gestire correttamente le etichette e le istruzioni relative ai campi che la compongono. Ogni campo deve essere accompagnato da un’etichetta chiara e visibile che descriva esattamente cosa inserire, insieme a istruzioni che forniscano contesto utile per la compilazione.


Occorre considerare che, per chi non ha difficoltà visive, la posizione dell’etichetta accanto al campo è sufficiente per capire a cosa si riferisce. Tuttavia, questa relazione può andare persa per gli utenti che utilizzano tecnologie assistive, come i lettori di schermo. Per questo, come richiesto dal Criterio di successo 1.3.1 delle WCAG, le etichette devono essere associate ai campi non solo visivamente, ma anche a livello di codice HTML. L’uso del tag <label> o dell’attributo aria-labelledby, per esempio, serve proprio per garantire che ogni etichetta sia chiaramente collegata al proprio campo, migliorando significativamente l’esperienza per chi naviga con supporti assistivi.


Anche le istruzioni devono essere facilmente comprensibili e accessibili. È importante evitare un linguaggio tecnico, privilegiando invece chiarezza e semplicità. Inoltre, le indicazioni non devono basarsi solo su elementi visivi come colori o icone, ma integrare testo esplicativo per garantire la leggibilità anche a chi ha disturbi visivi. Inserire istruzioni sopra un campo o un gruppo di campi, quando necessario, aiuta a chiarire cosa è richiesto, riducendo errori e frustrazioni.


Feedback e Gestione degli errori

Per aiutare gli utenti a completare una form senza difficoltà è essenziale gestire correttamente tutte le evenienze, fornendo feedback chiari che consentano di comprendere cosa sta accadendo e come procedere. In questo senso, la gestione degli errori deve essere progettata in modo da rendere evidente il problema e fornire istruzioni su come risolverlo, senza creare confusione o frustrazione.


Quando si verifica un errore, è importante segnalarlo visivamente accanto al campo interessato con un messaggio testuale chiaro, come “Questo campo è obbligatorio” o “Inserisci un’email valida”. È altrettanto fondamentale che gli errori siano comunicati anche a livello di codice per gli utenti che utilizzano screen reader. Questo può essere realizzato sempre tramite specifici attributi come aria-invalid, che segnala lo stato del campo, e aria-describedby, che collega il campo al messaggio di errore specifico.


Per garantire l’accessibilità visiva, è utile evidenziare i campi con errori utilizzando colori contrastanti. Tuttavia, non bisogna fare affidamento esclusivamente sul colore, poiché alcuni utenti potrebbero avere difficoltà a distinguerlo. È sempre meglio combinare colori e testo per rendere l’errore evidente a tutti.


Infine, fornire un feedback positivo dopo la compilazione corretta della form, ad esempio con un messaggio come “Modulo inviato correttamente!”, aiuta gli utenti a capire che l’azione è stata completata con successo. 


Navigazione da tastiera

Oltre a lavorare su etichette e messaggi di feedback, per garantire che una form sia accessibile a tutti, inclusi gli utenti con disabilità motorie o visive che non utilizzano il mouse, è essenziale fare anche in modo che sia completamente navigabile da tastiera. La navigazione da tastiera consente di spostarsi tra i campi della form, selezionare opzioni e inviare il modulo utilizzando solo i tasti della tastiera.


Per assicurare una navigazione efficace, i campi devono seguire un ordine logico e prevedibile, che corrisponda al flusso visivo della pagina. Questo ordine è determinato automaticamente dalla struttura del codice HTML, quindi è importante evitare modifiche non necessarie con l’attributo tabindex. Cambiare l’ordine naturale dei campi può creare confusione e ostacolare gli utenti, specialmente quelli che utilizzano screen reader.


È inoltre importante che tutti gli elementi interattivi della form, come pulsanti, link e checkbox, siano accessibili da tastiera e attivabili con i tasti standard. Ad esempio:

  • Tab: per spostarsi da un campo all’altro.
  • Enter: per attivare pulsanti o selezionare opzioni.
  • Barra Spaziatrice: per selezionare checkbox o attivare pulsanti.


#tip - Ne abbiamo parlato in maniera più approfondita nella guida: Come garantire una navigazione da tastiera accessibile


Creare una form accessibile con WebSite X5

Come abbiamo visto, per soddisfare i criteri di successo suggeriti dalle WCAG e rendere una form accessibile, è necessario intervenire sul codice, utilizzando elementi semantici e, in alcuni casi, attributi ARIA (Accessible Rich Internet Applications). Questo è essenziale per rendere le form comprensibili sia agli utenti che utilizzano tecnologie assistive sia ai browser.  


#tip - ARIA non è un vero e proprio linguaggio di programmazione, ma un insieme di attributi che si possono aggiungere agli elementi HTML per migliorare l’accessibilità delle interfacce web, in particolare per stati dinamici o interattivi. 


Detto questo, lavorando con WebSite X5 potrai realizzare form accessibili senza dover intervenire manualmente sul codice. Il software genera automaticamente un codice semanticamente corretto, includendo gli elementi HTML e gli attributi ARIA necessari, garantendo così una base solida per l’accessibilità (vedi: Criteri di accessibilità implementati in WebSite X5).


Tuttavia, la reale accessibilità della form dipende anche dalle tue scelte. WebSite X5 ti offre sempre piena libertà nella personalizzazione delle pagine del tuo sito pertanto, nell'impostare i tuoi moduli e-mail, dovrai fare attenzione ad aspetti come:

  • Colori e i contrasti che devono rispettare gli standard di leggibilità.
  • Testi delle etichette e dei messaggi di errore, che devono essere chiari e comprensibili.
  • Istruzioni e indicazioni, che devono guidare l’utente nella compilazione senza ambiguità.


Grazie alla combinazione di un codice generato correttamente da WebSite X5 e di tue scelte consapevoli, riuscirai a creare form accessibili, migliorando l’esperienza di tutti gli utenti.


#tip - Scopri come realizzare una form di contatto: Come si lavora con l'Oggetto Modulo di Contatto?


Strumenti per verificare l’accessibilità delle form

Per garantire che una form sia davvero accessibile, è fondamentale testarla sia con strumenti automatici, che analizzano il codice e la struttura, sia con test manuali, che simulano l’esperienza degli utenti con disabilità.


Gli strumenti automatici aiutano a individuare errori comuni nell’accessibilità delle form, come etichette mancanti, problemi di contrasto o feedback non chiari. Ecco alcuni dei più utili:


Oltre ai controlli automatici, è importante effettuare verifiche pratiche per assicurarsi che la form sia effettivamente utilizzabile da chi naviga con strumenti assistivi:

  • Simulazioni con screen reader → Testa la form con screen reader come NVDA (Windows) o VoiceOver (Mac) per verificare che le etichette, i messaggi di errore e i campi siano comprensibili.
  • Navigazione da tastiera → Prova a compilare la form senza usare il mouse, utilizzando solo il tasto TAB per navigare tra i campi e Enter/Spazio per selezionare pulsanti e opzioni.