Usar funciones de navegador multiplataforma para crear un formulario de acceso

Sam Dutton

En este codelab, aprenderás a compilar un formulario de acceso que sea seguro, accesible y fácil de usar.

1. Usa código HTML significativo.

Usa estos elementos creados para el trabajo:

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

Como verás, estos elementos habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado a tu lenguaje de marcado.

  1. Haz clic en Remix para editar y que el proyecto se pueda editar.

  2. Agrega el siguiente código al 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>

    El archivo index.html debería verse de la siguiente manera:

  3. Haz clic en Ver aplicación para obtener una vista previa del formulario de acceso. El código HTML que agregaste es válido y correcto, pero el estilo de navegador predeterminado hace que se vea mal y difícil de usar, especialmente en dispositivos móviles.

  4. Haz clic en Ver fuente para regresar a tu código fuente.

2. Diseño para dedos y pulgares

Ajusta el padding, los márgenes y los tamaños de fuente para garantizar que tus entradas funcionen bien en dispositivos móviles.

  1. Copia el siguiente CSS y pégalo en tu archivo style.css:

  2. Haz clic en Ver aplicación para ver el formulario de acceso con el nuevo diseño.

  3. Haz clic en View Source para regresar al archivo style.css.

Hay mucho código. Los aspectos principales que debes tener en cuenta son los cambios en los tamaños:

  • padding y margin se agregaron a las entradas.
  • font-size es diferente para dispositivos móviles y computadoras de escritorio.

El selector :invalid se usa para indicar cuándo una entrada tiene un valor no válido. Esto aún no funciona.

El diseño CSS prioriza los dispositivos móviles:

  • El CSS predeterminado es para ventanas gráficas de menos de 450 píxeles de ancho.
  • La sección de consultas de medios configura anulaciones para viewports que tengan al menos 450 píxeles de ancho.

Cuando compiles tu propio formulario de esta manera, es muy importante en este punto del proceso que pruebes tu código en dispositivos reales en computadoras de escritorio y dispositivos móviles:

  • ¿El texto de las etiquetas y la entrada es legible, especialmente para las personas con baja visión?
  • ¿Las entradas y el botón Acceder son lo suficientemente grandes como para usarlos como objetivos táctiles para los pulgares?

3. Agrega atributos de entrada para habilitar las funciones integradas del navegador

Habilita el navegador para almacenar y autocompletar valores de entrada, y proporcionar acceso a las funciones integradas de administración de contraseñas.

  1. Agrega atributos al código HTML del formulario para que se vea así:

    <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. Vuelve a visualizar tu app y haz clic en Correo electrónico.

    Observa cómo se mueve el enfoque a la entrada del correo electrónico. Esto se debe a que la etiqueta está asociada con la entrada a través del atributo for="email". Los lectores de pantalla también anuncian el texto de la etiqueta cuando esta o su entrada asociada se enfocan.

  3. Enfoca la entrada de correo electrónico en un dispositivo móvil.

    Observa cómo se optimizó el teclado para escribir una dirección de correo electrónico. Por ejemplo, los caracteres @ y . podrían mostrarse en el teclado principal, y el sistema operativo podría mostrar los correos electrónicos almacenados sobre el teclado. Todo esto sucede porque el atributo type="email" se aplica a un elemento <input>.

    Es el teclado de correo electrónico predeterminado en iOS.

  4. Escribe algo de texto en la entrada de la contraseña.

    El texto está oculto de forma predeterminada porque se aplicó el atributo type="password" al elemento.

  • Los atributos autocomplete, name, id y type ayudan a los navegadores a comprender la función de las entradas a fin de almacenar datos que se pueden usar más adelante para el autocompletado.
  1. Enfoca la entrada de correo electrónico en un dispositivo de escritorio y escribe algo de texto. Para ver la URL de la app, haz clic en Pantalla completa Ícono de Pantalla completa. Si almacenaste direcciones de correo electrónico en tu navegador, probablemente veas un diálogo que te permite seleccionar de esos correos electrónicos almacenados. Esto sucede porque el atributo autocomplete="username" se aplica a la entrada de correo electrónico.
  • autocomplete="username" y autocomplete="current-password" ayudan a los navegadores a usar valores almacenados para autocompletar las entradas.

Los navegadores usan diferentes técnicas para determinar la función de las entradas de formularios y proporcionar el autocompletado para una variedad de sitios web diferentes.

Agrega y quita atributos para probarlos por tu cuenta.

Es extremadamente importante probar el comportamiento en todas las plataformas. Debes ingresar valores y enviar el formulario en distintos navegadores y dispositivos. Es fácil realizar pruebas en una variedad de plataformas con BrowserStack, que es gratis para proyectos de código abierto. Pruébala

El archivo index.html debería verse de la siguiente manera:

4. Agrega una IU para activar o desactivar la visualización de contraseñas

Los expertos en usabilidad recomiendan enfáticamente agregar un ícono o botón que permita a los usuarios ver el texto que ingresan en el campo Contraseña. No hay una forma integrada de hacer esto, por lo que debes implementarlo con JavaScript.

El código para agregar esta funcionalidad es sencillo. En este ejemplo, se usa texto, no un ícono.

Actualiza los archivos index.html, style.css y script.js de la siguiente manera.

  1. Agrega un botón de activación a la sección de contraseñas en el archivo 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. Agrega el siguiente CSS al final del archivo style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    De esta manera, el botón Mostrar contraseña se verá como texto sin formato y se mostrará en la esquina superior derecha de la sección de contraseñas.

  3. Agrega el siguiente JavaScript al archivo script.js para activar o desactivar la visualización de la contraseña y establecer el aria-label adecuado:

    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. Prueba ahora la lógica Mostrar la contraseña.

    1. Visualiza tu app.

    2. Ingresa texto en el campo de la contraseña.

    3. Haz clic en Mostrar contraseña.

  5. Repite el cuarto paso en varios navegadores y sistemas operativos diferentes.

Piensa en el diseño de UX: ¿los usuarios verán la opción Mostrar contraseña y la entenderán? ¿Hay una mejor manera de proporcionar esta funcionalidad? Este es un buen momento para probar las pruebas de usabilidad de descuento con un pequeño grupo de amigos o colegas.

Para comprender cómo funciona esta funcionalidad en los lectores de pantalla, instala la extensión clásica de ChromeVox y navega por el formulario. ¿Los valores de aria-label funcionan según lo previsto?

Algunos sitios web, como Gmail, usan íconos (no texto) para activar o desactivar la visualización de las contraseñas. Cuando termines este codelab, impleméntalo con imágenes SVG. Material Design ofrece íconos de alta calidad que puedes descargar de forma gratuita.

El código debería verse de la siguiente manera:

5. Agregar validación de formulario

Puedes ayudar a los usuarios a ingresar sus datos correctamente si permites que los validen antes del envío del formulario y les muestres lo que deben cambiar.

Los elementos y atributos del formulario HTML tienen funciones integradas para la validación básica, pero también debes usar JavaScript para realizar una validación más sólida mientras los usuarios ingresan datos y cuando intentan enviar el formulario.

En este paso, se usa la API de Constraint Validation (que es muy compatible) para agregar una validación personalizada con la IU integrada del navegador que establece el enfoque y muestra mensajes.

Informa a los usuarios sobre las restricciones de las contraseñas y cualquier otra entrada. No hagas que adivinen.

  1. Actualiza la sección de contraseñas del archivo 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>

Esto agrega dos funciones nuevas:

  • Información sobre restricciones de contraseñas
  • Un atributo aria-describedby para la entrada de la contraseña (los lectores de pantalla leen el texto de la etiqueta, el tipo de entrada (contraseña) y, luego, la descripción.

  1. Agrega el siguiente CSS al final del archivo style.css:

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

  2. Agrega el siguiente JavaScript al archivo 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. Pruébala

    Todos los navegadores recientes tienen funciones integradas para la validación de formularios y compatibilidad con la validación con JavaScript.

    1. Ingresa una dirección de correo electrónico no válida y haz clic en Acceder. El navegador muestra una advertencia: no se requiere JavaScript.

    2. Ingresa una dirección de correo electrónico válida, pero luego haz clic en Acceder sin un valor de contraseña. El navegador advierte que omitiste un valor obligatorio y establece el enfoque en la entrada de la contraseña.

    3. Ingresa una contraseña no válida y haz clic en Acceder. Ahora verás diferentes mensajes en función de cuál sea el problema.

  4. Prueba diferentes maneras de ayudar a los usuarios a ingresar direcciones de correo electrónico y contraseñas. Los campos de formulario de contraseña más eficaces ofrecen algunas sugerencias ingeniosas.

    El código debería verse de la siguiente manera:

Llega más lejos

No se muestran en este codelab, pero igualmente necesitas estas cuatro funciones fundamentales del formulario de acceso:

  • Agrega ¿Olvidaste la contraseña?, un botón que permite a los usuarios restablecer sus contraseñas fácilmente.

  • Vincula los documentos de las condiciones del servicio y la política de privacidad para que los usuarios sepan cómo proteges sus datos.

  • Ten en cuenta el estilo y el desarrollo de la marca, y asegúrate de que estas características adicionales coincidan con el resto de tu sitio web.

  • Agrega Analytics y RUM para probar y supervisar el rendimiento y la usabilidad del diseño de tu formulario.