H100Marcar bien los campos de correo y contraseña del inicio de sesión

Por qué es importante

Recordar y teclear una contraseña es una prueba de memoria. A muchas personas les resulta difícil, por ejemplo con dislexia, problemas de memoria o poca movilidad en las manos.

Los gestores de contraseñas (programas que guardan y escriben las claves) evitan ese esfuerzo. Pero solo funcionan si reconocen los campos y si la web deja rellenarlos o pegar en ellos.

Cómo se hace

1. Ponga a cada campo una etiqueta visible con <label>: «Correo electrónico» y «Contraseña».
2. Use type="email" para el correo y type="password" para la contraseña.
3. Añada autocomplete="username" (o email) al correo y autocomplete="current-password" a la contraseña.
4. En el formulario de registro o de cambio de clave, use autocomplete="new-password".
5. No bloquee la acción de pegar ni el autocompletado con scripts ni con autocomplete="off".

Cómo comprobarlo

1. Revise el código. Cada campo debe tener una etiqueta asociada y el tipo correcto.
2. Copie un texto y péguelo en cada campo con Ctrl + V. Debe pegarse sin problemas.
3. Guarde un usuario en el gestor de contraseñas del navegador. Vuelva a la página y compruebe que ofrece rellenar ambos campos.
4. Con un lector de pantalla, llegue a cada campo con el tabulador. Debe oír su nombre: «Correo electrónico», «Contraseña».

Ejemplo

Formulario de acceso a una sede electrónica preparado para gestores de contraseñas.

<form action="/acceso" method="post">
  <label for="correo">Correo electrónico</label>
  <input type="email" id="correo" name="correo"
         autocomplete="username">

  <label for="clave">Contraseña</label>
  <input type="password" id="clave" name="clave"
         autocomplete="current-password">

  <button type="submit">Entrar</button>
</form>