Il modulo che crei è per le persone. Le persone usano dispositivi diversi. Alcune usano un mouse, altre un dispositivo touch, altre la tastiera, altri un dispositivo controllato dai movimenti degli occhi. Alcune utilizzano uno screen reader, altre un piccolo schermo, altre un software per l'ingrandimento del testo. Tutti vogliono utilizzare il tuo modulo. Scopri come rendere il tuo modulo accessibile e utilizzabile per tutti.
Assicurati che gli utenti comprendano lo scopo di un campo del modulo
Puoi scegliere tra numerosi controlli del modulo.
Cos'hanno in comune tutte queste persone?
A ogni controllo modulo deve essere associato un elemento <label>.
L'elemento <label> descrive lo scopo di un controllo modulo.
Il testo <label> viene associato visivamente al controllo del modulo e viene letto dagli screen reader.
Inoltre, se tocchi o fai clic su <label> viene impostato il controllo modulo associato, che diventa un target più ampio.
Utilizza codice HTML significativo per accedere alle funzionalità integrate del browser
In teoria, è possibile creare un modulo utilizzando solo elementi <div>.
Puoi anche farlo sembrare un <form> nativo.
Qual è il problema di usare elementi
non semantici?
Gli elementi dei moduli integrati offrono molte funzionalità integrate. Vediamo un esempio.
Visivamente, <input> (il primo nell'esempio) e <div> hanno lo stesso aspetto.
Puoi anche inserire testo per entrambi, poiché <div> ha un
attributo contenteditable.
Tuttavia, esistono molte differenze tra l'utilizzo di un elemento <input> appropriato e un elemento <div>
che assomiglia a un <input>.
Un utente di screen reader non riconosce <div> come elemento di input
e non riesce a completare il modulo.
L'utente dello screen reader sente solo "Nome", senza alcuna indicazione che l'elemento sia un controllo modulo per l'aggiunta di testo.
Se fai clic su <div>Name</div>, l'elemento <div> associato non viene impostato, mentre <label> e <input> vengono collegati tramite gli attributi for e id.
Dopo aver inviato il modulo, i dati inseriti in <div> non vengono inclusi nella richiesta.
Sebbene sia possibile collegare i dati con JavaScript,
un <input> lo fa per impostazione predefinita.
Gli elementi dei moduli integrati hanno altre funzionalità.
Ad esempio, con gli elementi del modulo appropriati e i valori inputmode o type corretti,
una tastiera sullo schermo mostra i caratteri appropriati. Non puoi utilizzare l'attributo inputmode su una <div>.
Assicurati che gli utenti conoscano il formato dei dati previsto
È possibile definire varie regole di convalida per un controllo modulo.
Ad esempio, supponiamo che un campo del modulo debba sempre contenere almeno otto caratteri.
Utilizzi l'attributo minlength per indicare la regola di convalida ai browser.
Come puoi assicurarti che anche gli utenti siano a conoscenza della regola di convalida? Dillo a tutti.
Aggiungi informazioni sul formato previsto direttamente sotto il controllo modulo.
Per renderlo più chiaro per i dispositivi di assistenza, utilizza l'attributo aria-describedby nel controllo del modulo e un id con lo stesso valore nel messaggio di errore per collegare entrambi i dispositivi.
Aiuta gli utenti a trovare il messaggio di errore per un controllo modulo
In un modulo precedente sulla convalida, hai imparato a visualizzare i messaggi di errore in caso di inserimento di dati non validi.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Ad esempio, se un campo ha un attributo required e vengono inseriti dati non validi, il browser mostra un messaggio di errore accanto al controllo modulo quando viene inviato. Anche gli screen reader enunciano il messaggio di errore.
Puoi anche definire un messaggio di errore personalizzato:
Questo esempio richiede ulteriori modifiche per collegare il messaggio di errore al controllo modulo.
Un approccio semplice consiste nell'utilizzare l'attributo aria-describedby
nel controllo modulo che corrisponde a id nell'elemento del messaggio di errore.
Quindi, utilizza aria-live="assertive" per il messaggio di errore.
Le regioni dal vivo ARIA annunciano un errore agli utenti di screen reader nel momento in cui viene mostrato l'errore.
Il problema di questo approccio per i moduli con più campi è che aria-live di solito annuncia il primo errore solo nel caso di più errori.
Come spiegato in questo articolo relativo a più annunci aria-live relativi alla stessa azione, puoi creare un singolo messaggio concatenando tutti gli errori. Un altro approccio è annunciare la presenza di errori e poi i singoli errori quando il campo è attivo.
Assicurati che gli utenti riconoscano gli errori
A volte i designer colorano di rosso lo stato non valido,
usando la pseudo-classe :invalid.
Tuttavia, per comunicare un errore o un successo,
non dovresti mai fare affidamento solo sul colore.
Per le persone daltoniche rosso-verde,
un bordo verde e uno rosso hanno quasi lo stesso aspetto.
È impossibile capire se il messaggio è correlato a un errore.
Oltre al colore, utilizza un'icona o anteponi il tipo di errore ai messaggi.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Aiutare gli utenti a navigare nel modulo
Puoi modificare l'ordine visivo dei controlli dei moduli con CSS. Una disconnessione tra l'ordine visivo e la navigazione da tastiera (ordine DOM) è problematica per gli utenti di screen reader e tastiera.
Scopri di più su come assicurarti che l'ordine visivo della pagina segua l'ordine DOM.
Aiuta gli utenti a identificare il controllo modulo attualmente attivo
Usa la tastiera per consultare questo modulo.
Sapevi che lo stile dei controlli del modulo è cambiato una volta attivi?
Questo è lo stile di messa a fuoco predefinito.
Puoi eseguirne l'override con la pseudo-classe CSS :focus.
Indipendentemente dagli stili utilizzati in :focus, assicurati sempre che la differenza visiva tra lo stato predefinito e lo stato attivo sia riconoscibile.
Scopri di più sulla progettazione degli indicatori di interesse.
Assicurati che il modulo sia utilizzabile
Puoi identificare molti problemi comuni compilando il modulo con dispositivi diversi. Utilizza solo la tastiera, uno screen reader (come NVDA su Windows o VoiceOver su Mac) oppure ingrandisci la pagina al 200%. Testa sempre i moduli su diverse piattaforme, soprattutto su dispositivi o impostazioni che non usi tutti i giorni. Conosci qualcuno che usa uno screen reader o qualcuno che usa software per l'ingrandimento del testo? Chiedigli di compilare il modulo. Le revisioni di accessibilità sono fantastiche, eseguire test con utenti reali lo è ancora di più.
Scopri di più su come eseguire una revisione dell'accessibilità e su come eseguire test con utenti reali.