Cómo hacer formularios accesibles para cumplir WCAG AA

Introducción

Un formulario bien diseñado es clave para que todos los usuarios, incluyendo personas con discapacidad visual, motora o cognitiva, puedan interactuar sin barreras.

En este artículo verás cómo crear formularios accesibles para cumplir WCAG AA, con ejemplos y recomendaciones para WordPress, PrestaShop y WooCommerce.

Índice

• 1. Principios clave de accesibilidad en formularios
• 2. Estructura básica de un formulario accesible
• 3. Usar ARIA y roles correctamente
• 4. Ejemplo de formulario accesible
• 5. Errores comunes y cómo evitarlos
• 6. Aplicación en WordPress, WooCommerce y PrestaShop
• 7. Conclusión

1. Principios clave

• 📝 Cada campo debe tener una etiqueta <label> vinculada
• 🔎 Proporciona instrucciones claras y mensajes de error comprensibles
• ✅ Indica campos obligatorios de forma textual (no solo con color o asterisco)
• 🔄 Mantén el orden lógico de tabulación
• 📢 Usa roles ARIA solo cuando no hay HTML semántico

2. Estructura básica

Un campo accesible se compone de:

<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required aria-required="true">
<span id="error-email"></span>

🔑 Usa aria-required y aria-describedby si necesitas reforzar la semántica.

3. Usar ARIA y roles

• 💡 aria-invalid="true" para marcar campos con error
• 🔗 aria-describedby para relacionar mensajes de ayuda o error
• ✅ Evita roles innecesarios si ya usas elementos HTML correctos

4. Ejemplo práctico

<form>
  <label for="name">Nombre:</label>
  <input id="name" name="name" type="text" required aria-required="true">

  <label for="email">Email:</label>
  <input id="email" name="email" type="email" required aria-required="true">

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

✔️ Navegable por teclado y legible por lector de pantalla.

5. Errores comunes

6. Aplicación práctica

• 🧩 WordPress: Usar plugins de formularios que respeten accesibilidad (Gravity Forms, Ninja Forms)
• 🛒 WooCommerce: Revisar formularios de checkout y registro
• 🛍️ PrestaShop: Personalizar plantillas para añadir <label> y ARIA cuando falten

7. Conclusión

Un formulario accesible mejora la experiencia de todos los usuarios y evita barreras que afectan a la conversión.

📩 ¿Quieres auditar los formularios de tu ecommerce? Escríbenos y lo revisamos contigo.