Ir directamente al contenido de esta página

Ventanas emergentes accesibles

Este artículo se publicó originalmente en noviembre de 2006, en una versión anterior de nuestra página web. Lo publicamos aquí por motivos históricos.

La aparición de ventanas emergentes (o popups) es una de las características más comunes de los sitios que navegamos diariamente desde hace ya unos cuantos años.

En diferentes épocas han sido usadas de diversas formas y se hicieron muy comunes cuando JavaScript se hizo popular. Poco a poco, cada vez más y más sitios abrían ventanas que saltaban ante nuestros ojos tras seguir un vínculo, y muchas de estas no eran precisamente ventanas con información útil, agradable ni solicitada. La era de los popups publicitarios había llegado. Y a decir verdad, aunque ya en decadencia, están lejos de su extinción.

Debido al problema que representaban estas molestas ventanas, se desarrollaron extensiones para bloquearlas en los navegadores y herramientas independientes para prevenirlas.

Sin embargo, en muchas ocasiones, el uso de estas ventanas emergentes tiene un sentido justificado, ya sea por diseño o por funcionalidad, y es para estos casos que presento esta versión del script. Al momento de escribir este texto, hay montones de versiones diferentes por ahí. Sin embargo, ninguna de las que he visto cumple con todas las características que he intentado cumplir. Por supuesto, esto puede ser debido, entre otras cosas, a la cantidad de páginas que hay en Internet y a la cantidad de gente desarrollando material continuamente. Así que si alguien ha visto un script similar a éste, no se enfade conmigo, tómelo como una coincidencia.

Requisitos del script

  1. Totalmente compatible con XHTML 1.1.
  2. Nivel de accesibilidad AA, a ser posible AAA.
  3. Script no obstrusivo, ni a la navegación ni al usuario.
  4. Flexible y modular.

Pero antes de seguir, veamos el ejemplo del vínculo en funcionamiento.

Los vínculos

Como el script debe ser accesible y compatible con la más estricta definición de XHTML, no podemos hacer uso de sintaxis propietarias, atributos inventados, o llamadas a JavaScript con métodos como onclick.

Estas restricciones son un poco estrictas; sin embargo, haciendo uso del DOM y con un poco de imaginación no es demasiado problema.

El código del vínculo es:


<a id="popup1" rel="popup-200-100-no-no-no-no-yes" href="ampliacion_01.htm">  
  Este vínculo abre una ventana nueva de forma estándar si tiene activado JavaScript;   
  si no lo tiene, carga el contenido en esta misma ventana.
</a>
	

Analicemos el vínculo parte por parte.

Primero, tenemos el href="ampliacion_01.htm". Aquí podemos ver que es un vínculo normal y corriente, que llama a una página normal, no a una aplicación o script. Obviamente la llamada podrá ser a una página PHP, ASP, o cualquier otro tipo de tecnología, lo importante es que llamamos a una página y no a una función del script.

A continuación, vemos el id="popup1". Este id podría ser cualquier otro, su única función en este caso es mostrar el uso del atributo. Entre los usos que se le pueden dar, estaría combinarlo con una regla determinada en una hoja de estilo a fin de modificar las propiedades visuales de este vínculo, usar un getElementById en un javascript para hacer algo con él, etc.

A continuación, vemos el rel="popup-200-100-no-no-no-no-yes". El uso de este atributo con esta cadena de valores es la que hace el trabajo desde el HTML.

Hay que mencionar que hemos estirado, tal vez distorsionado, el uso del atributo rel. Depende de cómo lo veamos. Este atributo debe indicar la relación entre un documento y el que está vinculado en el href. En este caso, indica que el documento que se llama deberá aparecer en una ventana emergente, lo cual es, más o menos, un tipo de relación; pero aprovecho la flexibilidad de la sintaxis de los valores de este atributo para anexar los parámetros de la ventana emergente que se va a abrir.

El script

Quien lo desee puede ver el script completo. Sin embargo, comentaremos aquí algunas de sus líneas.


if ((ListaVinculos[n].attributes.rel != null) && 
  ((ListaVinculos[n].attributes.rel.value.search(/popup/i) >= 0)    
	

Primero creamos una lista con los vínculos de la página (ListaVinculos). Después la procesamos a fin de quedarnos sólo con los vínculos que nos interesan (SubListaVinculos). De esta manera se descarga de trabajo el script dado que su funcionamiento está basado en escuchas de eventos, es decir, el script estará pendiente de lo que el usuario haga en la página. Cuanto menor sea el número de aspectos que tenga que vigilar, mejor.


if (navigator.userAgent.search(/msie/i) >= 0) {
  SubListaVinculos[n].attachEvent("onclick", GeneradorDeVentanas); // Explorer  
} else {
  SubListaVinculos[n].addEventListener("click", GeneradorDeVentanas, false); // DOM   
}
	

Una vez que los vínculos que han de abrir las ventanas emergentes están identificados, les asignamos las escuchas. Como se puede apreciar el el código superior, hemos de usar una sintaxis diferente para Explorer, dado que este navegador no soporta adecuadamente el DOM.


var popup = window.open(pagina, "VentanaEmergente", 
  "width="+propiedades[1]+",height="+propiedades[2]+",
  status="+propiedades[3]+",scrollbars="+propiedades[4]+",
  toolbar="+propiedades[5]+",menubar="+propiedades[6]+",
  resizable="+propiedades[7]+'"');
	

A continuación, separamos la lista de atributos de la nueva ventana, y si uno de sus valores es popup (palabra seleccionada para identificar el tipo de acción), el script abrirá la ventana nueva y el contenido será lo que hayamos puesto en el atributo href del vínculo.

Carga del script

Dado que este script trabaja asignando escuchas a elementos de la página, dichos elementos deben estar ya presentes a fin de que no se produzcan errores. Por lo tanto, la llamada al archivo .js que contiene las funciones debe ubicarse al final del documento y no al principio como es costumbre.

Accesibilidad del script

Si el usuario no dispone de un navegador con JavaScript, o dicha tecnología se encuentra desactivada, no se abrirán ventanas emergentes, pero no habrá pérdida de información para el usuario, ya que el contenido aparecerá en la misma ventana.

Esta entrada se publicó el 20 de julio de 2008, se archivó en , y fue etiquetada como . Autor: PatomaS. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2017