Questa pagina è stata tradotta dall'API Cloud Translation.

Usa le funzionalità del browser multipiattaforma per creare un modulo di accesso

Sam Dutton

Questo codelab ti insegna come creare un modulo di accesso che sia sicuro, accessibile e facile da usare.

1. Utilizza codice HTML significativo

Utilizza questi elementi creati per il lavoro:

<form>
<section>
<label>
<button>

Come noterai, questi elementi abilitano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.

Fai clic su Remix per modificare il progetto e renderlo modificabile.

Aggiungi il seguente codice all'elemento <body>:

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

Ecco come dovrebbe apparire il file index.html a questo punto:

Fai clic su Visualizza app per visualizzare l'anteprima del modulo di accesso. L'HTML che hai aggiunto è valido e corretto, ma lo stile predefinito del browser lo rende terribile e difficile da usare, soprattutto sui dispositivi mobili.
Fai clic su Visualizza sorgente per tornare al codice sorgente.

2. Progetta per dita e pollici

Regola la spaziatura interna, i margini e le dimensioni del carattere per assicurarti che i tuoi input funzionino correttamente sui dispositivi mobili.

Copia il seguente CSS e incollalo nel tuo file style.css:
Fai clic su Visualizza app per vedere il nuovo modulo di accesso.
Fai clic su Visualizza sorgente per tornare al file style.css.

Si tratta di un bel po' di codice. Gli aspetti principali da tenere presenti sono le modifiche alle dimensioni:

padding e margin vengono aggiunti agli input.
font-size è diverso per i dispositivi mobili e per i computer.

Il selettore :invalid viene utilizzato per indicare quando un input contiene un valore non valido. Questa opzione non funziona ancora.

Il layout CSS è incentrato sui dispositivi mobili:

Il CSS predefinito è per le aree visibili con larghezza inferiore a 450 pixel.
La sezione della query supporti imposta override per le aree visibili larghe almeno 450 pixel.

Quando crei un modulo come questo, è molto importante testare il codice su dispositivi reali su computer e dispositivi mobili.

Le etichette e il testo di input sono leggibili, soprattutto da persone ipovedenti?
Gli input e il pulsante Accedi sono abbastanza grandi da poter essere usati come touch target per i pollici?

3. Aggiungi attributi di input per attivare le funzionalità integrate del browser

Consente al browser di archiviare e compilare automaticamente i valori di input e di fornire l'accesso alle funzionalità integrate di gestione delle password.

Aggiungi attributi al codice HTML del modulo in modo che risulti come il seguente:

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

Visualizza di nuovo l'app e fai clic su Email.

Osserva come lo stato attivo si sposta sull'input dell'email. Questo perché l'etichetta è associata all'input tramite l'attributo for="email". Gli screen reader segnalano anche il testo dell'etichetta quando l'etichetta o l'input associato all'etichetta viene attivato.
Imposta lo stato attivo sull'input dell'email su un dispositivo mobile.

Osserva che la tastiera è ottimizzata per la digitazione di un indirizzo email. Ad esempio, i caratteri @ e . potrebbero essere visualizzati sulla tastiera principale e il sistema operativo potrebbe mostrare le email memorizzate sopra la tastiera. Tutto questo accade perché l'attributo type="email" viene applicato a un elemento <input>.
Digita del testo nella password.

Il testo è nascosto per impostazione predefinita perché all'elemento è stato applicato l'attributo type="password".

Gli attributi autocomplete, name, id e type aiutano i browser a comprendere il ruolo degli input al fine di archiviare dati che possono essere utilizzati in seguito per la compilazione automatica.

Imposta lo stato attivo sull'input dell'email su un computer e digita del testo. Puoi visualizzare l'URL della tua app facendo clic su Schermo intero . Se hai memorizzato indirizzi email nel browser, probabilmente visualizzerai una finestra di dialogo che ti consente di selezionare l'indirizzo email che hai memorizzato. Questo accade perché l'attributo autocomplete="username" è applicato all'input dell'email.

autocomplete="username" e autocomplete="current-password" consentono ai browser di usare i valori memorizzati per compilare automaticamente gli input.

Nota: per gli input email, utilizza autocomplete="username" perché username è riconosciuto dai gestori delle password nei browser moderni, anche se dovresti utilizzare type="email" e potresti voler usare id="email" e name="email".

I vari browser usano tecniche diverse per comprendere il ruolo degli input dei moduli e fornire la compilazione automatica per una serie di siti web diversi.

Aggiungi e rimuovi gli attributi per provare questa operazione.

È estremamente importante testare il comportamento su più piattaforme. Devi inserire i valori e inviare il modulo in browser diversi su dispositivi diversi. È facile eseguire test su una serie di piattaforme con BrowserStack, senza costi per i progetti open source. Prova.

Ecco come dovrebbe apparire il file index.html a questo punto:

4. Aggiungi UI per attivare/disattivare la visualizzazione della password

Gli esperti di usabilità consigliano vivamente di aggiungere un'icona o un pulsante che consenta agli utenti di visualizzare il testo inserito nel campo Password. Non esiste un modo integrato per eseguire questa operazione, pertanto devi implementarlo autonomamente con JavaScript.

Il codice per aggiungere questa funzionalità è semplice. In questo esempio viene utilizzato il testo, non un'icona.

Aggiorna i file index.html, style.css e script.js come segue.

Aggiungi un pulsante di attivazione/disattivazione alla sezione delle password nel file index.html:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Aggiungi il seguente CSS in fondo al file style.css:
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
In questo modo, il pulsante Mostra password appare in testo normale e viene visualizzato nell'angolo in alto a destra della sezione della password.

Aggiungi il seguente codice JavaScript al file script.js per attivare/disattivare la visualizzazione della password e imposta il valore aria-label appropriato:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Prova subito la logica di visualizzazione delle password.
1. Visualizza la tua app.
2. Inserisci del testo nel campo della password.
3. Fai clic su Mostra password.
Ripeti il quarto passaggio su più browser con sistemi operativi diversi.

Pensa al design dell'UX: gli utenti noteranno l'opzione Mostra password e la capiranno? Esiste un modo migliore per fornire questa funzionalità? È un buon momento per provare i test di usabilità con sconti con un piccolo gruppo di amici o colleghi.

Per comprendere il funzionamento di questa funzionalità per gli screen reader, installa l'estensione ChromeVox Classic e naviga nel modulo. I valori aria-label funzionano come previsto?

Alcuni siti web, come Gmail, utilizzano icone e non testo per attivare/disattivare la visualizzazione delle password. Al termine di questo codelab, implementalo con le immagini SVG. Material Design offre icone di alta qualità che puoi scaricare senza costi.

Ecco come dovrebbe apparire il codice a questo punto:

5. Aggiungi convalida modulo

Puoi aiutare gli utenti a inserire correttamente i propri dati quando permetti loro di convalidarli prima dell'invio del modulo e mostrare loro cosa devono modificare.

Gli elementi e gli attributi del modulo HTML hanno funzionalità integrate per la convalida di base, ma è consigliabile utilizzare JavaScript anche per eseguire una convalida più efficace mentre gli utenti inseriscono i dati e quando tentano di inviare il modulo.

Questo passaggio utilizza l'API Constraint Validation (ampiamente supportata) per aggiungere una convalida personalizzata con UI del browser integrata che imposta lo stato attivo e visualizza i prompt.

Indica agli utenti i vincoli relativi alle password e a eventuali altri input. Non farli indovinare!

Aggiorna la sezione delle password del file index.html:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Vengono aggiunte due nuove funzionalità:

Informazioni sui vincoli delle password
Un attributo aria-describedby per l'input della password (gli screen reader leggono il testo dell'etichetta, il tipo di input (password) e poi la descrizione).

Aggiungi il seguente CSS in fondo al file style.css:

div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

Aggiungi il seguente codice JavaScript al file script.js:

passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

Prova.

Tutti i browser recenti hanno funzionalità integrate per la convalida dei moduli e supportano la convalida con JavaScript.
1. Inserisci un indirizzo email non valido e fai clic su Accedi. Il browser visualizza un avviso, quindi non è necessario JavaScript.
2. Inserisci un indirizzo email valido, ma fai clic su Accedi senza un valore per la password. Il browser avvisa che manca un valore obbligatorio e imposta lo stato attivo sull'input della password.
3. Inserisci una password non valida e fai clic su Accedi. Ora vedrai messaggi diversi a seconda del problema.
Prova diversi metodi per aiutare gli utenti a inserire indirizzi email e password. Campi migliori dei moduli per le password offre alcuni suggerimenti intelligenti.

Ecco come dovrebbe apparire il codice a questo punto:

Vai oltre

Non vengono mostrate in questo codelab, ma hai comunque bisogno di queste quattro funzionalità fondamentali del modulo di accesso:

Aggiungi Hai dimenticato la password?, un pulsante che consente agli utenti di reimpostare facilmente le password.
Inserisci un link ai documenti dei Termini di servizio e delle norme sulla privacy per far sapere ai tuoi utenti come proteggi i loro dati.
Prendi in considerazione lo stile e il branding e assicurati che queste funzionalità aggiuntive corrispondano al resto del tuo sito web.
Aggiungi Analytics e RUM per testare e monitorare le prestazioni e l'usabilità della progettazione del modulo.