Cuestiones de accesibilidad al validar un formulario

Tabla de contenidos

1. Introducción
2. Validar «a la vieja escuela»
3. Advertencias textuales
4. Un método mejor: una lista de vínculos

Introducción

No, este artículo no trata del enésimo script que asegure que los datos de un usuario nos llegan lo más depurados posible. Aunque para el formulario de contacto ficticio de los ejemplo he creado varios .js, y en el caso del tercero he añadido una validación de respaldo en el servidor por medio de PHP, de lo que quiero hablar es de un medio accesible de advertir de los errores de validación a un usuario que esté empleando un lector de pantalla.

Validar «a la vieja escuela»

Aunque creo que ya se han desterrado en este siglo —espero no estar proyectando mis deseos—, no hace tanto no era infrecuente encontrarse con que al enviar un formulario se nos comunicaban los errores por medio de ventanas de alerta de JavaScript, al estilo de ésta:

Una ventana de alerta con una advertencia

Si bien alert() es uno de los mejores amigos del desarrollador web mientras hace pruebas —y pruebas, y pruebas, y pruebas— mientras programa un script, como medio de comunicación con el usuario cuenta con la sutileza de una bofetada, además de una serie de inconvenientes desde el punto de vista de la usabilidad:

• Primero, y el más grave de todos, bloquea el funcionamiento de un navegador —Explorer— hasta que no se interactúa con la ventana de alerta.
• Segundo, distrae la atención del usuario cuando está rellenando un formulario, que puede contener datos importantes.
• Tercero, y a título personal, me molesta la campanita de Windows que las acompaña.

Y si alguien quiere hacer la prueba, le invito a que envíe este formulario sin rellenar ninguno de los campos. Verá que la experiencia es dolorosa.

Advertencias textuales

En vista de la pobre experiencia de usuario que suponían las ventanas de alerta, la tendencia de los últimos tiempos se ha dirigido a presentar advertencias textuales al usuario en las inmediaciones del campo en cuestión, de manera similar a como yo lo hago en este segundo ejemplo:

Un texto de advertencia bajo los campos del formulario

Las formas concretas pueden variar dependiendo de la complejidad de la programación o el diseño subyacente, desde un texto plano a las más sofisticadas capas con transparencias, pero desde el punto de vista de la programación mi experiencia de usuario me ha llevado a identificar tres técnicas bastante extendidas:

1. Emplear un texto de advertencia como una imagen de fondo: La idea es que si se comete un error, se cambia la clase aplicada con CSS al elemento padre del campo, con lo que se puede leer el texto. Bueno, si no se es invidente, claro, porque el mejor medio para hacer accesible una imagen que consiste en texto es repetir éste en su atributo alt, pero eso es imposible si la imagen pertenece a la hoja de estilo y no al marcado del documento.
2. Incluir una imagen transparente en el marcado, y sustituirla: Aquí la mecánica consiste en que la imagen ya existe en el marcado, debajo o al lado o flotante sobre el campo del formulario, pero que o bien es transparente o bien tiene el color del fondo de la página. Cuando se da el error de validación, el src de la imagen se modifica para que ésta se sustituya por otra que cuenta con el texto de advertencia. En el mejor de los casos, si se atiende al punto 6.2 de las WCAG 1.0 (inglés), este método presenta el problema que indicaré para la técnica 3; en el peor, estamos en la misma situación que para la técnica 1.
3. Incluir por medio de JavaScript basado en DOM un texto tras el campo erróneo: El texto generado de esta manera debería ser accesible para los lectores de pantalla, pero el problema es que los usuarios invidentes suelen navegar por un formulario ayudándose de la tecla Tab. Cuando se pulsa esta tecla en un formulario, el foco salta del campo o control activo al siguiente; en consecuencia, el texto incluido entre dos campos nunca llega a tener el foco, por lo que el usuario del lector de pantalla no puede percibirlo.

Como prueba, navego por el formulario con JAWS 6.20 sobre Internet Explorer 7: entro en el modo de formulario, y salto del campo de los apellidos al de la edad sin rellenar ningún dato. Lo que oigo es: «ENTER modo formulario activado TAB apellidos asterisco TAB edad asterisco». Como se ve, JAWS no ha leído el mensaje de «Por favor, rellene el campo con sus apellidos».

Si alguien no puede hacer pruebas, puede escucharlo a continuación:

Así, pensando en la cuestión del foco, se me ocurrió la solución que explico a continuación.

Un método mejor: una lista de vínculos

Como solución, se me ocurrió crear tras los campos del formulario una lista de vínculos cuyo contenido son precisamente los texto de las advertencias. Al navegar con la tecla Tab, tras el último campo y antes del botón de enviar el primer vínculo de los existentes atrapa el foco…

Una lista de vínculos con las advertencias

…y así se hace legible para el lector. Además, emplear un vínculo tiene la ventaja adicional de que se puede proporcionar un acceso rápido al campo que se quiera corregir. Cuando se vuelve al campo en cuestión, elimino el vínculo correspondiente, y así, si se corrigen todos los errores, tras el último campo se accede al botón de envío. Dejo aquí el mismo formulario de antes, con esta técnica aplicada.

Al terminar de navegar por los campos con JAWS, el lector recorre la lista de advertencias. Lo que oigo es: «por favor repita su contraseña asterisco cuadro de contraseña escriba texto TAB advertencia falta completar el campo con su nombre si lo desea haga clic en este enlace para introducirlo enlace».

Como antes, se puede escuchar la siguiente grabación:

Por supuesto, como siempre que se trabaja en un script con la accesibilidad en mente, proporciono un mecanismo de validación en el lado del servidor para los usuarios que no tengan activado el soporte de JavaScript, que muestra la lista con las advertencias antes de ofrecer el mismo formulario:

Una lista de advertencias devuelta por el servidor

De momento éste es el mejor medio que se me ha ocurrido, pero espero que sirva a alguien de inspiración para encontrar alguna solución mejor.