Crea un modulo di accesso che segua le best practice

Utilizza le funzionalità del browser multipiattaforma per creare moduli di accesso sicuri, accessibili e facili da usare.

Se gli utenti devono accedere al tuo sito, è fondamentale progettare un buon modulo di accesso. Questo è particolarmente vero per le persone con connessioni scadenti, su dispositivi mobili, che hanno fretta o sono sotto stress. I moduli di accesso progettati male hanno frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe significare un cliente perso e un utente scontento, non solo un'opportunità di accesso mancata.

Come implementare

Di seguito sono riportate le linee guida più importanti per creare moduli di accesso efficaci.

Utilizza codice HTML valido e significativo

Sfrutta al meglio gli elementi e gli attributi creati per la creazione di moduli:

• <form>, <input>, <label> e <button>
• type, autocomplete e inputmode

Questi attributi attivano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.

Utilizza l'elemento <label> per etichettare i campi del modulo per l'inserimento dei dati

Per etichettare un elemento <input>, <select> o <textarea>, utilizza un elemento <label>. Associa un'etichetta a un input assegnando all'attributo for dell'etichetta lo stesso valore dell'attributo id dell'input.

Sfrutta al massimo gli attributi HTML

Semplifica l'inserimento dei dati da parte degli utenti utilizzando l'attributo <type> dell'elemento <input> appropriato per fornire la tastiera corretta sui dispositivi mobili e attivare la convalida di base integrata nel browser.

Utilizza sempre type="email" per gli indirizzi email e type="tel" per i numeri di telefono.

Ogni elemento <input>, <select> e <textarea> DOVREBBE avere un attributo autocomplete appropriato per migliorare l'accessibilità e aiutare gli utenti a evitare di reinserire i dati.

Gli input di nome utente ed email contengono identificatori, non testo. Aggiungi spellcheck="false" in modo che il browser non li riscriva in un formato non corrispondente all'account. autocorrect e autocapitalize sono sempre disattivati per input type="email", ma sono obbligatori per i nomi utente non email.

Crea pulsanti utili

Utilizza <button> per i pulsanti. Puoi anche utilizzare <input type="submit">, ma non utilizzare div o un altro elemento casuale che funge da pulsante. Gli elementi dei pulsanti forniscono un comportamento accessibile, una funzionalità di invio dei moduli integrata e possono essere facilmente personalizzati.

Assegna a ogni pulsante di invio del modulo un valore che ne descriva la funzione. Utilizza un'etichetta chiara e riconoscibile. Ad esempio, utilizza Accedi anziché Continua o Invia.

Se possibile, utilizza un unico campo per il nome

Consenti agli utenti di inserire il proprio nome utilizzando un unico campo di immissione, a meno che tu non abbia un buon motivo per memorizzare separatamente nomi, cognomi, titoli onorifici o altre parti del nome. L'utilizzo di un unico campo per il nome rende i moduli meno complessi, consente il taglia e incolla e semplifica la compilazione automatica.

Consenti nomi internazionali. Per la convalida, evita di utilizzare espressioni regolari che corrispondono solo ai caratteri latini. Solo caratteri latini esclude gli utenti con nomi o indirizzi che includono caratteri non presenti nell'alfabeto latino. Consenti invece la corrispondenza delle lettere Unicode e assicurati che il tuo backend supporti Unicode in modo sicuro sia come input che come output. Unicode nelle espressioni regolari è ben supportato dai browser moderni.

Mostra l'avanzamento dell'accesso

Per ogni passaggio verso l'accesso, utilizza intestazioni di pagina e valori descrittivi dei pulsanti che chiariscano cosa deve essere fatto ora e qual è il passaggio successivo.

Utilizza l'attributo enterkeyhint sugli input dei moduli per impostare l'etichetta del tasto Invio della tastiera mobile. Ad esempio, utilizza enterkeyhint="previous" e enterkeyhint="next" all'interno di un modulo di più pagine, enterkeyhint="done" per l'input finale nel modulo e enterkeyhint="search" per un input di ricerca.

Aiuta gli utenti a evitare di reinserire i dati di accesso

Assicurati di aggiungere i valori autocomplete appropriati nei moduli di accesso.

In questo modo, i browser possono aiutare gli utenti memorizzando in modo sicuro i dati di accesso e inserendo correttamente i dati dei moduli. Senza la compilazione automatica, gli utenti potrebbero essere più propensi a conservare un registro fisico dei dettagli di accesso o ad archiviare i dati di accesso in modo non sicuro sul proprio dispositivo.

Convalida attentamente

Convalida l'inserimento dei dati sia in tempo reale sia prima dell'invio del modulo. Utilizza type="email" per gli input email: il browser convaliderà automaticamente il formato. Aggiungi l'attributo required ai campi obbligatori per impedire l'invio di moduli vuoti.

Inserisci l'accesso nel relativo elemento <form>

Utilizza sempre l'elemento <form> quando chiedi agli utenti di inserire dati

Non inserire gli input in un <div> e gestisci l'invio dei dati di input esclusivamente con JavaScript. In genere è meglio utilizzare un elemento <form>. In questo modo, il tuo sito è accessibile agli screen reader e ad altri dispositivi di assistenza, viene abilitata una serie di funzionalità integrate del browser, è più semplice creare un accesso funzionale di base per i browser meno recenti e il sito può continuare a funzionare anche se JavaScript non funziona.

Non raddoppiare gli input

Alcuni siti obbligano gli utenti a inserire due volte l'indirizzo email o la password. Questo potrebbe ridurre gli errori per alcuni utenti, ma comporta un lavoro aggiuntivo per tutti gli utenti e aumenta i tassi di abbandono. Inoltre, chiedere due volte non ha senso quando i browser compilano automaticamente gli indirizzi email o suggeriscono password efficaci. È meglio consentire agli utenti di confermare il proprio indirizzo email (dovrai farlo comunque) e semplificare la reimpostazione della password, se necessario.

Mantieni private le password, ma consenti agli utenti di visualizzarle se lo desiderano

Gli input delle password devono avere type="password" per nascondere il testo della password e aiutare il browser a capire che l'input è per le password. (Tieni presente che i browser utilizzano una serie di tecniche per comprendere i ruoli di input e decidere se offrire o meno la possibilità di salvare le password.)

Dovresti aggiungere un pulsante di attivazione/disattivazione Mostra password per consentire agli utenti di controllare il testo inserito e non dimenticare di aggiungere un link Password dimenticata.

Fornisci agli utenti di dispositivi mobili la tastiera giusta

Utilizza <input type="email"> per fornire agli utenti di dispositivi mobili una tastiera appropriata e attivare la convalida di base degli indirizzi email integrata nel browser… senza bisogno di JavaScript.

Se devi utilizzare un numero di telefono anziché un indirizzo email, <input type="tel"> attiva una tastiera telefonica sui dispositivi mobili. Se necessario, puoi anche utilizzare l'attributo inputmode: inputmode="numeric" è ideale per i PIN.

Impedisci alla tastiera mobile di ostruire il pulsante Accedi

Se non fai attenzione, le tastiere mobile potrebbero coprire il modulo o, peggio, ostruire parzialmente il pulsante Accedi. Gli utenti potrebbero arrendersi prima di capire cosa è successo.

Se possibile, evita questo problema mostrando solo i campi di immissione dell'indirizzo email (o del numero di telefono) e della password e il pulsante Accedi nella parte superiore della pagina di accesso. Inserisci altri contenuti sotto.

Aiuta gli utenti a evitare di reinserire i dati

Puoi aiutare i browser a memorizzare i dati correttamente e a compilare automaticamente gli input, in modo che gli utenti non debbano ricordarsi di inserire i valori di email e password. Questo è particolarmente importante sui dispositivi mobili e fondamentale per gli input email, che registrano tassi di abbandono elevati. Ci sono due parti:

1. Gli attributi autocomplete, name, id e type aiutano i browser a comprendere il ruolo degli input per archiviare i dati che possono essere utilizzati in un secondo momento per la compilazione automatica. Per consentire la memorizzazione dei dati per la compilazione automatica, i browser moderni richiedono anche che gli input abbiano un valore name o id stabile (non generato in modo casuale a ogni caricamento pagina o deployment del sito) e che si trovino in un elemento <form> con un pulsante submit.
2. L'attributo autocomplete aiuta i browser a compilare automaticamente gli input utilizzando i dati memorizzati.

Per gli input email, utilizza autocomplete="username", poiché username viene riconosciuto dai gestori delle password nei browser moderni, anche se dovresti utilizzare type="email" e potresti voler utilizzare id="email" e name="email". Per gli input delle password, utilizza il valore autocomplete appropriato per aiutare i browser a distinguere tra password nuove e attuali.

Utilizza autocomplete="current-password" per una password esistente

OBBLIGATORIO: utilizza autocomplete="current-password" per l'inserimento della password in un modulo di accesso. In questo modo, il browser utilizzerà la password corrente memorizzata per il sito.

Per un modulo di accesso:

<input type="password" autocomplete="current-password" id="current-password" …>

Consenti al browser di suggerire una password efficace

I browser moderni utilizzano l'euristica per decidere quando mostrare l'interfaccia utente del gestore delle password e suggerire una password efficace.

I generatori di password integrati nel browser evitano a utenti e sviluppatori di dover capire cosa sia una "password efficace". Poiché i browser possono archiviare le password in modo sicuro e compilarle automaticamente quando necessario, gli utenti non devono ricordare o inserire le password. Incoraggiare gli utenti a utilizzare i generatori di password integrati nel browser significa anche che è più probabile che utilizzino una password efficace e univoca sul tuo sito e meno probabile che riutilizzino una password che potrebbe essere compromessa altrove.

Aiuta gli utenti a non perdere accidentalmente gli input

OBBLIGATORIO: aggiungi l'attributo required ai campi dell'indirizzo email e della password. I browser moderni richiedono e impostano automaticamente lo stato attivo per i dati mancanti.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

Consenti di incollare la password

Alcuni siti non consentono di incollare il testo negli input delle password.

Non consentire l'incollatura delle password infastidisce gli utenti, incoraggia l'uso di password facili da ricordare (e quindi più facili da compromettere) e, secondo organizzazioni come il National Cyber Security Centre del Regno Unito, potrebbe effettivamente ridurre la sicurezza. Gli utenti si rendono conto che l'incollatura non è consentita solo dopo aver provato a incollare la password, quindi non consentire l'incollatura della password non evita le vulnerabilità degli appunti.

Strategie di riserva

La compilazione automatica è un potenziamento progressivo. Nei browser che non supportano la compilazione automatica, gli utenti dovranno semplicemente inserire manualmente le proprie credenziali di accesso. I vincoli HTML semantici (come type, inputmode e required) continueranno a funzionare correttamente per convalidare l'input dell'utente e fornire le tastiere virtuali corrette.