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 semplici, ad esempio un singolo campo o un elemento in più passaggi con più campi per pagina, convalida dell'input e, a volte, un CAPTCHA.
I moduli sono considerati uno degli elementi più difficili da ottenere dal punto di vista dell'accessibilità, in quanto richiedono la conoscenza di tutti gli elementi già trattati, oltre a regole aggiuntive specifiche solo per i moduli. Con un po' di tempo e comprensione, puoi creare un modulo accessibile adatto a te e ai tuoi utenti.
Moduli è l'ultimo modulo specifico di questo corso. Questo modulo si concentrerà sulle linee guida specifiche per i moduli, ma tutte le altre linee guida che hai appreso nei moduli precedenti, come la struttura dei contenuti, l'elemento attivo della tastiera e il contrasto dei colori, si applicano anche agli elementi del modulo.
Campi
La struttura portante dei moduli sono i campi. I campi sono piccoli pattern interattivi, ad esempio un elemento di input o un pulsante di opzione, che consentono agli utenti di inserire i contenuti o di scegliere. È disponibile un'ampia varietà di campi di moduli tra cui scegliere.
Il suggerimento per impostazione predefinita prevede l'utilizzo di pattern HTML consolidati invece di creare qualcosa di personalizzato con ARIA, poiché alcune funzionalità e funzionalità, come stati dei campi, proprietà e valori, sono integrate negli elementi HTML, mentre devi aggiungere manualmente ARIA personalizzati.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
Oltre a scegliere i pattern dei campi del modulo più accessibili, ove applicabile, dovresti anche aggiungere attributi di completamento automatico HTML ai tuoi campi. L'aggiunta di attributi di completamento automatico consente una definizione o identificazione dello scopo più granulare per gli user agent e le tecnologie per la disabilità.
Gli attributi di completamento automatico consentono agli utenti di personalizzare le presentazioni visive, ad esempio mostrando l'icona di una torta di compleanno in un campo con l'attributo di completamento automatico del compleanno (bday). Più in generale, gli attributi di completamento
automatico semplificano e velocizzano la compilazione dei moduli. Ciò è particolarmente utile per chi ha problemi cognitivi e della lettura e per chi fa uso di 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 stato attivo o 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 è attivo o quando un utente ha aggiunto contenuti al campo.
Etichette
Le etichette indicano a un utente lo scopo di un campo, se è obbligatorio, e possono anche fornire informazioni sui requisiti dei campi, 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 delle forme accessibili è stabilire una connessione chiara e accurata tra un campo e la sua etichetta. Questo vale sia a livello visivo sia programmatico. Senza questo contesto, l'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, come l'indirizzo postale, devono essere raggruppati visivamente e in modo programmatico. Un metodo è usare il pattern set di campi/legenda per raggruppare elementi simili.
Descriptions
Le descrizioni dei campi sono simili alle etichette per lo scopo, in quanto vengono utilizzate per fornire un maggiore contesto sul campo e sui requisiti. Le descrizioni dei campi non sono necessarie ai fini dell'accessibilità se le etichette o le istruzioni del modulo sono sufficientemente descrittive.
Tuttavia, esistono situazioni in cui l'aggiunta di informazioni aggiuntive è utile per evitare errori nel modulo, ad esempio l'inoltro di informazioni sulla lunghezza minima dell'input per un campo della password o l'indicazione a un utente del formato di calendario da utilizzare, ad esempio MM-GG-AAAA.
Esistono molti metodi diversi per aggiungere descrizioni dei campi ai moduli. Uno dei metodi migliori è aggiungere un attributo aria-describedby all'elemento del modulo oltre a un elemento <label>. Lo screen reader leggerà sia la descrizione che l'etichetta.
Se aggiungi l'attributo aria-labelledby all'elemento, il valore dell'attributo sostituisce il testo all'interno di <label>. Come sempre, assicurati di testare il codice finale con tutti gli AT che prevedi di supportare.
Errori
Quando crei moduli accessibili, puoi fare molte cose per impedire agli utenti di commettere errori nei moduli. In precedenza, in questo modulo abbiamo trattato chiaramente i campi di markup, la creazione di etichette identificative e l'aggiunta di descrizioni dettagliate, ove possibile. Indipendentemente da quanto pensi sia chiaro, alla fine un utente commetterà un errore.
Quando un utente riscontra un errore nel modulo, la prima cosa da fare è rendere noto l'errore. Il campo in cui si è verificato l'errore deve essere chiaramente identificato e l'errore stesso deve essere descritto in forma testuale all'utente.
Esistono diversi metodi per visualizzare i messaggi di errore, ad esempio:
- Una finestra modale popup, 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 all'obiettivo della tastiera e alle opzioni per le regioni in tempo reale ARIA quando annunci gli errori.
Se possibile, offri all'utente un suggerimento dettagliato su come correggere l'errore. Sono disponibili due attributi per segnalare agli utenti gli errori.
- Puoi utilizzare l'attributo HTML obbligatorio. Il browser fornirà un messaggio di errore generico in base ai parametri di convalida registrati.
- In alternativa, puoi utilizzare l'attributo aria-required per condividere un messaggio di errore personalizzato con ATs. Solo gli AT riceveranno il messaggio, a meno che tu non aggiunga altro codice per renderlo visibile a tutti gli utenti.
Quando un utente ritiene che tutti gli errori siano stati risolti, consentigli di inviare nuovamente il modulo e fornire un feedback sui risultati dell'invio. Un messaggio di errore indica a un utente che deve effettuare altri aggiornamenti, mentre un messaggio di operazione riuscita conferma che tutti gli errori sono stati risolti e che il modulo è stato inviato correttamente.
Verifica la tua comprensione
Verifica le tue conoscenze dei moduli accessibili
Quale delle seguenti risposte è l'input del modulo più accessibile?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>