« ¿Los Frameworks apestan?
Cumbre de Arquitectura de la Información »

Links javascript accesibles

Visita este artí­culo en http://www.estadobeta.com/2006/05/09/links-javascript-accesibles/

Por Ismael en Comportamiento, artículos, javascript, tips

Técnica para construir links javascript accesibles.

A veces es importante agregar funciones javascript a tus links HTML, ya sea para cargar datos mediante Ajax o para - los dioses no lo quieran! - abrir un Pop-up:


<a href="#" onClick="javascript_pop_up('mi-popup.html')">apreta aquí para el pop up!</a>


El problema de esto es que es totalmente inaccesible: navegadores con Javascript deshabilitado son incapaces de llegar a esa información y, más importante, los motores de búsqueda no reconocen el vínculo y tus páginas se tornan efectívamente invisibles para el resto de los usuarios de la Red.

El concepto es sencillo: separa las capas de estructura y comportamiento. La estructura en el ejemplo es el vínculo entre un recurso y otro expresado en el link HTML. Un link accesible entre recursos es simple y conocido.


<a href="mi-popup.html" title="más info sobre el link">apreta aquí para el pop up!</a>

Pero cómo mantenemos el link accesible al mismo tiempo que agregamos la funcionalidad de pop-up? Entra a escena javascript, representando a la capa de Comportamiento.

En un archivo javascript externo, vinculado al documento HTML, podemos modificar dinámicamente la estructura del link y agregar otras funciones.

Para esto agreguemos un identificador a nuestro link.


<a href="mi-popup.html" title="más info sobre el link" id="popup">
apreta aquí para el pop up!
</a>

A continuación usamos Javascript para agregar dinámicamente la llamada al pop up, utilizando el atributo href del link original para ubicar el recurso a cargar dentro de él.


// Este es un documento JS externo
function superPopup(){
  // Obtener el link mediante su ID
  var el_link = document.getElementById(”popup”);
  // Agregar función pop up al evento onClick del link
  el_link.onclick = function(){
   // Obtener atributo HREF del link
   var href = this.href;
   // Abrir pop up usando atributo HREF
   window.open(href,”nueva ventana”, “width=300,height=400″);
   // Hay que retornar FALSE para anular el comportamiento original del link
   return false;
  }
}

Sólo falta activar estas modificaciones apenas se termine de cargar la página en la memoria del navegador:


window.onload = function(){
  superPopup();
}

Estas modificaciones se le hacen al DOM - la “imagen” del HTML que tiene el navegador en su memoria - y en realidad no son ejercidas sobre el documento HTML original cargado por el browser. Esto significa que los motores de búsqueda siguen viendo la versión original y accesible, y el documento permanece sencillo y mantenible.

Extensiones a este ejemplo para hacerlo más práctico son, por ejemplo, cambiar la ID por una class=”popup” y agregar un loop en la función que aplique el comportamiento de pop up a todos los links que tengan esa clase. Hay otros usos más avanzados para abrir fichas de detalle de galerías fotográficas u otros contenidos (como este o este, en lo cuales he trabajado - prueben activando y desactivando javascript en su navegador).

Aquí pueden bajar un ejemplo de este código funcionando.
super poup

seo,accesibilidad, desarollo web, javascript

Este artículo fue publicado en 9/5/2006 a las 7:16 pm y está archivado bajo Comportamiento, artículos, javascript, tips. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores. Puedes dejar un comentario, o hacer un trackback desde tu propio sitio.

26 comentarios para “Links javascript accesibles”

  1. Gravatarwachunei Dice:
    5/11/2006 at 11:48 am

    Esto es muy bueno y además permite a las personas que navegmos con pestañas decidir dónde abrir el link, en el pop-up o en una nueva pestaña.

    Otra cosa: en vez de
    getElementById('id') ¿Podría ser getElementByClass('class')?

  2. GravatarIsmael Dice:
    5/11/2006 at 12:52 pm

    De hecho, este tipo de funciones tiene más sentido cuando se aplica a multiples links por medio de clases. El problema es que la interfaz del DOM no define un getElementsByClassName. Se puede usar una de las muchas funciones que hay escritas para eso, escribir la tuya propia o, si usas la biblioteca Prototype, la excelente nueva función $$() que permite seleccionar elementos usando sintaxis CSS:


    var los_links = $$(".popup");
    for(var i=0;i<los_links.length;i++){
    los_links[i].onclick = function(){
    window.open(this.href,"nueva ventana",“width=300,height=400);
    return false;
    }
    }

    HTML también define el atributo rel para los links, que declara el tipo de relación entre el documento actual y el documento al que indica el link (por ejemplo rel=”bookmark” o rel=”tag”). En la misma función, podrías usar el atributo rel para decidir de qué forma abrir la ventana.

  3. Gravatartomás pollak Dice:
    5/11/2006 at 7:57 pm

    buen post ismael, igual me queda una duda. ¿qué pasa si el link llama a una función más compleja, y no directamente a abrir un HTML dentro de un popup?

    por ejemplo un llamado a XMLHttpRequest que involucra variables que la propia funcion obtiene desde otros lados. ahí no tendría mucho sentido linkear a un .html, ¿no?

  4. GravatarIsmael Dice:
    5/11/2006 at 8:21 pm

    Buena pregunta Tomás.
    (mi) respuesta: cuando el link está apuntando a otro recurso en la red -o sea, un recurso que tiene su propia URI y es posible visitarlo individualmente - tiene sentido poner la URI del recurso en el href del link (para que sea accesible sin javascript, o para que sea legible por lectores de pantalla para ciegos, o para que lo encuentren los buscadores, etc) y modificar el comportamiento del link con el DOM si así lo quieres.
    Los contenidos obtenidos por Ajax no son accesibles (en general) porque son generados dinámicamente en el servidor (consultas a la base de datos, settings del usuario, etc) y por lo tanto no tiene sentido hacer un link acesible a un contenido de naturaleza inaccesble.
    Dicho esto, es perfectamente posible el caso de cargar los contenidos de otro documento HTML mediante ajax. Si ese otro documento es “visitable” por sí mismo y se está usando Ajax sólo por cuestiones estéticas /prácticas, se puede linkear directamente al contenido.

    De todas maneras, si se puede incluir más parámetros en el evento onClick. Yo lo he hecho extrayendo los parámetros de otros atributos de los links, por ejemplo:


    <a href="pagina1.html" rel="par1|par2|par3">un link</a>

    En ese ejemplo puedes usar los parámetros codificados en rel. Básicamente se trata de “estirar” un poco el estándar con tal de mantener la accesibilidad. Un uso concreto que hice una vez es usar ese método para agregar Ajax a laos links y así poder “logear” en el server los rollovers y los clicks sin perder accesibilidad y SEO.

  5. GravatarIsmael Dice:
    5/11/2006 at 8:27 pm

    Ah! Por último, el mismo método (analizar los atributos de los links u otros elementos html para cambiarles el comportamiento con el DOM) tiene otros usos, por ejemplo: puedes seleccionar todos los links qie linkéen a un PDF y agregarles el icono de PDF (o Word, etc). Este post ilustra eso.

  6. GravatarMañungo Dice:
    5/12/2006 at 3:46 am

    En vez del window.onload, yo usaría el addEvent() de Quirksmode.org para evitar que pise otras funciones en la carga de la ventana.

    Ah! Y también se puede usar este truco para validar formularios:

    <input type="text" name="var" class="number">
    <input type="text" name="var" class="require email">
    etc...

    Y para ordenar y/o colapsar tablas con javascript

    <table class="sortable">
    <tr>
        <th class="number">Numero</th>
        <th class="string">Nombre</th>
    </tr>
    etc...

  7. GravatarIsmael Dice:
    5/12/2006 at 1:12 pm

    Cierto. Y eso me parece un muy buen uso del atributo “class”, por lo demás.
    En esencia, addEvent hace lo siguiente, con un check adicional de compatibilidad para navegadores antiguos:

    var old_onload = window.onload;
    window.onload = function(){
      if(old_onload)old_onload();
      miNuevaFuncion();
    }

    Si estas usando Prototype (por tu ejemplo de class=”sortable” me imagino que si), puedes aprovechar de usar:


    Event.observe(window,'load',miNuevaFuncion);

  8. Gravatartomás pollak Dice:
    5/14/2006 at 2:56 pm

    notable isma. :)

  9. GravatarRaspu Dice:
    5/22/2006 at 1:56 am

    Hola Ismael!

    sobre el script para los pop-up. ¿Y qué pasa si no quiero todas las ventanas con las mismas medidas?

  10. GravatarIsmael Dice:
    5/22/2006 at 2:31 am

    Ahí puedes definir tu propia convención para poner esos datos en los links:

    <a href="una-pagina.html" rel="300|400“>Un pop-up</>

    Luego extraes esos datos desde tu método Javascript:

    ...
    el_link.onclick = function(){
      // Obtener at>ributo HREF del link
      var href = this.href;
      var width = 300;var height = 400;//valores por defecto
      //si existe el atributo “rel” y está en el formato “xxx|xxx”,
      // lo usamos para extraer las dimensiones del popup.
      if(this.rel && this.rel.indexOf(”|”) > -1){
        dimensiones = this.rel.split(”|”);
        width = dimensiones[0];
        height = dimensiones[1];
      }
      // Abrir pop up usando atributo HREF y las dimensiones de arriba
      window.open(href,”nueva ventana”, “width=”+width+”,height=?height);
      // Hay que retornar FALSE para anular el comportamiento original del link
      return false;
    }
    …

  11. GravatarIsmael Dice:
    5/22/2006 at 2:32 am

    En todo caso: no hay que usar pop-ups! Los pop-ups son el diablo!

  12. GravatarGabriel Dice:
    7/9/2006 at 11:05 am

    hola a tod@s:
    En el tema de la accesibilidad y los js accesibles llega a ser complicado el entendimiento a las personas que a veces hacen alguna web y no son diseñadores profesionales,por ejemplo validando con TAW y HERA siempre tengo estos problemas y de veras que ya no se que codigo poner,a ver si alguien tiene alguna idea.
    Errores-Punto 8.1″”Se utilizan eventos dependientes del dispositivo y no existen eventos redundantes”"
    Errores-Punto 6.4″”Para los scripts y applets, asegúrese de que la ejecución de los manejadores de evento sea independiente del tipo de dispositivo”
    Errores-Punto 9.3″”Para los scripts, especifique manejadores de evento lógicos en vez de manejadores de evento dependientes del dispositivo.”"
    Este es el codigo utilizado y me parece que esta´n duplicados los eventos pero estos errores son continuos.

    
<a href="portada.htm" title="Enlace a una página con fotografia."
target="_blank" onClick="window.open(this.href, this.target,
'width=440,height=610'); return false;"
onkeypress="verifyKey(this,event);">
  13. Gravatarindi Dice:
    7/9/2006 at 4:18 pm

    no se si no comprendo biene stas explicaciones pero el codigo del popup no debería de abrirse en 300×400,entonces el link a google se abre a ventana completa ,seguro que debe de ser asi?

  14. Gravatarkassel Dice:
    1/5/2007 at 6:23 am

    Hola decir que esta muy bien, estoy empezando con temas de triple-a, y este es un gran problema, me da errores de si no tiene la javascript activado….., pero lo he abierto el ejemplo con el explorer y no me abre el popUp, sino que me abre dentro de la misma ventana el google.

  15. GravatarPablo Reyes Dice:
    2/8/2007 at 8:35 pm

    En firefox funciona de pelos, pero en Internet Explorer no cancela el click. Ejecuta tanto el javascript como también lo que se encuntra en el href. ¿Alguna solución sin contaminar el código HTML?

  16. GravatarPablo Reyes Dice:
    2/8/2007 at 8:37 pm

    kassel!, no es que te abra el popup en la misma ventana. Es que no alcanza abrir el popup que ya ha redirigido a lo que indica el href. En otras palabras, sucede lo que planteo en el anterior comentario.

  17. GravatarIsmael Dice:
    2/8/2007 at 8:57 pm

    Mmm habría que probar reescribiendo el href de los links


    function superPopup(){
    // Obtener el link mediante su ID
    var el_link = document.getElementById(”popup”);
    // Agregar función pop up al evento onClick del link
    var href = el_link.href;
    el_link.href = “#”;
    el_link.onclick = function(){
    // Abrir pop up usando atributo HREF
    window.open(href,”nueva ventana”, “width=300,height=400″);
    // Hay que retornar FALSE para anular el comportamiento original del link
    return false;
    }
    }

    Lo que no me gusta de esa solución es que se pierde la URL en el status bar del browser.

    Otra opción es reescribir el evento onclick para que retorne FALSE literalmente:


    function superPopup(){
    // Obtener el link mediante su ID
    var el_link = document.getElementById(”popup”);
    // Agregar función pop up al evento onClick del link
    var href = el_link.href;
    el_link.onclick = "window.open(”+href+”,’nueva ventana’, ‘width=300,height=400′);return false“;
    }

  18. GravatarKaro Dice:
    8/22/2007 at 5:21 pm

    Hola Ismael.
    mira uso el codigo que postiaste tal cual pero no funciona abre el .href en una apgina en vez del pop up mi ide es hacer que abra los links en n div con ajax.
    te dejo el link para http://mkstudio.com.ar/link.html por favor fijate como puedo hacer para que funcione aveces funciona pero toma el primero nada mas.

  19. GravatarIsmael Dice:
    8/22/2007 at 5:33 pm

    Karo, quieres llamar contenido con Ajax o abrir los popups? Son dos cosas completamente distintas.
    Sólo te abre el orimer popup porque todas las IDs de tus links son iguales, Recuerda que las IDs son únicas. Si quieres aplicar el comportamiento a varios links, tienes que usar clases en lugar de Ids. En el segundo comentario explico cómo.

    Ahora, si lo que quieres es usar Ajax, este artículo no tiene nada que ver.

  20. GravatarKaro Dice:
    8/23/2007 at 9:22 am

    Hola Ismael
    yo te puse el ejemplo con el popup pero en realidad lo que voy a hacer despues es en el lugar donde abre el popup que llame funcion en ajax para que abra en un div = ya me diste la respuesta debe ser por los id ahora intento hacer con clases

    despues te comento si me salio o no ;) Gracias

  21. Gravatarkaro Dice:
    8/23/2007 at 11:20 am

    pd: aca te dejo ismael lo que trataba de hacer es basico para vos pero para mi es algo nuevo por que recien comienzo con el mundo de programacion. lo que intentaba de hacer fijate aca en el ejemplo http://www.mkstudio.com.ar/aja/link.htm
    es simplemente al hacer click sobre algun link que abra en algun div situado en la pagina con “rel” le digo en que div quiero que abra y con ajax cargo un html en el div .. muchas gracias por todo en este site cada dia aprendo un poco mas…

  22. GravatarBOmAikok Dice:
    12/3/2007 at 1:02 pm

    xgetafrttrrhf
    art

  23. GravatarVyKqjuon Dice:
    4/30/2008 at 9:37 pm

    phentermine
    phentermine

  24. GravatarJuan Manuel Dice:
    6/23/2008 at 12:31 am

    Me parece muy bueno, me sirvio de mucho para abrir popup’s de manera dinamica, haciendo algo como esto:

    function superPopup(id_liga,leccion){
    // Obtener el link mediante su ID
    var el_link = document.getElementById(id_liga);
    // Agregar función pop up al evento onClick del link
    el_link.onclick = function(){
    // Obtener atributo HREF del link

    var href = this.href;
    // Abrir pop up usando atributo HREF
    window.open(href,leccion, “width=300,height=400″);
    // Hay que retornar FALSE para anular el comportamiento original del link
    return false;
    }
    }

    como se dan cuenta recibe como parametro el Id del link y el nombre que le dare al popup.

    Esto ya que creo toda una lista de links diferentes con php y cada uno habre un popup con una diferente ruta y todos con nombre diferente.

    Lo cargo asi:

    window.document.onload = function(){
    obtenerLeccionesNGM($id_nivel,$id_grado,$id_materia,$id_plantel);

    foreach($lecciones as $leccion){
    $id_link = $leccion[’id_nivel’].”_”.$leccion[’id_grado’].”_”.$leccion[’id_materia’].”_”.$leccion[’numero’];
    // cargo el link con su nombre espesifico
    ?>
    superPopup(”,”);

    }

  25. GravatarLista Dice:
    7/7/2008 at 4:36 am

    Me parece muy bueno, mi pregunta es: cómo se podría abrir al cargar la página??
    gracias anticipadas

  26. GravatarTeasetslaro Dice:
    10/31/2008 at 2:39 pm

    http://golegole.com
    7YUIjhred453Dfkjhew

Deja un comentario

XHTML: puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>