Moduli

Un modulo è un elemento che consente a un utente di inserire dati in un campo o un gruppo di campi. I moduli possono essere anche di un singolo campo o complicati come elemento modulo 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 dell'accessibilità, in quanto richiedono la conoscenza di tutti gli elementi già trattati, nonché regole aggiuntive specifiche solo per i moduli. Con alcuni comprensione e tempo, puoi creare un modulo accessibile adatto a te e al tuo utenti.

Moduli è l'ultimo modulo specifico dei componenti di questo corso. In questo modulo concentrati sulle linee guida specifiche per il modulo, ma su tutte le altre linee guida che hai appreso nei moduli precedenti, come struttura dei contenuti, l'elemento attivo della tastiera e contrasto di colore, si applica anche alla forma elementi.

Campi

I campi sono il fulcro dei moduli. I campi sono piccoli pattern interattivi, un elemento di pulsante di input o di opzione, che consente agli utenti di inserire contenuti o scelta. Esiste un'ampia varietà di campi dei moduli per scegli.

Per impostazione predefinita, è consigliabile utilizzare pattern HTML stabiliti creando qualcosa di personalizzato con ARIA, come alcune funzionalità funzionalità, come stati dei campi, proprietà e valori, sono intrinsecamente integrati negli elementi HTML, mentre devi aggiungere manualmente gli elementi ARIA personalizzati.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

Oltre a scegliere i pattern dei campi dei moduli più accessibili, dove applicabile, devi anche aggiungere Attributi di completamento automatico HTML ai tuoi campi. L'aggiunta di attributi di completamento automatico consente definizione o identificazione dello scopo agli user agent e alle tecnologie per la disabilità.

Gli attributi di completamento automatico consentono di personalizzare presentazioni ad esempio mostrando l'icona di una torta di compleanno in un campo con il completamento automatico del compleanno (bday) assegnato. Più in generale, gli attributi di completamento automatico e la compilazione dei moduli in modo più semplice e veloce. Ciò è particolarmente utile per le persone con disturbi cognitivi e della lettura e coloro che usano AT, come lo schermo lettori.

<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 elemento attivo o input dell'utente, a meno che l'utente non abbia ricevuto un avviso relativo al comportamento prima utilizzando il componente. Ad esempio, un modulo non deve essere inviato automaticamente quando un campo diventa lo stato attivo o quando un utente vi ha aggiunto contenuti.

Etichette

Le etichette informano un utente sullo scopo di un campo, se il campo è obbligatorio. e può anche fornire informazioni sui requisiti dei campi, come formato. Le etichette devono essere sempre visibili e descrivere con precisione il modulo per gli utenti.

Uno dei principi fondamentali delle forme accessibili è stabilire un piano una connessione accurata tra un campo e la relativa etichetta. Questo è vero sia visivamente e in modo programmatico. Senza questo contesto, un utente potrebbe non capire come compilate 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 dei moduli correlati, ad esempio l'indirizzo postale, devono essere in modo programmatico e visivamente raggruppate. Un metodo è utilizzare il set di campi/legge per raggruppare elementi simili.

Descrizioni

Le descrizioni dei campi sono simili alle etichette nello scopo in quanto sono utilizzate per fornire maggiore contesto sul campo e sui requisiti. Le descrizioni dei campi non sono obbligatoria per l'accessibilità se le etichette o le istruzioni del modulo sono descrittive abbastanza.

Tuttavia, in alcune situazioni è utile aggiungere altre informazioni. per evitare errori nel modulo, ad esempio l'inoltro di informazioni sulla lunghezza minima dei per un campo per la password o indicare all'utente quale formato di calendario utilizzare (ad esempio nel formato MM-GG-AAAA).

Esistono molti metodi diversi per aggiungere descrizioni dei campi moduli. Uno dei metodi migliori è aggiungere aria-describedby all'elemento modulo, oltre a un elemento <label>. Lo schermo leggerà sia la descrizione che l'etichetta.

Se aggiungi il parametro aria-labelledby all'elemento, il valore dell'attributo sostituisce il testo all'interno dell'attributo <label>. Come sempre, assicurati di testare il codice finale con tutti gli AT che l'IA ha in mente di supportare.

Errori

Quando crei moduli accessibili, puoi fare molte cose per impedire agli utenti di commettere errori nel modulo. In precedenza in questo modulo abbiamo parlato in modo chiaro del markup creare etichette di identificazione e aggiungere descrizioni dettagliate ogni volta possibile. Indipendentemente da quanto pensi sia chiaro che il modulo è, 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 deve essere descritta all'utente in un testo.

Esistono diversi metodi per visualizzare gli errori messaggi, 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'elemento attivo della tastiera. e opzioni per le regioni live ARIA quando vengono annunciati gli errori.

Se possibile, offri all'utente un suggerimento dettagliato su come correggere . Gli attributi disponibili per segnalare gli errori agli utenti sono due.

• Puoi utilizzare l'attributo HTML required. Il browser fornirà un messaggio di errore generico in base ai parametri di convalida inseriti.
• In alternativa, puoi utilizzare l'attributo aria-required per condividere un messaggio di errore personalizzato con gli AT. Riceveranno il messaggio solo gli AT, a meno che tu non aggiunga ulteriore codice per renderlo visibile a tutti gli utenti.

Quando un utente ritiene che tutti gli errori siano stati risolti, consentigli di inviare di nuovo il modulo e fornire un feedback sui risultati dell'invio. Errore comunica a un utente che hanno altri aggiornamenti da apportare, mentre un messaggio conferma di aver risolto tutti gli errori e di aver inviato il modulo.

Verifica le tue conoscenze

Verifica le tue conoscenze dei moduli accessibili