El atributo autocomplete debe usarse correctamente

Por qué esto importa

El atributo autocomplete hace más que habilitar el autocompletado 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:

• Los usuarios de lectores de pantalla dependen del propósito del campo anunciado para entender qué información se está solicitando. Sin un valor autocomplete válido, el lector de pantalla puede no transmitir este contexto claramente.
• Los usuarios con discapacidades cognitivas se benefician de navegadores y herramientas de asistencia que pueden auto-rellenar campos o mostrar iconos familiares basados en el propósito del campo, reduciendo el esfuerzo mental requerido para completar formularios.
• Los usuarios con discapacidades motrices se benefician de la funcionalidad de autocompletado que minimiza la cantidad de entrada manual requerida.
• Los usuarios con baja visión pueden usar hojas de estilo personalizadas o extensiones de 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 corresponde al Criterio de Conformidad 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 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 dato coincide con uno de los 53 propósitos de entrada definidos en la Sección 7 de WCAG 2.1.
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 autocomplete comunes

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

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 distinguirlos:

<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 de Trabajo</label>
<input type="tel" id="work-tel" name="work-tel"
  autocomplete="section-work tel">

Al usar valores autocomplete válidos y correctamente aplicados, aseguras que las tecnologías de asistencia puedan comunicar el propósito de cada campo a los usuarios, los navegadores puedan ofrecer autocompletado confiable, y tus formularios cumplan los requisitos del Criterio de Conformidad 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

→