Técnica HTML WCAG 2.2
H98Indicar con autocomplete qué dato personal pide cada campo
Nombre oficial en el W3C: Usar los atributos autocomplete de HTML 5.2
En pocas palabras
En los campos que piden datos de la propia persona (nombre, correo, teléfono, dirección…) se añade el atributo autocomplete con un valor estándar. Así el navegador sabe qué dato va en cada campo y puede rellenarlo solo. Las herramientas de apoyo también pueden reconocerlo y, por ejemplo, mostrar un icono junto al campo.
Por qué es importante
Escribir los mismos datos una y otra vez cuesta mucho a algunas personas. Por ejemplo, a quien tiene problemas de memoria, dislexia o temblor en las manos, o usa un teclado en pantalla.
Con autocomplete, el navegador rellena el formulario con los datos guardados. Hay menos errores y se tarda menos. Además, algunos productos de apoyo usan este dato para poner un icono conocido junto a cada campo.
Cómo se hace
- Localice los campos que piden datos de la persona que rellena el formulario: nombre, apellidos, correo, teléfono, dirección o fecha de nacimiento.
- Añada a cada uno
autocompletecon el valor de la lista oficial de HTML:name,given-name,family-name,email,tel,postal-code,bday, etc. - Use los valores en inglés tal cual. Un valor traducido, como
telefono, no funciona. - Si hay dos direcciones, distíngalas con
shipping(envío) obilling(facturación) delante. - No ponga
autocomplete="off"en el formulario ni en estos campos. - No lo use en campos sobre otras personas, como los datos del destinatario de un regalo.
Ejemplo práctico
Se aplica a los campos que piden datos de la propia persona: nombre, correo, teléfono o dirección de envío. Por ejemplo, en la compra de una tienda online, en un registro o en una cita previa.
Así no: Autocompletado desactivado o con valores inventados
El formulario lleva autocomplete="off", que desactiva el autocompletado en todos los campos. Además, el teléfono usa un valor que no existe en HTML (telefono). El navegador no sabe qué dato va en cada campo y no los rellena.

La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<form action="#" autocomplete="off">
<p>
<label for="nombre">Nombre y apellidos</label><br>
<input id="nombre" type="text">
</p>
<p>
<label for="correo">Correo electrónico</label><br>
<input id="correo" type="email">
</p>
<p>
<label for="movil">Teléfono móvil</label><br>
<input id="movil" type="tel" autocomplete="telefono">
</p>
<p>
<label for="cp">Código postal de entrega</label><br>
<input id="cp" type="text" inputmode="numeric">
</p>
<button type="submit">Continuar con el pago</button>
</form>Así sí: Valores autocomplete estándar
Se quita autocomplete="off". Cada campo lleva el valor de HTML que le corresponde: name, email, tel y shipping postal-code. El prefijo shipping indica que es la dirección de entrega. Ahora el navegador ofrece los datos guardados y los productos de apoyo reconocen cada campo.
Pruébelo aquí:
Ver el código del ejemplo correcto
<form action="#">
<p>
<label for="nombre">Nombre y apellidos</label><br>
<input id="nombre" type="text" autocomplete="name">
</p>
<p>
<label for="correo">Correo electrónico</label><br>
<input id="correo" type="email" autocomplete="email">
</p>
<p>
<label for="movil">Teléfono móvil</label><br>
<input id="movil" type="tel" autocomplete="tel">
</p>
<p>
<label for="cp">Código postal de entrega</label><br>
<input id="cp" type="text" inputmode="numeric" autocomplete="shipping postal-code">
</p>
<button type="submit">Continuar con el pago</button>
</form>Cómo comprobarlo
Errores frecuentes en auditorías
- Poner autocomplete="off" en el form o en los campos «por seguridad», en datos que no son sensibles.
- Usar valores traducidos o inventados (autocomplete="nombre", "telefono", "cp") que el navegador no reconoce.
- Poner name en «Nombre» y también en «Apellidos». Lo correcto es given-name y family-name.
- Usar autocomplete con valores que no corresponden en campos ajenos a la persona, como el nombre de un tercero o un código de descuento.
Para saber más, en nuestro blog
-
¿Es la autenticación accesible menos segura?Como afecta la accesibilidad a la seguridad cuando iniciamos sesión en una web, y las pautas a seguir según la WCAG 2.2
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H98 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todos los campos de formulario HTML que se corresponden con los propósitos de entrada para componentes de la interfaz de usuario.
Descripción
El objetivo de esta técnica es vincular por software un término taxonómico predefinido y publicado al campo de entrada, de modo que las entradas también puedan ser interpretadas por una máquina. De esta forma, el campo siempre tendrá asociado un valor común, referenciable e identificable, independientemente del idioma que se use o del término visible en pantalla con el que se etiquete el campo. A partir de ahí puede personalizarse o manipularse por software de otras maneras para ayudar a los usuarios.
La técnica consiste en añadir el token autocomplete adecuado a cada campo del formulario para que las entradas identificadas sean determinables por software. Esto ayudará a las personas con discapacidades cognitivas que quizá no reconozcan de inmediato el propósito del campo porque la etiqueta elegida por el autor no les resulta familiar. Cuando las entradas se han asignado por software, los complementos y programas de terceros pueden manipular estos campos de formulario para hacerlos más accesibles a las personas con discapacidades cognitivas. Por ejemplo, un complemento podría detectar un token autocomplete con la cadena de texto «tel» e insertar un icono de teléfono. Además, permitirá que programas de terceros sustituyan las etiquetas existentes por etiquetas de texto que al usuario le resulten más familiares. Por ejemplo, podría cambiar «Given Name» (nombre de pila) por «First Name» (nombre).
El atributo autocomplete también mejora la capacidad del navegador para rellenar previamente los campos de formulario con los valores preferidos por el usuario. Cuando el campo se ha «etiquetado» correctamente con el valor de token conocido, el valor introducido por el usuario se almacena localmente en el equipo y se asocia al valor del token para reutilizarlo. Ayuda a las personas con discapacidades de destreza que tienen dificultades para teclear, a quienes necesitan más tiempo y a cualquiera que desee reducir el esfuerzo de rellenar un formulario.
El atributo autocomplete permite al navegador comparar patrones con una lista de valores almacenados localmente en el navegador y suministrar el valor correspondiente adecuado cuando el campo está etiquetado por software. Es un ajuste del usuario que la persona usuaria final puede activar, desactivar o modificar. Esto reduce la escritura y la dependencia de la memoria, porque usa valores almacenados para rellenar los campos.
Es importante señalar que el criterio de conformidad Identificación del propósito del campo y el atributo autocomplete solo imponen requisitos a los campos de entrada que recogen información sobre el usuario.
Para el criterio de conformidad, se da por supuesto que el atributo autocomplete no se usa en campos de formulario que no se correspondan con un campo de autocompletado descrito en la especificación del atributo autocomplete de HTML. Si el campo autocomplete se usa para describir una taxonomía «personalizada», en lugar de la descrita en la especificación, esta regla puede producir resultados incorrectos.
Consideraciones de seguridad
A las organizaciones puede preocuparles permitir que los campos de entrada se rellenen automáticamente. A veces hay confusión sobre cómo guardan la información los navegadores y sobre sus implicaciones de seguridad.
Respecto al atributo autocomplete:
- Esta técnica solo debe usarse cuando se piden datos sobre el usuario que rellena el formulario, no sobre otras personas.
- Solo funciona si se está en el mismo equipo, con la misma cuenta de usuario y con el mismo navegador. Ningún escenario con varios inicios de sesión guarda datos de
autocompleteentre cuentas distintas. (Los usuarios pueden configurar la sincronización de datos entre equipos, pero no es el comportamiento predeterminado.) - Guardar información con
autocompleterequiere el consentimiento del usuario, normalmente en el momento de guardar los datos por primera vez. - El formulario no se envía automáticamente; el usuario puede ver los datos antes de enviarlos.
- Es fácil borrar tanto el historial como los datos de formularios en la configuración del navegador.
- Es fácil activar un modo de privacidad, como la navegación privada.
- Incluso sin
autocompleteen la página web, los navegadores pueden guardar datos, y algunos complementos (como los gestores de contraseñas) usan heurísticas de forma agresiva para adivinar para qué sirven los campos y rellenarlos. Usar el atributoautocompletehace que esas suposiciones sean exactas.
El historial del navegador proporciona muchos más detalles sobre lo que ha hecho la gente y está tan disponible como los datos de autocomplete. Las soluciones o mitigaciones para el historial del navegador son similares a las de autocomplete.
Ejemplos
Datos de la tarjeta de crédito de un usuario
Este es un formulario sencillo que recoge datos de contacto y de la tarjeta de crédito del usuario.
<form method="post" action="step2">
<div>
<label for="fname">First Name</label>
<input autocomplete="given-name" id="fname" type="text">
</div>
<div>
<label for="lname">Last Name</label>
<input autocomplete="family-name" id="lname" type="text">
</div>
<div>
<label for="cc-num">Credit card number:</label>
<input autocomplete="cc-number" id="cc-num" type="text">
</div>
<div>
<label for="exp-date">Expiry Date:</label>
<input autocomplete="cc-exp" id="exp-date" type="month">
</div>
<div>
<input type="submit" value="Continue">
</div>
</form>
Pruebas
Procedimiento
Para cada campo de formulario que recoja información sobre el usuario y se corresponda con un campo de autocomplete descrito en WCAG 2.1, sección 7: Propósitos de entrada para componentes de la interfaz de usuario, comprobar lo siguiente:
- El campo de formulario tiene un par de atributo
autocompletey valor válido y bien formado. - El propósito del campo de formulario indicado por la etiqueta se corresponde con el token
autocompletedel campo.
Resultados esperados
- Si las comprobaciones n.º 1 y n.º 2 son verdaderas, la prueba se supera y la técnica se ha implementado correctamente.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H98 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.