Curso HTML 19.4 Formularios avanzados con validación HTML5 y accesibilidad

19.4 Formularios avanzados con validación HTML5 y accesibilidad

En esta sección profundizamos en las capacidades de validación nativas de HTML5 y en cómo garantizar que nuestros formularios sean totalmente accesibles. Veremos:

Tipos de input específicos y atributos de validación.
El API de validación (Constraint Validation API).
Mensajes de error personalizados.
Buenas prácticas de accesibilidad (etiquetas, ARIA, roles).

1. Tipos de `input` y atributos de validación HTML5

HTML5 introdujo varios tipos de input con validación automática:

type	Propósito	Atributos de validación comunes
email	Correo electrónico	required, pattern, maxlength
url	URL	required, pattern
tel	Teléfono	pattern, maxlength
number	Número	min, max, step, required
date / datetime-local	Fechas	min, max, required
color	Selector de color	required
range	Deslizador	min, max, step, required

required: campo obligatorio.
pattern: expresión regular para validar el valor.
min, max, step, minlength, maxlength: límites numéricos o de longitud.
novalidate (en <form>): deshabilita la validación nativa.

2. Asociar `label` y elementos de grupo

Usar <label for='id'> o envolver el input con <label>…</label>.


Agrupar controles relacionados con <fieldset> y <legend>.


3. Accesibilidad con ARIA

aria-required='true' en inputs requeridos.
aria-invalid='true|false' para indicar error.
aria-describedby='idError' para enlazar mensajes de error.
Elementos con role='alert' o aria-live='polite' para notificar cambios.

4. Constraint Validation API y mensajes personalizados
Podemos aprovechar la API de validación para:

checkValidity() / reportValidity()
setCustomValidity(mensaje) para sobreescribir el mensaje predeterminado.

5. Ejemplo completo de formulario accesible

  
    Formulario de contacto

    
    
      Correo electrónico:
      
      
    

    
    
      Teléfono (10 dígitos):
      
      
    

    
    
      Fecha de nacimiento:
      
      
    

    
    
      Nivel de satisfacción:
      
      3
    

    
  




6. Validación cruzada y confirmación de contraseña

  
    Contraseña:
    
    
  

  
    Confirmar contraseña:
    
    
  

  




7. Mejoras adicionales y consideraciones

Usar datalist para sugerir opciones.
Evitar placeholder como único rótulo.
Mantener el orden de tabulación lógico o usar tabindex con cuidado.
Probar con lectores de pantalla y navegación por teclado.

Con estas técnicas y ejemplos tienes una base sólida para crear formularios robustos, validados y accesibles, aprovechando al máximo las características nativas de HTML5 y complementándolas con un mínimo de JavaScript cuando sea necesario.


  Anterior  Siguiente

Curso HTML 19.4 Formularios avanzados con validación HTML5 y accesibilidad

19.4 Formularios avanzados con validación HTML5 y accesibilidad

1. Tipos de input y atributos de validación HTML5

2. Asociar label y elementos de grupo

3. Accesibilidad con ARIA

4. Constraint Validation API y mensajes personalizados

5. Ejemplo completo de formulario accesible

6. Validación cruzada y confirmación de contraseña

7. Mejoras adicionales y consideraciones

Comentarios

Deja una respuesta Cancelar la respuesta

1. Tipos de `input` y atributos de validación HTML5

2. Asociar `label` y elementos de grupo