Un modulo è un elemento che consente a un utente di fornire dati in un campo o in un gruppo di campi. I moduli possono essere un singolo campo o un modulo complesso in più passaggi con più campi per pagina, convalida dell'input e un CAPTCHA.
I moduli sono considerati uno degli elementi più difficili da realizzare dal punto di vista dell'accessibilità, in quanto richiedono la conoscenza di tutti gli elementi che abbiamo già trattato, nonché di regole aggiuntive specifiche solo per i moduli. Con un po' di comprensione e tempo, puoi creare un modulo accessibile adatto a te e ai tuoi utenti.
I moduli sono l'ultimo modulo specifico per i componenti di questo corso. Questo modulo si concentra sulle linee guida specifiche per i moduli, tuttavia, le linee guida precedenti trovate nei moduli precedenti, come la struttura dei contenuti, lo stato attivo della tastiera, e il contrasto cromatico, si applicano anche agli elementi del modulo.
Campi
La spina dorsale dei moduli sono i campi. I campi sono piccoli pattern interattivi, come un elemento di input o un pulsante di opzione, che consentono agli utenti di inserire contenuti o fare una scelta. È disponibile un'ampia varietà di campi del modulo tra cui scegliere.
La raccomandazione predefinita è di utilizzare pattern HTML consolidati anziché creare qualcosa di personalizzato con ARIA, poiché determinate funzionalità e funzioni, come stati, proprietà e valori dei campi, sono intrinsecamente integrate negli elementi HTML. I campi personalizzati richiedono l'aggiunta manuale di ARIA.
Non consigliato: HTML personalizzato con ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Consigliato: HTML standard
<form id="sundae-order-form">
<!-- form content -->
</form>
Oltre a scegliere i pattern dei campi del modulo più accessibili, se applicabile, devi anche aggiungere attributi di completamento automatico HTML ai campi. L'aggiunta di attributi di completamento automatico consente una definizione o un'identificazione più precisa dello scopo per gli user agent e le tecnologie assistive (AT).
Gli attributi di completamento automatico consentono agli utenti di personalizzare le presentazioni visive, ad esempio mostrando un'icona di una torta di compleanno in un campo con l'attributo di completamento automatico del compleanno (bday) assegnato. In generale, gli attributi di completamento automatico rendono la compilazione dei moduli più facile e veloce. Questa funzionalità è particolarmente utile per le persone con disturbi cognitivi e di lettura e per coloro che utilizzano AT, come gli screen reader.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Infine, i campi del modulo non devono produrre modifiche contestuali quando ricevono lo stato attivo o l'input dell'utente, a meno che l'utente non sia stato avvisato del comportamento prima di utilizzare il componente. Ad esempio, un modulo non deve essere inviato automaticamente quando un campo riceve lo stato attivo o quando un utente aggiunge contenuti al campo.
Etichette
Le etichette informano un utente sullo scopo di un campo, se il campo è obbligatorio e possono anche fornire informazioni sui requisiti del campo, ad esempio il formato di input. Le etichette devono essere sempre visibili e descrivere con precisione il campo del modulo agli utenti.
Uno dei principi fondamentali dei moduli accessibili è stabilire una connessione chiara e precisa tra un campo e la sua etichetta. Ciò vale sia visivamente che a livello di programmazione. Senza questo contesto, un utente potrebbe non capire come compilare i campi del modulo.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Inoltre, i campi del modulo correlati, ad esempio un indirizzo postale, devono essere raggruppati a livello di programmazione e visivamente. Un metodo consiste nell'utilizzare il pattern fieldset e legend per raggruppare elementi simili.
Descrizioni
Le descrizioni dei campi hanno uno scopo simile a quello delle etichette, in quanto vengono utilizzate per fornire un contesto più ampio al campo e ai requisiti. Le descrizioni dei campi non sono obbligatorie per l'accessibilità se le etichette o le istruzioni del modulo sono sufficientemente descrittive.
Tuttavia, in alcune situazioni è utile aggiungere informazioni aggiuntive per evitare errori nei moduli, ad esempio comunicare la lunghezza minima dell'input per un campo password o indicare a un utente quale formato di calendario utilizzare (ad esempio MM-GG-AAAA).
Esistono molti metodi diversi per aggiungere descrizioni dei campi ai moduli. Uno dei metodi migliori consiste nell'aggiungere un
attributo aria-describedby
all'elemento del modulo, oltre a un <label> elemento. Lo screen reader leggerà sia la descrizione sia l'etichetta.
Se aggiungi l'attributo
aria-labelledby
all'elemento, il valore dell'attributo sostituisce il testo all'interno di
<label>. Come sempre, testa il codice finale con tutte le AT che intendi supportare.
Errori
Quando crei moduli accessibili, puoi fare molto per evitare che gli utenti commettano errori nei moduli. In precedenza in questo modulo, abbiamo trattato la marcatura chiara dei campi, la creazione di etichette identificative e l'aggiunta di descrizioni dettagliate, ove possibile. Tuttavia, non importa quanto pensi che il tuo modulo sia chiaro, alla fine un utente commetterà un errore.
Quando un utente riscontra un errore nel modulo, il primo passo è comunicare l'errore. Il campo in cui si è verificato l'errore deve essere identificato chiaramente e l'errore stesso deve essere descritto all'utente nel testo.
Esistono diversi metodi per visualizzare i messaggi di errore, ad esempio:
- Un modale, in linea vicino al punto in cui si è verificato l'errore
- Una raccolta di errori raggruppati in un messaggio più grande nella parte superiore della pagina
Assicurati di prestare attenzione alle opzioni di stato attivo della tastiera e di area dinamica ARIA quando annunci gli errori.
Ove possibile, offri all'utente un suggerimento dettagliato su come correggere l'errore. Sono disponibili due attributi per notificare agli utenti gli errori.
- Puoi utilizzare l'attributo HTML required. Il browser fornisce un messaggio di errore generico basato sui parametri di convalida del file.
- In alternativa, puoi utilizzare l'attributo aria-required per condividere un messaggio di errore personalizzato con le AT. Solo le AT ricevono questo messaggio, a meno che tu non aggiunga codice per rendere il messaggio visibile a tutti gli utenti.
Una volta che un utente ritiene di aver risolto tutti gli errori, consentigli di inviare nuovamente il modulo e di fornire feedback sui risultati dell'invio. Un messaggio di errore indica a un utente che deve apportare ulteriori aggiornamenti, mentre un messaggio di esito positivo conferma che ha risolto tutti gli errori e ha inviato correttamente il modulo.
Criteri di successo aggiuntivi
WCAG 2.2 ha introdotto i seguenti criteri di successo che si concentrano su esperienze di modulo più accessibili: