1.3.5 Identificar el propósito de la entrada
Criterio de éxito oficial
El propósito de cada campo de entrada que recopila información sobre el usuario se puede determinar programáticamente cuando el campo cumple una función identificada en la sección Propósitos de entrada y el contenido se implementa con tecnologías que soportan la identificación del significado esperado.
type vs. autocomplete
El atributo type (como type="email") describe el tipo de entrada pero no su propósito específico. El atributo autocomplete sí identifica el propósito concreto.
¿Qué es?
Los campos de formulario que recogen datos del usuario deben ser identificables programáticamente para que la tecnología de asistencia pueda comunicar el propósito a los usuarios y para que se active el autocompletado del navegador.
Esto implica añadir el atributo autocomplete con los valores apropiados. Con ello, la tecnología de asistencia puede intercambiar etiquetas por iconos familiares, y el autocompletado puede rellenar automáticamente la información básica.
Sin autocomplete
Con autocomplete
¿Por qué es importante?
Cuando los campos no tienen autocomplete, los usuarios con movilidad reducida tienen que escribir manualmente todos los datos, lo que resulta agotador y físicamente exigente. Para los usuarios con dificultades de memoria o comprensión, no tener autocompletado ni iconos significa que pueden no reconocer qué se pide en cada campo.
¿Quién se ve afectado?
Personas con movilidad reducida — Pueden tener dificultades para escribir en campos de formulario. El autocomplete reduce drásticamente la necesidad de escribir.
Personas con discapacidades cognitivas — La tecnología de asistencia puede mostrar iconos familiares junto a los campos gracias al autocomplete, facilitando la comprensión de qué se solicita.
Personas con problemas de memoria — El autocompletado les libera de tener que recordar y escribir su información personal cada vez.
Cómo implementar 1.3.5
Usa el atributo autocomplete
Añade el atributo autocomplete con el valor apropiado a cada campo que recopile información personal del usuario:
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" autocomplete="given-name">
<label for="email">Correo electrónico:</label>
<input id="email" type="email" autocomplete="email">
<label for="cumple">Fecha de nacimiento:</label>
<input id="cumple" type="date" autocomplete="bday">Direcciones de facturación y envío
Para formularios con múltiples direcciones, usa los tokens de sección billing y shipping como prefijo:
<!-- Dirección de facturación -->
<input autocomplete="billing street-address">
<input autocomplete="billing postal-code">
<!-- Dirección de envío -->
<input autocomplete="shipping street-address">
<input autocomplete="shipping postal-code">Solo campos del usuario
Este criterio aplica solo a campos que recopilan información sobre el propio usuario (nombre, dirección, teléfono). No aplica a campos donde el usuario introduce datos sobre terceros.
Valores autocomplete comunes
nameNombre completogiven-nameNombre de pilafamily-nameApellidonicknameApodousernameNombre de usuarionew-passwordNueva contraseñacurrent-passwordContraseña actualemailCorreo electrónicotelTeléfono completostreet-addressDirecciónpostal-codeCódigo postalcountry-namePaísbdayFecha de nacimientosexSexourlSitio weborganizationOrganizacióncc-nameNombre en tarjetalanguageIdioma preferidoLa lista completa está en la Sección 7 de WCAG 2.2.
Ejemplos prácticos
Contacto Formulario de contacto con autocompletado
Un formulario de contacto incluye autocomplete="name", autocomplete="tel" y autocomplete="email" en sus campos. El navegador rellena automáticamente los valores guardados del usuario.
Compra Formulario de pedido con facturación y envío
Un formulario de pedido tiene dos grupos de campos de dirección. Los de facturación usan autocomplete="billing street-address". Los de envío usan autocomplete="shipping street-address". El navegador completa cada grupo con la dirección correspondiente guardada previamente.
Multiidioma Formulario en idioma desconocido
Un usuario que no comprende el idioma de la página visita un sitio web extranjero. Gracias a que los campos tienen autocomplete, el navegador puede identificar el propósito de cada campo independientemente del idioma de las etiquetas.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| H98 | Uso del atributo autocomplete en HTML | Suficiente |
Errores comunes
autocomplete. Por ejemplo, usar autocomplete="name" en un campo de teléfono, o inventar valores que no existen en la especificación.- No incluir
autocompleteen campos que recopilan datos personales del usuario. - Usar
autocomplete="off"innecesariamente, impidiendo que el navegador ayude al usuario. - Confundir
typeconautocomplete: tenertype="email"no es suficiente. - No distinguir entre facturación y envío cuando hay múltiples conjuntos de dirección en el mismo formulario.