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

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

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

  1. Fai clic su Remixa 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. Il codice HTML che hai aggiunto è valido e corretto, ma lo stile predefinito del browser lo rende terribile e difficile da usare, soprattutto sui dispositivi mobili.

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

2. Progetta per dita e pollici

Regola spaziatura interna, margini e dimensioni dei caratteri per assicurarti che gli input funzionino correttamente sui dispositivi mobili.

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

  2. Fai clic su Visualizza app per visualizzare il modulo di accesso con lo stile aggiornato.

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

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

  • padding e margin sono stati aggiunti agli input.
  • font-size è diverso tra dispositivi mobili e computer.

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

Il layout CSS è incentrato sui dispositivi mobili:

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

Quando si crea un modulo simile a questo, è molto importante testare a questo punto il codice su dispositivi reali su computer e dispositivi mobili:

  • Le etichette e il testo di input sono leggibili, soprattutto per le persone ipovedenti?
  • Gli 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 archiviare e compilare automaticamente i valori di input e di fornire l'accesso alle funzionalità integrate di gestione delle password.

  1. Aggiungi attributi al codice HTML del modulo in modo che il codice abbia il seguente aspetto:

    <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 fai clic su Email.

    Nota 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 annunciano inoltre il testo dell'etichetta quando l'etichetta o l'input associato dell'etichetta viene attivato.

  3. Imposta lo stato attivo per l'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" è applicato a un elemento <input>.

    La tastiera email predefinita su iOS.

  4. Digita del testo nel campo 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 archiviare i dati che possono essere utilizzati in un secondo momento per la compilazione automatica.
  1. 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 Icona Schermo intero. Se hai memorizzato indirizzi email nel browser, probabilmente viene visualizzata una finestra di dialogo che ti consente di scegliere tra le email memorizzate. Questo accade perché l'attributo autocomplete="username" è applicato all'input dell'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 capire 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 in autonomia.

È estremamente importante testare il comportamento su più piattaforme. Devi inserire i valori e inviare il modulo in browser diversi su dispositivi diversi. È facile eseguire i test su una vasta gamma di piattaforme grazie a BrowserStack, che è 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 che inseriscono nel campo Password. Questa operazione non è integrata, perciò devi implementarla autonomamente con JavaScript.

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

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

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

  2. 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 assume l'aspetto di testo normale e viene visualizzato nell'angolo in alto a destra della sezione delle password.

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

  4. Prova ora 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 e sistemi operativi diversi.

Pensa alla progettazione dell'esperienza utente: gli utenti noteranno l'opzione Mostra password e la capiranno? Esiste un modo migliore per fornire questa funzionalità? È un buon momento per provare lo sconto test di usabilità 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 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 dati quando consenti 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 devi anche usare JavaScript per effettuare 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 mostra i prompt.

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

Verranno aggiunte due nuove funzionalità:

  • Informazioni sui vincoli relativi alle 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 in fondo al 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 hanno funzionalità integrate per la convalida dei moduli e la convalida con JavaScript.

    1. Inserisci un indirizzo email non valido e fai clic su Accedi. Il browser visualizza un avviso: non è necessario JavaScript.

    2. Inserisci un indirizzo email valido, ma poi fai clic su Accedi senza specificare un valore per la password. Il browser ti avvisa che hai tralasciato un valore obbligatorio e imposta lo stato attivo sull'inserimento 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 dei moduli per le password migliori offre alcuni suggerimenti intelligenti.

    Ecco come dovrebbe apparire il codice a questo punto:

Vai oltre

Non sono mostrati in questo codelab, ma ti servono comunque queste quattro funzionalità fondamentali per i moduli di accesso:

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

  • Link ai documenti relativi ai Termini di servizio e alle norme sulla privacy in modo che gli utenti sappiano 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 in modo da poter testare e monitorare le prestazioni e l'usabilità del design del tuo modulo.