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 asistivas. 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 con claridad.
• Los usuarios con discapacidades cognitivas se benefician de navegadores y herramientas asistivas que pueden rellenar automáticamente campos o mostrar iconos familiares basados en el propósito del campo, reduciendo el esfuerzo mental requerido para completar formularios.
• Los usuarios con discapacidades motoras 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 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 corresponde con el Criterio de Conformidad 1.3.5 de WCAG 2.1: Identificar el propósito de la 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 un checkbox).
3. Los tokens están ordenados correctamente 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 los campos donde el valor autocomplete está mal escrito, usa un token inexistente o se aplica de forma 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 WCAG 2.1 Sección 7.
3. Añade el valor autocomplete correcto a cada campo que coincida. 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 ten en cuenta que esto no te exime de la regla si el campo aún recopila datos identificables del usuario.

Valores autocomplete comunes

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

Ejemplos

Incorrecto: valores autocomplete faltantes o inválidos

<!-- Atributo autocomplete faltante completamente -->

<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 de envío y facturación separadas, 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, te aseguras de que las tecnologías asistivas puedan comunicar el propósito de cada campo a los usuarios, los navegadores puedan ofrecer autocompletado confiable, y tus formularios cumplan con 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

→