El atributo autocomplete debe usarse correctamente

Por qué esto importa

El atributo autocomplete hace más que habilitar el autorrellenado del navegador: comunica programáticamente el propósito de un campo de formulario a las tecnologías de asistencia. Esta información es crítica para varios grupos de usuarios:

• Usuarios de lectores de pantalla dependen del anuncio del propósito del campo para entender qué información se está solicitando. Sin un valor autocomplete válido, el lector de pantalla puede no transmitir este contexto claramente.
• Usuarios con discapacidades cognitivas se benefician de navegadores y herramientas de asistencia que pueden autocompletar campos o mostrar iconos familiares basados en el propósito del campo, reduciendo el esfuerzo mental requerido para completar formularios.
• Usuarios con discapacidades de movilidad se benefician de la funcionalidad de autorrellenado que minimiza la cantidad de entrada manual requerida.
• Usuarios con baja visión pueden usar hojas de estilo personalizadas o extensiones del navegador que adaptan la presentación de los campos de formulario basándose en su propósito declarado (por ejemplo, mostrando un icono de teléfono junto a un campo de teléfono).

Esta regla se mapea al Criterio de Éxito 1.3.5 de WCAG 2.1: Identificar propósito de entrada (Nivel AA), que requiere que el propósito de los campos de entrada que recopilan información del usuario pueda determinarse programáticamente. El atributo autocomplete es el mecanismo estándar para satisfacer este requisito en HTML.

Cómo funciona la regla

La regla de axe autocomplete-valid verifica que:

1. El valor del atributo autocomplete es un token válido (o combinación de tokens) como se define en la especificación HTML para autocompletado.
2. El valor es apropiado para el tipo de control de formulario al que se aplica (por ejemplo, email se usa en una entrada de tipo email, no en una casilla de verificación).
3. Los tokens están correctamente ordenados cuando se usan múltiples tokens (por ejemplo, un nombre de sección seguido de un token de pista seguido del nombre del campo).

La regla marca campos donde el valor autocomplete está mal escrito, usa un token inexistente o se aplica de manera inválida.

Cómo solucionarlo

1. Identifica todos los campos de formulario que recopilan información personal del usuario (nombre, email, dirección, número de teléfono, etc.).
2. Verifica si el tipo de datos coincide con uno de los 53 propósitos de entrada definidos en WCAG 2.1 Sección 7.
3. Añade el valor autocomplete correcto a cada campo coincidente. Asegúrate de que:
   • El valor esté escrito correctamente.
   • Sea apropiado para el tipo de entrada.
   • Si usas múltiples tokens, sigan el orden correcto: nombre de sección opcional (section-*), shipping o billing opcional, home, work, mobile, fax, o pager opcional, y luego el nombre del campo de autocompletado.
4. Establece autocomplete="off" solo cuando tengas una razón legítima para deshabilitar el autocompletado — y nota que esto no te exime de la regla si el campo aún recopila datos identificables del usuario.

Valores comunes de autocomplete

Aquí están algunos de los valores más frecuentemente usados:

Ejemplos

Incorrecto: Valores autocomplete faltantes o inválidos

<!-- Falta completamente el atributo autocomplete -->

<label for="name">Nombre Completo</label>
<input type="text" id="name" name="name">

<!-- Valor autocomplete mal escrito -->

<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="emal">

<!-- Valor autocomplete inválido -->

<label for="phone">Teléfono</label>
<input type="tel" id="phone" name="phone" autocomplete="phone-number">

En los ejemplos anteriores, el primer campo no tiene atributo autocomplete, el segundo tiene un error tipográfico (emal en lugar de email), y el tercero usa un valor no estándar (phone-number en lugar de tel).

Correcto: Valores autocomplete válidos

<label for="name">Nombre Completo</label>
<input type="text" id="name" name="name" autocomplete="name">

<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">

<label for="phone">Teléfono</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">

Correcto: Usando múltiples tokens

Cuando un formulario tiene secciones separadas de envío y facturación, puedes usar tokens adicionales para distinguirlas:

<fieldset>
  <legend>Dirección de Envío</legend>
  <label for="ship-street">Dirección Postal</label>
  <input type="text" id="ship-street" name="ship-street"
    autocomplete="shipping street-address">

  <label for="ship-zip">Código Postal</label>
  <input type="text" id="ship-zip" name="ship-zip"
    autocomplete="shipping postal-code">
</fieldset>

<fieldset>
  <legend>Dirección de Facturación</legend>
  <label for="bill-street">Dirección Postal</label>
  <input type="text" id="bill-street" name="bill-street"
    autocomplete="billing street-address">

  <label for="bill-zip">Código Postal</label>
  <input type="text" id="bill-zip" name="bill-zip"
    autocomplete="billing postal-code">
</fieldset>

Correcto: Secciones nombradas con section-*

Puedes usar nombres de sección personalizados para agrupar campos relacionados cuando el mismo tipo de datos aparece múltiples veces:

<label for="home-tel">Teléfono de Casa</label>
<input type="tel" id="home-tel" name="home-tel"
  autocomplete="section-home tel">

<label for="work-tel">Teléfono del Trabajo</label>
<input type="tel" id="work-tel" name="work-tel"
  autocomplete="section-work tel">

Al usar valores autocomplete válidos y aplicados correctamente, aseguras que las tecnologías de asistencia puedan comunicar el propósito de cada campo a los usuarios, los navegadores puedan ofrecer autorrellenado confiable, y tus formularios cumplan los requisitos del Criterio de Éxito 1.3.5 de WCAG 2.1.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - 1.3.5 Identify Input Purpose Level AA

→