Test dei moduli su più dispositivi e piattaforme

Puoi compilare un modulo in molti modi. Le persone potrebbero usare il modulo sullo smartphone mentre sono su un autobus affollato, con uno screen reader o su un vecchio laptop. Vediamo come puoi assicurarti che il modulo funzioni su dispositivi diversi e in contesti differenti.

Assicurati che il modulo funzioni per gli utenti che usano la tastiera

Un buon primo test per assicurarti 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

Prova. Usa il tasto tab per andare all'input. Il testo appare quando l'input è attivo? Questo è l'indicatore di messa a fuoco. Puoi aggiungere indicatori di stato attivo utilizzando la pseudo-classe CSS :focus.

input:focus {
  outline: 4px solid #222;
}

Scopri di più sulla progettazione di indicatori di interesse accessibili.

Aiutare gli utenti a navigare nel modulo

Un altro buon test di usabilità e accessibilità è quello di garantire che l'ordine logico delle schede segua l'ordine delle schede visive. Come puoi testare l'ordine delle schede? Premi Tab per scorrere tutto il modulo. Noti dei salti illogici? Assicurati che l'ordine del DOM corrisponda all'ordine visivo.

Scopri di più su come garantire che l'ordine visivo nella pagina segua l'ordine DOM.

Aiuta gli utenti a completare il modulo sui dispositivi touch

Bene. Hai verificato che il modulo funzioni con la tastiera. Ora vediamo come fare per assicurarvi che funzioni anche sui dispositivi touch come i cellulari.

Apri il modulo sul dispositivo touch, compila tutti i campi e invialo. Hai dovuto toccare più volte per selezionare un controllo modulo? Il problema potrebbe essere dovuto a un'area tocco troppo piccola. Assicurati che le dimensioni del target del tocco di un pulsante siano di almeno 48 px e che <input> e <select> siano sufficientemente grandi da essere accessibili. Inoltre, puoi aiutare gli utenti a navigare nel modulo sui dispositivi touch aggiungendo una quantità sufficiente di spazio tra i controlli del modulo.

Assicurati che gli utenti abbiano una tastiera ottimizzata

Nei moduli precedenti hai imparato ad attivare una tastiera sullo schermo diversa utilizzando gli attributi type o inputmode.

Apri la demo sullo smartphone 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 che potrebbero essere necessari per un numero di telefono. Usa type="tel" per avere una tastiera sullo schermo ottimizzata per l'inserimento di numeri di telefono.

Due screenshot di un elemento di input con type=&#39;tel&#39; su iOS e Android, che mostrano come l&#39;attributo type cambia la tastiera sullo schermo.

Usa un telefono per provare a utilizzare il servizio e vedi se riesci a inserire facilmente tutti i caratteri necessari per inserire un numero di telefono. Se ti interessa sapere come funziona la tastiera sullo schermo per un altro type, prova type="email" nella demo.

Assicurati che i pulsanti del modulo non siano nascosti

Immagina di aver compilato un modulo lungo e di essere pronto a inviarlo. Dove si trova il pulsante Invia? Potrebbe trovarsi dietro la barra degli strumenti del browser, che si trova nella parte inferiore dello schermo. Un modo per assicurarsi che i pulsanti siano visibili consiste nell'utilizzare la funzione CSS env(). Scopri come assicurarti che i pulsanti non siano oscurati dalle interfacce utente del dispositivo.

Assicurati che il modulo funzioni su diverse piattaforme

Prova a testare i moduli sul maggior numero possibile di dispositivi. Hai un vecchio laptop? Apri il browser predefinito e testa il modulo. Il tuo amico ha un tablet? Prendi in prestito e testa il modulo anche lì.

Alcuni stili hanno un aspetto diverso in un browser? In uno dei moduli successivi, scoprirai come assicurarti che i tuoi stili funzionino su più piattaforme.

BrowserStack offre account di test senza costi per progetti open source e Browserling offre una prova senza costi per testare diversi browser, dispositivi e sistemi operativi.

Aiuta gli utenti a completare i moduli in contesti diversi

Le persone non utilizzano diversi browser, dispositivi e sistemi operativi. Le persone utilizzano i tuoi moduli anche in contesti diversi. Dalle un'occhiata. Il sole splende fuori in questo momento? Porta il tuo smartphone all'aperto. Utilizzare il modulo in condizioni di luce intensa è un buon modo per verificare se i rapporti di contrasto sono utilizzabili.

Scopri di più sull'accessibilità di colori e contrasto.

Assicurati che il modulo funzioni con una scarsa connettività

Supponiamo che tu stia viaggiando da qualche parte con il treno. Apri una pagina web sul telefono. Ti chiedi quanto può volerci così tanto tempo per caricare un sito web ?[

Puoi simulare connessioni lente e diversi tipi di rete con WebPageTest o DevTools.

Scopri di più sui test con larghezza di banda bassa e latenza elevata.

Aiuta gli utenti a utilizzare il modulo ovunque si trovino

Immagina di andare a un appuntamento a piedi. All'improvviso il telefono squilla, rispondi alla chiamata e allo stesso tempo ricevi un avviso dalla tua compagnia assicurativa che ti invita a compilare il modulo di richiesta che hai avviato. Apri il modulo e prova a compilarlo mentre cammini e parli.

Ricorda che le persone utilizzeranno i tuoi moduli in molti contesti diversi. In situazioni stressanti, mentre si svolgono altre attività, ovunque si trovino. Puoi aiutare gli utenti assicurandoti che il modulo sia facile da usare.

Prova a impostare un limite di tempo per completare il modulo. Prova a simulare condizioni imperfette in cui puoi testare il modulo.

Assicurati di condividere i risultati del test

Documenta tutti i test e condividi i risultati con il tuo team. In questo modo sarà più facile definire le priorità delle attività e garantire che tutti i membri del team siano a conoscenza delle attività più importanti.

Scopri di più sulla condivisione dei risultati dei test.

Verifica le tue conoscenze

Verifica le tue conoscenze dei test multipiattaforma

Puoi mostrare gli indicatori di messa a fuoco solo agli utenti che utilizzano la tastiera?

No
Riprova.
Sì, utilizzando :focus-visible.
🎉
Sì, utilizzando :focus-detected.
Riprova.
Sì, utilizzando :focus-shown.
Riprova.

Risorse