Hoy en día, es frecuente el uso de muchas soluciones en función de mejorar la experiencia del usuario y por ende, aumentar la usabilidad de las aplicaciones. Entre esas soluciones, sobre todo en aplicaciones web, se encuentran las ventanas modales.
Una ventana modal, puede ser entendida como una ventana emergente que tiene una función específica y que aparece a partir de una ventana madre, es decir, son esas ventanas que aparecen (sin notificación de nueva ventana y sin la recarga de otra página) flotando sobre la ventana madre que le dio origen.
En líneas generales, son ventanas que funcionan como contenedores, con el objeto de poner a disposición del usuario (de forma fácil) algún tipo de información, como por ejemplo: imágenes, formularios de contacto, de acceso, alertas, notificaciones y mensajes de ayuda.
Una de sus características más distintivas, es que no permite conmutar a la ventana madre hasta que no se haya ejecutado la acción para la que fueron diseñadas (enviar un mensaje, ingresar a un sistema o sencillamente pulsar en algún control que permita cerrarlas.
Como mencioné más arriba, su propósito fundamental es mejorar la experiencia del usuario; pero ¿qué pasa cuando ese usuario posee alguna discapacidad?
Frente a usuarios con discapacidad, las ventanas modales pueden llegar a ser (en la mayoría de los casos es así) un atentado contra la accesibilidad del sitio, obteniéndose un efecto contrario a su propósito, pues la experiencia del usuario termina siendo muy desagradable.
¿Qué tiene de desagradable una linda ventanita diseñada para que todo sea más fácil?
En el caso de aplicaciones web, esas ventanas suelen ser generadas con JavaScript y resulta, que JavaScript no siempre funciona correctamente sobre todo en el caso de modificaciones sobre la marcha (generar contenido, agregar atributos, etc.); pues los lectores de pantalla suelen guardar un buffer virtual con el DOM del documento y no siempre este se actualiza según los cambios que realice el código JavaScript. A eso hay que sumarle que si no se trabaja con JavaScript de forma no intrusiva, la cosa va a peor.
Y alguno se preguntará: ¿no se supone que las personas con discapacidad visual navegan con el javascript desactivado?
La verdad, es que eso es más un mito que una realidad. La mayoría de los usuarios que tenemos discapacidad, no desactivamos javascript, por eso, cuando no se hace uso correcto de este lenguaje, si que nos complica la navegación y el acceso a la información.
Cuando usas lector de pantalla, la mayoría de estas ventanas modales (sobre todo si están mal implementadas) ni siquiera son advertidas por el lector, con lo que te quedas sin acceder a lo que la ventana ofrece. Un ejemplo sencillo, es el que puede observarse en la página web del SAIME [1] (página web gubernamental venezolana) para la tramitación de pasaportes y otros documentos de identificación. Cuando se accede a esta página usando como agente de usuario a Mocilla FireFox, los formularios aparecen como ventanas modales y no hay forma de acceder a ellos si eres usuario de lector de pantalla.
Pero el problema no solo se da con usuarios que utilizan lectores de pantalla. Lo cierto, es que estas ventanas pueden ser un problema para personas con discapacidad visual que tengan remanente (deficientes visuales), porque como explicaba más arriba, este tipo de ventana se solapa (flota) sobre la ventana madre y puede no distinguirse lo suficiente, causando confusión, sobre todo en los casos de usuarios que navegan con sus propios estilos y usan alto contraste, llegando en algunos casos, a perder parte del contenido y de los controles que se hayan diseñado para cerrarla, pues es común que muchos diseñadores utilicen CSS con imágenes de fondo para el caso en que usen enlaces en lugar de botones como elemento de control sobre la misma.
Otro problema que se puede presentar, es en el caso de usuarios que utilizan magnificadores, pues si el aumento es considerable, la ventana puede romperse y hasta observarse descolocada. Esto a su vez, puede solapar los contenidos de la ventana madre, dificultar el orden de tabulación (que afecta también a personas con discapacidad motora) o simplemente provocar que el usuario no vea nada de lo que se muestra en la ventana, entre otros problemas.
¿Qué hacer entonces?
Si me preguntasen directamente a mí, respondería ¡No usen ventanas modales! Pero bueno, vamos a ver qué alternativas pueden implementarse.
Una (y la que algunas personas aplican) es WAI-ARIA (Rich Applications) [2].
Si bien es cierto que WAI-ARIA tiene como objetivo mejorar la accesibilidad de aplicaciones, especialmente el contenido dinámico y los controles de interfaz de usuario desarrollados con AJAX, HTML y JavaScript, así como con tecnologías relacionadas, la verdad es que por ser unas técnicas que aún no son estándar aprobado y que no llevan mucho tiempo desarrolladas, las ayudas técnicas no suelen tener (en la mayoría de los casos) el mejor comportamiento con su implementación, además que muchos usuarios no saben cómo interactuar con WAI-ARIA y sus herramientas de apoyo, trayendo como consecuencia que la accesibilidad y la experiencia de usuario se vean igualmente afectadas.
Otra alternativa (quizás mejor opción) es crear la ventana con HTML y CSS [3], de tal forma que no se dependa de JavaScript para generar el contenido.
Así, puede ocultarse el código de forma accesible con CSS y hacer que con algún control (enlace por ejemplo) aparezca la ventana (el código) una vez que se pulsa en él.
De esta forma, el contenido (sea cual fuere) estaría en la ventana madre y sería accesible aún si se tuvieran tanto JavaScript como CSS desactivados y si no lo estuvieran, JavaScript solo sería para controlar algunos eventos que faciliten el acceso a la ventana (contenido).
Un ejemplo de esta implementación se puede observar en algunas funcionalidades que ofrece WordPress. En este CMS, estas ventanas se activan pulsando en un enlace que lleva a otra zona de la misma página (generalmente al final de todo el texto) pero visualmente se aprecian solapadas con respecto a la ventana madre.
Particularmente a mí, como usuario con discapacidad visual me sigue resultando desconcertante, porque a veces el enlace no te desplaza justo al final de la página, pero no puedo negar que por lo menos puedo acceder a la información y si es un formulario, rellanarlo sin mayores inconvenientes.
Finalmente, como siempre hago alguna sugerencia, la primera que quisiera hacer es:
- Analiza, si realmente es indispensable el uso de una ventana modal en el diseño de tu aplicación y si no lo es, no la utilices. No por implementar más soluciones de usabilidad tu aplicación será realmente más usable y accesible.
Si definitivamente el uso de ventanas modales favorecerá la usabilidad de tu aplicación:
- Procura usar JavaScript no intrusivo.
- No dejes todos los eventos dependientes únicamente del ratón (mouse).
- Trata de que el diseño de tu ventana posea el suficiente contraste con respecto a la ventana madre.
- Brinda alguna alternativa al contenido de la ventana, pensando en el caso de que el usuario tenga JavaScript desactivado.
Por si interesa profundizar
- Servicio Administrativo de Identificación, Migración y Extranjería (SAIME)
- WAI-ARIA Overview
- Ventanas Modales con CSS
Incluye-Tek: Tecnología Inclusiva 