Usa 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. Utilizza HTML significativo

Utilizza questi elementi creati per il job:

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

Come vedrai, questi elementi attivano le funzionalità del browser integrate, migliorano l'accessibilità e aggiungono significato al 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>

    A questo punto, il file index.html dovrebbe avere il seguente aspetto:

  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 del browser predefinito lo rende brutto e difficile da usare, soprattutto sui dispositivi mobili.

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

2. Progetta per dita e pollici

Regola i margini, i rientri e le dimensioni dei caratteri per assicurarti che i dati inseriti funzionino bene 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 il nuovo stile.

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

È 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 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 delle query sui media imposta le sostituzioni per le aree visibili di almeno 450 pixel di larghezza.

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?
  • I campi di immissione e il pulsante Accedi sono abbastanza grandi da poter essere utilizzati come touch target per i pollici?

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

Consenti al browser di memorizzare e compilare automaticamente i valori inseriti e di fornire l'accesso alle funzionalità di gestione delle password integrate.

  1. Aggiungi gli attributi al codice HTML del modulo in modo che 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.

    Notare come lo stato attivo si sposti 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 viene impostato lo stato attivo sull'etichetta o sull'input associato.

  3. Mettere a fuoco l'input email su un dispositivo mobile.

    Nota come la tastiera sia 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 archiviate sopra la tastiera. Tutto ciò accade perché l'attributo type="email" viene applicato a un elemento <input>.

    La tastiera predefinita per le email su iOS.

  4. Digita del 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. Metti a fuoco l'input email su un computer e digita del testo. Puoi vedere l'URL della tua app facendo clic su Schermo intero L&#39;icona Schermo intero. Se hai memorizzato indirizzi email nel browser, probabilmente visualizzerai una finestra di dialogo che ti consente di selezionarli tra le email memorizzate. 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 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

A questo punto, il file index.html dovrebbe avere il seguente aspetto:

4. Aggiungi un'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 vedere 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 un 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 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 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 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 al design dell'esperienza utente: gli utenti noteranno e comprenderanno l'opzione Mostra password? Esiste un modo migliore per fornire questa funzionalità? È un buon momento per provare i test di usabilità scontati 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 gratuitamente.

A questo punto il codice dovrebbe avere il seguente aspetto:

5. Aggiungi 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 dovresti anche utilizzare JavaScript per eseguire una convalida più rigorosa 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 per 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 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 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 mostra un avviso: non è richiesto 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 omesso un valore obbligatorio e imposta il focus sull'input della password.

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

  4. Prova diversi modi per aiutare gli utenti a inserire indirizzi email e password. I campi dei moduli per le password migliorati offrono alcuni suggerimenti intelligenti.

    A questo punto il codice dovrebbe avere il seguente aspetto:

Vai oltre

Non sono mostrate in questo codelab, ma sono comunque necessarie 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 tuoi documenti relativi a Termini di servizio e norme sulla privacy per consentire agli utenti di sapere in che modo tu salvaguardi 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 il rendimento e l'usabilità del design del tuo modulo.