PopUps Accesibles

Si... ya sé que es una aberración pensar en ello, pero bueno... a veces nos vemos en la obligación de utilizarlos, y bien solo queda tener un poquito de dignidad y hacerlos bien.

A través de este pequeño articulo veremos cómo depurar nuestro código para que su contenido sea 100% accesible, y a convertir esta técnica en algo un poco más usable.

Desde el punto de vista de los navegadores con los que nuestro público accederá a la web podemos encontrarnos con tres casos:

1. El navegador soporta javascript y permite lanzar nuevas ventanas: Abriremos un popup con las características que le hayamos definido.
2. El navegador no soporta javascript pero permite lanzar nuevas ventanas: Lanzaremos una ventana del navegador normal y corriente.
3. El navegador no soporta javascript y no permite lanzar nuevas ventanas: La página se abrirá en la misma ventana.

 Ok... esto en XHTML significa

Nos ponemos en la primer situación: tenemos un enlace desde el que queremos abrir en un popup la página popup.html.

Unas técnicas muy vistas en la triple dobleu son las siguientes:

Pero, para mal de perezosos ambas están mal. Si abreventana() no se ejecuta, el contenido no será accesible. Además de que el contenido del popup no quedará accesible a los robots de los buscadores, por lo que la página no quedará indexada, sorry.

Lo ideal sería hacer algo como:

Con este código informamos claramente tanto al usuario como a su navegador de que el enlace se abrirá en una nueva ventana.

La función abreventana() sería la típica:

Es importante no olvidar el return false, de lo contrario se ejecutará la función de JavaScript y el href del enlace.

Si el AU permite ejecutar javascript y abrir nuevas ventanas, nuestra página se abrirá en una ventana con las propiedades que le hayamos definido. Si no soporta javascript pero sí permite abrir nuevas ventanas, el enlace se abrirá en una ventana estándar del navegador en cuestión. Si no soporta javascript ni permite abrir nuevas ventanas, la página se abrirá en la misma. Hemos cubierto todas las posibilidades.

Para terminar de ganarnos el sueldo, en la página popup.html, introduciremos un par de líneas de código para asegurarnos de que el usuario puede cerrar la ventana o volver a donde estaba (siempre puede usar el menú de su navegador, pero hagámosle la vida un poco más fácil).

Con esta etiqueta cubrimos el abanico de los navegadores con soporte de javascript. Ahora hacemos lo propio para los que no:

Conclusiones

Como hemos podido ver, hacer un poco más accesible una página es cuestión de llevar una metodología de trabajo correcta, teniendo siempre en mente al usuario.

En este caso hemos conseguido que la página popup.html sea totalmente accesible, tanto para los agentes de usuario como para los robots de búsqueda.