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

  1. Haz clic en Remix para editar y hacer que el proyecto sea editable.

  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>

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

  3. Haz clic en Ver app para obtener una vista previa del formulario de acceso. El código HTML que agregaste es válido y correcto, pero el diseño predeterminado del navegador hace que se vea muy mal y sea difícil de usar, sobre todo en dispositivos móviles.

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

2. Cómo diseñar para dedos y pulgares

Ajusta el padding, los márgenes y los tamaños de fuente para asegurarte de 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 app para ver el formulario de acceso con el nuevo diseño.

  3. Haz clic en View Source para volver a tu archivo style.css.

¡Es mucho código! Los principales aspectos que debes tener en cuenta son los cambios en los tamaños:

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

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

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

  • El CSS predeterminado es para viewports de menos de 450 píxeles de ancho.
  • La sección de consulta de medios establece anulaciones para viewports que tienen al menos 450 píxeles de ancho.

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

  • ¿El texto de la etiqueta y de la entrada es legible, en especial para las personas con visión reducida?
  • ¿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 funciones integradas del navegador

Habilita el navegador para que almacene y autocomplete los valores de entrada, y proporciona acceso a las funciones integradas de administración de contraseñas.

  1. Agrega atributos al código HTML del formulario para que se vea de la siguiente manera:

    <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 ver tu app y, luego, haz clic en Correo electrónico.

    Observa cómo el enfoque se mueve a la entrada de 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 se enfoca la etiqueta o la entrada asociada a ella.

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

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

    El teclado de correo electrónico predeterminado en iOS.

  4. Escribe texto en el campo de contraseña.

    El texto se oculta 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 el rol de las entradas para 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 texto. Puedes ver la URL de tu app cuando haces clic en Pantalla completa El ícono de pantalla completa. Si almacenaste direcciones de correo electrónico en tu navegador, es probable que veas un cuadro de diálogo que te permita seleccionar entre esos correos electrónicos almacenados. Esto sucede porque el atributo autocomplete="username" se aplicó 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 diferentes navegadores usan técnicas diferentes para determinar el rol de las entradas de formularios y proporcionar el autocompletado para una variedad de sitios web diferentes.

Agrega y quita atributos para probarlo por tu cuenta.

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

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

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

Los expertos en usabilidad recomiendan 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 hacerlo, por lo que debes implementarlo tú mismo 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ña 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;
}

    Esto hace que el botón Mostrar contraseña se vea como texto sin formato y se muestre en la esquina superior derecha de la sección de contraseñas.

  3. Agrega el siguiente código 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 la lógica de mostrar la contraseña ahora.

    1. Consulta tu app.

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

    3. Haz clic en Mostrar contraseña.

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

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

Para comprender cómo funciona esta funcionalidad para 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 la contraseña. Cuando termines este codelab, implementa esto con imágenes SVG. Material Design ofrece íconos de alta calidad que puedes descargar de forma gratuita.

Tu código debería verse de la siguiente manera en este punto:

5. Agrega validación de formularios

Puedes ayudar a los usuarios a ingresar sus datos correctamente cuando les permites validar sus datos antes de enviar el formulario y mostrarles lo que deben cambiar.

Los elementos y atributos de formularios 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 compatible con muchos navegadores) para agregar validación personalizada con una IU del navegador integrada que establece el enfoque y muestra instrucciones.

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

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

Se agregaron dos funciones nuevas:

  • Información sobre las restricciones de contraseñas
  • Un atributo aria-describedby para la entrada de 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 código 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ébalo

    Todos los navegadores recientes tienen funciones integradas para la validación de formularios y admiten 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 haz clic en Acceder sin ingresar una contraseña. El navegador te advierte que omitiste un valor obligatorio y enfoca la entrada de contraseña.

    3. Ingresa una contraseña no válida y haz clic en Acceder. Ahora verás diferentes mensajes según el problema.

  4. Prueba diferentes formas de ayudar a los usuarios a ingresar direcciones de correo electrónico y contraseñas. Mejores campos de formulario de contraseña ofrece algunas sugerencias inteligentes.

    Tu código debería verse de la siguiente manera en este punto:

Llega más lejos

No se muestran en este codelab, pero aún necesitas estas cuatro funciones cruciales del formulario de acceso:

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

  • Agrega vínculos a tus documentos de condiciones del servicio y 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 funciones adicionales coincidan con el resto del sitio web.

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