¡Hola!
Hoy os vengo con un truquillo que, en caso de estar desarrollando webs accesibles en MVC, os puede venir bien.
Una de las cosas que considero muy importantes a la hora de mostrar una lista de errores de cumplimentación de formularios, es encabezar la misma con una cabecera, de modo que el usuario de lector de pantallas, al navegar por la lista de encabezados, dé con el resumen de los errores de formulario de forma fácil. Si obviamos esta cabecera, es posible que esa lista pase desapercibida, o al menos es lo que me dice la experiencia 🙂
En MVC 4, hasta donde recuerdo, no existía la sobrecarga de ValidationSummaryFor que os muestro a continuación, y que sí está disponible en MVC 5:
@Html.ValidationSummary("Revisa los siguientes errores", new { @class = "text-danger" }, "h3")
Esta extensión de HtmlHelper pinta una lista de errores, añadiéndole la clase text-danger (estoy usando bootstrap), y encabezando la lista con una etiqueta “h3” que encerrará el mensaje pasado en el primer parámetro.
¿La única pega de todo esto? Que el encabezado con el mensaje se ve siempre aunque no haya errores 🙁 .
Sin embargo, este método pinta una clase por defecto cuando el formulario es válido: “validation-summary-valid”; así que con un poco de magia CSS, podemos añadir lo siguiente a nuestra hoja de estilos:
/* para ocultar los encabezados de los validation summary si son válidos */
.validation-summary-valid {
display: none;
}
¿Más fácil? ¡Imposible!
Y ahora ya, como truquillo de nota, podríamos hacer una pequeña mejora a la experiencia del usuario, añadiendo, mediante jquery, una función que ponga el foco en la lista de errores cuando esta esté visible. Así, un usuario de lector de pantallas, escuchará el encabezado con el mensaje que hayamos puesto, y será consciente al instante de que algo pasa con ese formulario.
Añadamos este script a nuestro sitio (recordad que necesitaréis jquery):
$(function () {
var encabezado = $(".validation-summary-errors:last :header");
if (encabezado.length) {
encabezado.attr("tabindex", "-1");
encabezado.focus();
}
});
¡
Et Voilà!
¿Qué estamos haciendo aquí?
- Adjuntándonos al evento onDocumentReady, para que esto se ejecute cuando la página esté cargada.
- Buscando el último elemento con la clase validation-summary-error, y dentro de él, cualquier encabezado, sea del nivel que sea.
- Si lo encuentra, le pone tabIndex a -1 para poder focalizar en él de forma programática.
- Y por último, fuerza el foco a ese encabezado.
A mí personalmente me gusta crear un bundle de scripts de accesibilidad, y meter en él pequeños ficheros, cada uno de los cuales realiza una acción concreta. Así tengo la sensación de que mi código es más fácil de mantener.
¡Espero que os sirva!
¡A disfrutar picando! 😉
Entrada visitada 722 veces