Puoi compilare un modulo in diversi modi. Le persone potrebbero utilizzare il modulo sullo smartphone mentre si trovano in autobus affollato con uno screen reader o con un vecchio laptop. Vediamo come assicurarti che il modulo funzioni su dispositivi diversi e in contesti diversi.
Assicurati che il modulo funzioni per gli utenti della tastiera
Un primo test efficace per verificare che il modulo sia accessibile consiste nel compilare il modulo utilizzando solo la tastiera.
Apri il modulo e prova a navigare con il tasto tab.
È chiaro quale campo del modulo è attualmente attivo?
Per aiutare gli utenti a capire quale campo del modulo è attivo,
puoi usare gli indicatori di messa a fuoco.
Prova.
Usa il tasto tab per andare all'input.
Il contorno appare quando l'input è attivo?
È l'indicatore di messa a fuoco.
Puoi aggiungere indicatori di messa a fuoco utilizzando
:focus Pseudo-classe CSS.
input:focus {
outline: 4px solid #222;
}
Scopri di più su progettare indicatori di priorità accessibili.
Aiutare gli utenti a navigare nel modulo
Un altro buon test di usabilità e accessibilità consiste nel garantire che l'ordine delle schede logiche segua l'ordine delle schede visive. Come puoi testare l'ordine delle schede? Utilizza il tasto Tab per completare il modulo. Noti salti nella navigazione illogici? Assicurati che l'ordine DOM corrisponda all'ordine visivo.
Scopri di più su come garantire che l'ordine visivo nella pagina segua l'ordine DOM.
Aiutare gli utenti a completare il modulo sui dispositivi touch
Bene. Hai verificato che il modulo funzioni con la tastiera. Vediamo come assicurarsi che funzioni anche sui dispositivi touch come i telefoni cellulari.
Apri il modulo sul dispositivo touch
compila tutti i campi e invia il modulo.
Hai dovuto toccare più volte per selezionare un controllo del modulo?
Il problema potrebbe essere che le aree tocco sono troppo piccole.
Assicurati che
la dimensione target del tocco di un pulsante sia di almeno 48 px,
e che ogni <input> e <select> sia abbastanza grande da poter essere sfruttato.
Puoi anche aiutare gli utenti a navigare nel modulo sui dispositivi touch aggiungendo una spaziatura sufficiente tra i controlli del modulo.
Assicurati che gli utenti dispongano di una tastiera ottimizzata
Nei moduli precedenti hai imparato ad attivare una tastiera sullo schermo diversa
utilizzando gli attributi type o inputmode.
Aperto
la demo
sul tuo telefono e tocca il campo del numero di telefono.
Tieni presente che i numeri vengono mostrati
per impostazione predefinita sulla tastiera sullo schermo,
insieme ad altri caratteri necessari per il numero di telefono.
Usa type="tel" per visualizzare una tastiera sullo schermo ottimizzata per l'inserimento di numeri di telefono.