Identificar el propósito de la entrada
Los campos de formulario que recopilan información personal habitual —nombre, correo electrónico, teléfono, dirección, tarjeta de crédito— deben declarar su propósito de forma programática mediante el atributo HTML autocomplete. Esto permite que las herramientas de apoyo personalicen la interfaz.
Qué exige el criterio
Para cada uno de los 53 campos de información de usuario específicos enumerados en WCAG (nombre, correo electrónico, tel, street-address, cc-number, bday, country, etc.), la entrada debe incluir el token autocomplete correspondiente. El objetivo no es la comodidad del autocompletado del navegador — es que las herramientas de apoyo (teclados de conjuntos de símbolos, aplicaciones de CAA, capas de ayuda cognitiva) puedan sustituir las etiquetas del formulario por iconos, traducciones o entradas alternativas solo cuando el propósito del campo sea legible por máquinas.
Cómo cumplirlo
- Añadir
autocomplete="email"a los campos de correo electrónico,autocomplete="given-name"al nombre de pila yautocomplete="family-name"al apellido. - Usar
autocomplete="tel"para el teléfono,autocomplete="street-address",autocomplete="postal-code"yautocomplete="country". - Para formularios de pago, usar
autocomplete="cc-name",cc-number,cc-expycc-csc. - Consultar la lista completa en la especificación HTML — estos tokens son normativos.
- Combinar con
<input type="email">,type="tel">ytype="url">para obtener los teclados en pantalla correctos. - Para campos no personales (un cuadro de búsqueda, una valoración personalizada), no es necesario ningún token de autocompletado — este criterio de conformidad solo cubre los 53 tipos de información personal.
Fallos habituales
autocomplete="off"en todo el formulario de inicio de sesión «por seguridad» — impide activamente el cumplimiento y rompe los gestores de contraseñas.- Campo de correo electrónico sin token de autocompletado, por lo que los usuarios de teclados de símbolos no obtienen una entrada personalizada.
- Campos de dirección etiquetados como «Dirección, línea 1» pero sin
autocomplete="address-line1". - Campos de tarjeta de crédito con autocompletado JavaScript personalizado en lugar del token nativo.
- Formulario de registro con campo
nameque recoge el nombre completo pero sinautocomplete="name".
Por qué importa
Este criterio de conformidad pasa desapercibido con frecuencia porque el fallo no es visible — el formulario funciona para los usuarios habituales, pero quienes usan entradas adaptativas obtienen una experiencia genérica. Añadir los tokens de autocompletado es una tarea de 30 minutos en la mayoría de los flujos de registro y mejora al mismo tiempo la experiencia de los usuarios habituales (el autocompletado del navegador funciona mejor).