Linee GuidaUn modulo accessibile consente all’utente di comprendere quali dati deve inserire, compilare facilmente i campi richiesti, individuare tempestivamente eventuali errori e correggerli con successo. In questo processo svolgono un ruolo importante sia la progettazione visiva sia la corretta implementazione tecnica.
Per quali utenti è particolarmente importante?
I moduli accessibili sono particolarmente importanti per:
- utenti ciechi e ipovedenti che utilizzano lettori di schermo,
- utenti con daltonismo,
- persone con disabilità motorie che utilizzano la tastiera,
- persone con disabilità cognitive,
- utenti anziani.
I moduli ben progettati sono tuttavia utili a tutti gli utenti, poiché riducono il numero di errori, velocizzano la compilazione e migliorano l’esperienza utente.
Elementi chiave dei moduli accessibili
Campi di inserimento chiaramente etichettati
Ogni campo di inserimento deve avere un’etichetta chiara che indichi all’utente quali dati deve inserire. L’etichetta deve essere associata in modo permanente al campo e non deve essere sostituita esclusivamente dal testo all’interno del campo (placeholder), poiché questo scompare quando l’utente inizia a digitare. Nei moduli più complessi è inoltre importante che descrizioni aggiuntive, istruzioni e messaggi di errore siano correttamente associati ai campi di inserimento, affinché possano essere percepiti anche dalle tecnologie assistive.
Campi ben etichettati riducono il numero di errori, migliorano l’esperienza utente e consentono agli utenti dei lettori di schermo di utilizzare i moduli in modo efficace.
Esempio di modulo accessibile:
Maggiori informazioni sulla denominazione accessibile degli elementi (si apre in una nuova finestra)
Struttura logica e gestione dei moduli
I moduli più lunghi devono essere suddivisi in modo chiaro in sezioni logiche e l’utente deve poterli utilizzare anche esclusivamente tramite tastiera. Il focus deve seguire una sequenza logica e i gruppi di campi correlati devono essere opportunamente identificati. Questo tipo di progettazione migliora l’esperienza utente per tutti, in particolare per le persone che utilizzano la tastiera o tecnologie assistive.
Esempio di elemento non raggiungibile tramite tastiera:
Maggiori informazioni sull’accessibilità tramite tastiera(si apre in una nuova finestra)
Buon contrasto e chiara visibilità degli elementi
Gli utenti devono poter individuare facilmente i singoli campi di inserimento, le caselle di controllo, i selettori e i pulsanti. Tutti gli elementi interattivi devono pertanto avere un contrasto adeguato rispetto allo sfondo. Oltre al contrasto del testo, è importante anche il contrasto dei bordi dei campi di inserimento, delle icone, degli indicatori del focus e degli altri elementi grafici del modulo.
Un buon contrasto migliora la leggibilità e l’usabilità dei moduli, soprattutto per gli utenti ipovedenti, le persone con daltonismo e gli utenti di dispositivi mobili o che si trovano in condizioni di scarsa illuminazione.
Esempio di contrasto testuale non adeguato (a sinistra) e adeguato (a destra):
Maggiori informazioni sul contrasto adeguato e sull’uso del colore(si apre in una nuova finestra)
Avvisi di errore chiari
Se l’utente commette un errore durante la compilazione del modulo, il sito web deve spiegare chiaramente quale campo contiene l’errore, perché si è verificato e come correggerlo. Gli avvisi devono essere sufficientemente visibili, comprensibili e non devono basarsi esclusivamente sul colore.
Quando possibile, il sistema dovrebbe offrire anche un suggerimento concreto per la correzione, poiché ciò aumenta notevolmente la probabilità di completare correttamente il modulo e riduce il numero di errori ripetuti.
Esempio di avviso di errore accessibile:
Maggiori informazioni sugli avvisi di errore accessibili(si apre in una nuova finestra)
Messaggi di stato
Dopo l’invio riuscito di un modulo o un’altra modifica importante, l’utente deve ricevere un feedback chiaro. I messaggi di stato, come »Il modulo è stato inviato con successo« o »Non è stato possibile salvare i dati«, devono essere accessibili a tutti gli utenti, compresi coloro che utilizzano lettori di schermo.
Se tali messaggi non vengono comunicati correttamente alle tecnologie assistive, gli utenti con disabilità visive spesso non sanno se la loro azione sia stata completata con successo oppure no.
Maggiori informazioni sui messaggi di stato accessibili(si apre in una nuova finestra)
Protezione dagli invii indesiderati dei moduli – CAPTCHA
La protezione dei moduli dagli invii indesiderati, come la CAPTCHA, non deve impedire agli utenti di accedere al servizio. Le classiche soluzioni CAPTCHA basate su immagini, in cui l’utente deve riconoscere testo distorto o selezionare immagini, sono spesso inaccessibili agli utenti ciechi e ipovedenti, alle persone con disabilità cognitive e agli utenti delle tecnologie assistive.
Quando la verifica è necessaria, il sito web dovrebbe offrire alternative accessibili, ad esempio verifiche senza intervento dell’utente, verifiche tramite e-mail o altre soluzioni che non si basino esclusivamente sulla percezione visiva. È importante che la procedura sia comprensibile, utilizzabile tramite tastiera e accessibile ai lettori di schermo.
Una protezione accessibile dei moduli garantisce sicurezza senza escludere gli utenti.
Maggiori informazioni sulla protezione CAPTCHA accessibile (si apre in una nuova finestra)
Collegamento con le linee guida per l’accessibilità (WCAG)
I moduli accessibili coinvolgono diversi criteri di successo WCAG, tra i più importanti:
- 1.1 Contenuti non testuali
- 1.3.1 Informazioni e relazioni
- 1.4.3 Contrasto (minimo)
- 1.4.11 Contrasto non testuale
- 2.1.1 Tastiera
- 2.2.1 Regolazione dei tempi
- 3.3.1 Identificazione degli errori
- 3.3.2 Etichette o istruzioni
- 3.3.3 Suggerimenti per la correzione degli errori
- 3.3.4 Prevenzione degli errori
- 3.3.8 Autenticazione accessibile
- 4.1.2 Nome, ruolo, valore
- 4.1.3 Messaggi di stato