Fallo Común F107 de WCAG 2.1: Valores de atributo de autocompletar incorrectos

La accesibilidad web garantiza que todas las personas, incluidas aquellas con discapacidades, puedan navegar e interactuar con formularios en línea sin barreras. Uno de los problemas más comunes ocurre cuando los formularios no utilizan correctamente el atributo autocomplete, lo que afecta a los usuarios que dependen de tecnologías de asistencia para completar formularios de manera eficiente.

Este fallo está relacionado con el criterio de conformidad 1.3.5: Identificar el propósito de la entrada de WCAG 2.1, el cual requiere que los campos de entrada en los formularios usen valores correctos de autocomplete para que los navegadores y herramientas de asistencia puedan proporcionar autocompletado eficiente y accesible.

Estudios muestran que aproximadamente el 15% de la población mundial tiene algún tipo de discapacidad. Para estas personas, contar con autocompletado correcto en los formularios puede reducir significativamente la fricción y mejorar la experiencia de usuario.

Acerca de este fallo

Este fallo ocurre cuando un campo de entrada en un formulario HTML solicita información del usuario pero usa un valor incorrecto en el atributo autocomplete. Esto impide que el navegador y las tecnologías de asistencia identifiquen correctamente el propósito del campo, afectando a personas con discapacidades cognitivas, motoras o visuales.

Situaciones donde ocurre este fallo:

• Un formulario de registro donde el campo de «Nombre» usa autocomplete="email" en lugar de autocomplete="name".
• Un campo de «Fecha de nacimiento» que usa un valor no válido como autocomplete="birthday" en lugar de autocomplete="bday".
• Un campo de «Número de teléfono» que usa autocomplete="user-phone" en lugar de autocomplete="tel".

Ejemplos

Ejemplo incorrecto 1: Atributos de autocomplete mal asignados

<h2>Tus datos:</h2>
<label for="uname">Nombre:</label>
<input autocomplete="email" id="uname" type="text">

<label for="ubirthday">Fecha de nacimiento:</label>
<input autocomplete="birthday" id="ubirthday" type="text">

🔴 Problema:

• El campo de nombre usa autocomplete="email" en lugar de autocomplete="name".
• El campo de fecha de nacimiento usa autocomplete="birthday", que no es un valor reconocido. El correcto sería autocomplete="bday".

Solución correcta: Uso adecuado de los valores de autocomplete

<h2>Tus datos:</h2>
<label for="uname">Nombre:</label>
<input autocomplete="name" id="uname" type="text">

<label for="ubirthday">Fecha de nacimiento:</label>
<input autocomplete="bday" id="ubirthday" type="text">

✅ ¿Qué mejora?: Se usan los valores correctos del atributo autocomplete para que las herramientas de asistencia puedan identificar y completar correctamente los datos.

Ejemplo incorrecto 2: Uso de valores inexistentes en autocomplete

<label for="utel">Número de teléfono:</label>
<input autocomplete="user-phone" id="utel" type="tel">

🔴 Problema: autocomplete="user-phone" no es un valor válido según la especificación de HTML.

Solución correcta: Uso del valor estándar adecuado

<label for="utel">Número de teléfono:</label>
<input autocomplete="tel" id="utel" type="tel">

✅ ¿Qué mejora?: Se usa el valor tel, que es reconocido por navegadores y herramientas de asistencia.

🌟 Ejemplo correcto: Implementación ideal con accesibilidad mejorada

<form>
  <h2>Tus datos personales</h2>
  <label for="uname">Nombre completo:</label>
  <input autocomplete="name" id="uname" type="text" aria-describedby="name-desc">
  <small id="name-desc">Introduce tu nombre completo.</small>

  <label for="uemail">Correo electrónico:</label>
  <input autocomplete="email" id="uemail" type="email" aria-describedby="email-desc">
  <small id="email-desc">Ejemplo: usuario@correo.com</small>

  <label for="ubirthday">Fecha de nacimiento:</label>
  <input autocomplete="bday" id="ubirthday" type="date">

  <label for="utel">Número de teléfono:</label>
  <input autocomplete="tel" id="utel" type="tel">

  <button type="submit">Enviar</button>
</form>

✅ ¿Qué mejora?:

• Uso correcto de los valores de autocomplete.
• Inclusión de aria-describedby para mejorar la accesibilidad.
• Mejora la experiencia del usuario con información clara y precisa.

Errores comunes y cómo evitarlos

Errores frecuentes:

1. Usar valores de autocomplete incorrectos o inexistentes.
2. No incluir autocomplete en campos de entrada que deberían tenerlo.
3. Utilizar valores personalizados en lugar de los definidos en HTML 5.2.

Cómo evitar estos errores:

• Consultar la lista oficial de valores permitidos para autocomplete.
• Probar los formularios en navegadores con autocompletado habilitado.
• Validar el código HTML con herramientas como W3C Markup Validator.

Preguntas frecuentes sobre el fallo común F107

¿Por qué es importante el atributo autocomplete?

Permite que los navegadores y tecnologías de asistencia completen automáticamente los datos del usuario.

¿Dónde puedo encontrar la lista oficial de valores de autocomplete?

En la documentación de HTML 5.2 Autocomplete.

¿Qué pasa si uso un valor incorrecto en autocomplete?

El navegador ignorará el atributo y el formulario perderá funcionalidad de autocompletado.

¿Es obligatorio usar autocomplete en formularios?

No es obligatorio, pero es una buena práctica para accesibilidad y usabilidad.

¿Cómo puedo probar si mi autocomplete funciona correctamente?

Activando la función de autocompletado en tu navegador y verificando su comportamiento en los campos del formulario.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F107: Fallo del Criterio de Conformidad 1.3.5 debido a valores de atributo de autocompletar incorrectos
• Comprender el criterio de éxito 1.3.5: Identificar el propósito de la entrada
• WCAG – Propósitos de entrada para componentes de interfaz de usuario .
• HTML – Controles de llenado automático de formulario: el autocompleteatributo

   

• H98: Uso de atributos de autocompletado de HTML 5.2
• HTML 5.2 – Atributo Autocomplete

Pruebas y validación

Procedimiento

1. Revisar cada campo de entrada en el formulario.
2. Verificar si el atributo autocomplete está presente.
3. Confirmar que el valor de autocomplete es correcto según la especificación HTML 5.2.
4. Probar el formulario en diferentes navegadores para asegurar que el autocompletado funciona correctamente.
5. Usar herramientas de validación como W3C Markup Validator para verificar errores de marcado.

Resultados esperados

• ✅ Si autocomplete está presente y tiene valores correctos, el formulario cumple con WCAG 2.1.
• ❌ Si autocomplete está ausente o usa valores incorrectos, el formulario no cumple y debe corregirse.

Utilizar valores correctos en el atributo autocomplete mejora la accesibilidad y usabilidad de los formularios. Siguiendo las pautas de WCAG 2.1, podemos garantizar que más personas puedan completar formularios sin dificultades.

🚀 ¡Haz que tu web sea más accesible! Si necesitas ayuda con la accesibilidad de tu sitio, contáctanos.