Popups accesibles con javascript
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:
- Su navegador soporta javascript y permite lanzar nuevas ventanas: Abriremos un popup con las características que le hayamos definido.
- Su navegador no soporta javascript pero permite lanzar nuevas ventanas: Lanzaremos una ventana del navegador normal y corriente.
- 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.
En categoría: Accesibilidad | Comentarios: 2703 | Ver o añadir comentarios |
Permitida la reproducción parcial o total citando la fuente: jlvelazquez.net
