Tras la ya extensa saga “Retocando Formularios“, muchos pensaron (bueno, presuponiendo tanto lo de “muchos” como su capacidad para pensar) que no volvería a tratar sobre ellos… ¡Pues va a ser que no! He vuelto para tratar de mejorarlo, pero en esta ocasión desde el punto de vista de la accesibilidad.
A las funcionalidades que introducían los anteriores scripts le he añadido la capacidad de reconocer la agrupación de campos mediante el elemento fieldset, y todo con la finalidad de mejorar la experiencia de usuario y la accesibilidad. Este elemento tiene como finalidad el agrupar campos en base al tipo de datos a introducir (ej. datos personales, datos bancarios, datos académicos, etc), mejorando la estructura y la accesibilidad del conjunto. Al fieldset se le añade el elemento legend que funciona a modo de encabezado de los datos agrupados.
…y ¿para qué?
La idea me surgió tras ver horrorizado un inmenso formulario con multitud de campos obligatorios (y no voy a decir donde…). Cuando no se rellenan estos, la lista con los errores se vuelve larguíííííííííísima, con lo que resulta muy incomodo de leer, difícil de comprender e incluso estéticamente horrible.
Si los campos de formulario van agrupados para facilitar su comprensión, ¿por qué no agrupar los errores siguiendo el mismo patrón?
Para el funcionamiento del script no hace falta la agrupación, pero bueno… siempre es positivo tenerla presente y utilizarla.
La prueba
Como siempre, podéis acceder al ejemplo de uso o incluso descargarlo directamente.
Como se puede observar, los errores siguen mostrándose mediante una lista. No obstante, en este caso se crea una lista anidada para tratar de agruparlos y conseguir esa mejora en estructura antes mencionada.
…y todo esto se relaciona con
- Retocando Formularios, Episodio III (â€El Retornoâ€)
- Retocando Formularios (Episodio II)
- Retocando Formularios (episodio I)
Importante: Quiero recordar que el uso de javascript no debe tener implicaciones negativas en la accesibilidad. Bien utilizado, y con todas las consideraciones hacia el usuario, mejora su experiencia.
He estado probando tu script y ni que (lao) decir tiene que es increíble. Pero me he encontrado con una incompatibilidad cuando tienes una clase en un imput o label. Al dar el error deja el valor de class a “error”. Lo he solucionado cambiando las lineas en las que aparece labelerror por
(labels[i].className == ""?labelerror:labels[i].className+" "+labelerror)y fielderror por(elasociado.className == ""?labelerror:elasociado.className+" "+fielderror).Me jode rectificar algo que sería incapaz de hacer, lo siento. Un trabajo espectacular.
Gracias por la aportación que has hecho. No me ha quedado muy clara la incompatibilidad que mencionas. Lo he probado sobre el ejemplo que se puede descargar desde esta página, añadiendo una clase en el label y en el input. ¿Podrías pasarme un enlace o un ejemplo para ver lo que ocurre?
Insisto en darte las gracias y en recordarte que realmente necesitamos que esto mejore con vuestras aportaciones.
Un saludo.