Validación de formularios

¿Qué es la validación de formularios?

La validación de formularios es el proceso de verificar que los datos ingresados por el usuario cumplen con los requisitos especificados (formato, longitud, valores permitidos, etc.). Una validación accesible es crucial para que todos los usuarios puedan entender y corregir errores.

Relación con WCAG 2.1

El Criterio 3.3.1 (Identificación de Errores) de WCAG 2.1 Nivel A requiere que los errores se identifiquen y se describa el error al usuario en texto. El Criterio 3.3.3 (Sugerencias de Error) de Nivel AA requiere que se proporcionen sugerencias para corregir errores cuando sea posible.

Ejemplos prácticos

✅ Correcto: Validación accesible

<label for="email">Correo electrónico</label>
<input 
  type="email" 
  id="email" 
  name="email"
  required
  aria-required="true"
  aria-invalid="false"
  aria-describedby="email-error email-help">
<span id="email-help">Formato: [email protected]</span>
<span id="email-error" role="alert" aria-live="polite"></span>

<script>
  const emailInput = document.getElementById('email');
  const errorSpan = document.getElementById('email-error');
  
  emailInput.addEventListener('blur', function() {
    if (!this.validity.valid) {
      this.setAttribute('aria-invalid', 'true');
      errorSpan.textContent = 'Por favor, ingresa un correo electrónico válido';
    } else {
      this.setAttribute('aria-invalid', 'false');
      errorSpan.textContent = '';
    }
  });
</script>

✅ Correcto: Mensaje de error descriptivo

<label for="password">Contraseña</label>
<input 
  type="password" 
  id="password" 
  name="password"
  aria-describedby="password-error"
  aria-invalid="true">
<span id="password-error" role="alert">
  La contraseña debe tener al menos 8 caracteres, incluir una mayúscula y un número.
</span>

❌ Incorrecto: Validación solo visual

<!-- Error solo mostrado con color, sin texto -->
<input type="email" class="error">
<style>
  .error { border: 2px solid red; }
</style>

❌ Incorrecto: Error no asociado al campo

<!-- El error no está conectado al campo -->
<input type="email" id="email">
<div class="error">Correo inválido</div>

Errores comunes

1. Solo indicar error con color: No usar solo color rojo, incluir texto descriptivo
2. Errores no asociados: No conectar el mensaje de error con el campo usando aria-describedby
3. Mensajes genéricos: "Error" o "Inválido" no son descriptivos
4. Validación solo en submit: Validar también en tiempo real o al salir del campo
5. No usar aria-live: Los errores dinámicos deben anunciarse a lectores de pantalla

Buenas prácticas

• Mensajes descriptivos: Explicar qué está mal y cómo corregirlo
• Asociar errores: Usar aria-describedby para conectar mensajes con campos
• Usar aria-invalid: Indicar cuando un campo tiene un valor inválido
• role="alert": Para mensajes de error que deben anunciarse inmediatamente
• Validación progresiva: Validar mientras el usuario escribe, no solo al enviar

Términos relacionados

• [[Label]]
• [[aria-describedby]]
• [[aria-invalid]]
• [[role="alert"]]
• [[WCAG 2.1]]
• [[Criterio 3.3.1]]