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

Sam Dutton

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

1. Utilizzare codice HTML significativo

Utilizza questi elementi creati appositamente per il job:

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

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

  1. Fai clic su Remix per modificare il progetto.

  2. 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:

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

  4. Fai clic su Visualizza origine per tornare al codice sorgente.

2. Design per dita e pollici

Regola il padding, i margini e le dimensioni dei caratteri per assicurarti che gli input funzionino bene sui dispositivi mobili.

  1. Copia il seguente codice CSS e incollalo nel file style.css:

  2. Fai clic su Visualizza app per visualizzare il modulo di accesso appena stilizzato.

  3. Fai clic su Visualizza origine per tornare al file style.css.

È davvero tanto codice. Gli aspetti principali da tenere presenti sono le modifiche alle dimensioni:

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

Il selettore :invalid viene utilizzato per indicare quando un input ha un valore non valido. Questa opzione non è ancora disponibile.

Il layout CSS è mobile-first:

  • Il CSS predefinito è per le aree visibili con una larghezza inferiore a 450 pixel.
  • La sezione della media query imposta gli override per le aree visibili con una larghezza di almeno 450 pixel.

Quando crei un modulo come questo, è molto importante a questo punto della procedura testare il codice su dispositivi reali su computer e dispositivi mobili:

  • Il testo dell'etichetta e dell'input è leggibile, soprattutto per le persone ipovedenti?
  • I campi di input e il pulsante Accedi sono abbastanza grandi da essere utilizzati come touch target per i pollici?

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

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

  1. Aggiungi attributi al codice HTML del modulo in modo che risulti come segue:

    <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>

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

    Nota come lo stato attivo viene spostato sull'input email. Questo perché l'etichetta è associata all'input tramite l'attributo for="email". Gli screen reader annunciano anche il testo dell'etichetta quando l'etichetta o l'input associato all'etichetta riceve lo stato attivo.

  3. Concentrati sull'input dell'email su un dispositivo mobile.

    Nota come la tastiera è ottimizzata per digitare un indirizzo email. Ad esempio, i caratteri @ e . potrebbero essere visualizzati sulla tastiera principale e il sistema operativo potrebbe mostrare le email archiviate sopra la tastiera. Tutto questo accade perché l'attributo type="email" viene applicato a un elemento <input>.

    La tastiera email predefinita su iOS.

  4. Digita un testo nell'input della 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 per memorizzare i dati che possono essere utilizzati in un secondo momento per la compilazione automatica.
  1. Concentrati sull'input dell'email su un dispositivo desktop e digita del testo. Puoi visualizzare l'URL della tua app quando fai clic su Schermo intero L&#39;icona di Fullscreen. Se hai memorizzato degli indirizzi email nel browser, probabilmente vedrai una finestra di dialogo che ti consente di selezionarli. Ciò accade perché l'attributo autocomplete="username" è stato applicato all'input email.
  • autocomplete="username" e autocomplete="current-password" aiutano i browser a utilizzare i valori memorizzati per compilare automaticamente gli input.

Browser diversi utilizzano tecniche diverse per determinare il ruolo degli input dei moduli e fornire il completamento automatico per una serie di siti web diversi.

Aggiungi e rimuovi attributi per provare questa funzionalità.

È 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 gamma di piattaforme con BrowserStack, che è senza costi per i progetti open source. Prova

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

4. Aggiungi l'interfaccia utente 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 farlo, quindi devi implementarlo autonomamente con JavaScript.

Il codice per aggiungere questa funzionalità è semplice. Questo esempio utilizza il testo, non un'icona.

Aggiorna i file index.html, style.css e script.js come indicato di seguito.

  1. Aggiungi un pulsante di attivazione/disattivazione alla sezione della 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>

  2. Aggiungi il seguente CSS alla fine del 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 viene visualizzato come testo normale nell'angolo in alto a destra della sezione della password.

  3. Aggiungi il seguente JavaScript al file script.js per attivare/disattivare la visualizzazione della password e impostare il 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.');
  }
}

  4. Prova subito la logica di visualizzazione della password.

    1. Visualizza la tua app.

    2. Inserisci del testo nel campo della password.

    3. Fai clic su Mostra password.

  5. Ripeti il quarto passaggio su più browser su sistemi operativi diversi.

Pensa alla progettazione UX: gli utenti noteranno Mostra password e lo capiranno? Esiste un modo migliore per fornire questa funzionalità? Questo è il momento giusto per provare il test di usabilità scontato con un piccolo gruppo di amici o colleghi.

Per capire come funziona 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, non testo, per attivare/disattivare la visualizzazione della password. Al termine di questo codelab, implementa questa funzionalità con le immagini SVG. Material Design offre icone di alta qualità che puoi scaricare senza costi.

A questo punto, il codice dovrebbe avere questo aspetto:

5. Aggiungere la convalida del modulo

Puoi aiutare gli utenti a inserire correttamente i dati consentendo loro di convalidarli prima dell'invio del modulo e mostrando loro cosa devono modificare.

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

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

Comunica agli utenti i vincoli per le password e qualsiasi altro input. Non farli indovinare.

  1. Aggiorna la sezione della 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).

  1. Aggiungi il seguente CSS alla fine del file style.css:

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

  2. 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';
  }
}

  3. Prova

    Tutti i browser recenti dispongono di 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 mostra un avviso: non è necessario JavaScript.

    2. Inserisci un indirizzo email valido, ma poi fai clic su Accedi senza un valore di password. Il browser ti avvisa che hai omesso un valore obbligatorio e sposta il focus sull'input della password.

    3. Inserisci una password non valida e fai clic su Accedi. Ora vengono visualizzati messaggi diversi a seconda del problema.

  4. Prova diversi modi per aiutare gli utenti a inserire indirizzi email e password. Campi del modulo della password migliorati offre alcuni suggerimenti intelligenti.

    A questo punto, il codice dovrebbe avere questo aspetto:

Andare oltre

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

  • Aggiungi Hai dimenticato la password?, un pulsante che consente agli utenti di reimpostare facilmente le proprie password.

  • Fornisci un link ai documenti dei termini di servizio e delle norme sulla privacy in modo che gli utenti sappiano come proteggi i loro dati.

  • Considera 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à del design del modulo.