Accesibilidad

Lanzando un popup
contemplando todas las posibilidades.

En ocasiones y por exigencias ajenas a los desarrolladores, nos vemos obligados a abrir
páginas en esas "amables" ventanas que dicen llamarse popups. Entendiendo por popup
como aquellas ventanas a las que podemos eliminar funcionalidades como la barra de
direcciones, la barra de estado; definir su tamaño, etc.

A través de este pequeño tutorial 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. Su navegador soporta javascript y permite lanzar nuevas ventanas:

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

Y todo esto traducido a XHTML significa...

Nos ponemos en 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 www son las siguientes:

<a href="javascript:abreventana()">texto del enlace</a>

<a href="#" onclick="abreventana()">texto del enlace</a>

Ninguna de las dos es correcta. 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 (a fecha de hoy, éstos no son
capaces de seguir enlaces generados mediante JavaScript).

La solución correcta sería algo así:

<a href=”popup.htm” onclick=”abreventana()” target=”nuevaventana”

title=”Se abre en otra ventana”>(nueva ventana) texto del enlace</a>

Como podéis ver 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:
<script language="javascript" type="text/javascript">
function abreventana(){
window.open(this.href,"nuevaventana",propiedades);
return false;
}
</script>

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. Como podéis ver, 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).

<script type="text/javascript">
<![CDATA[
document.write("<a href='#' onclick='window.close()'>Cerrar
ventana</a>")
]]>
</script>

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

<noscript>
<a href="padre.html">Volver</a>
</noscript>

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.