Javascript para marcar los enlaces en ventana nueva

Algunas veces cuando iniciamos un nuevo proyecto de accesibilidad, nos enfrentamos a sitios web que llevan mucho tiempo/contenido a sus espaldas.

Ello requiere una revisión hacia atrás o del histórico que en ocasiones no puede publicarse/automatizarse todo lo que quisiéramos y los plazos se alargan.

En estos casos y mientras se solucionan los problemas, se nos puede pasar por la cabeza realizar pequeños parches que ayuden a mejorar la accesibilidad del sitio mientras atacamos el problema de raíz.

Este es uno de esos casos y lo que vamos a comentar a continuación NO ES UNA SOLUCIÓN VÁLIDA, sino una prueba de concepto 😉

Vamos a utilizar un pequeño código javascript para marcar aquellos enlaces que se abren en ventana nueva y cuyo título (atributo title) esté vacío.

La solución correcta para marcar los enlaces en nueva ventan pasa por:

• No abrir enlaces en nueva ventana. Suena extraño, pero si un usuario quiere abrir una ventana nueva, ya lo hará. Tenemos que tener en cuenta de que no sabemos qué dispositivo está utilizando el usuario y que a lo mejor le genera un proble el forzar que se abra una nueva ventana.
• Incluir un texto a continuación indicándolo. Ejemplo: wikipedia (enlace en ventana nueva)
• Incluir una imagen dentro del texto ancha cuyo alt indique que el enlace abrirá en ventana nueva. Ejemplo del código <a target=»_blank» href=»http://es.wikipedia.org»>wikipedia <img src=»imagen.jpg» alt=»enlace en nueva ventana»/></a>
• Incluir en el atributo title del enlace un texto que explique que el enlace se abre en ventana nueva. Ejemplo: <a target=»_blank» href=»http://es.wikipedia.org» title=»enlace en ventana nueva»>wikipedia </a>

Esta última solución puede hacer que algunos usuarios que utilicen lector de pantalla, no perciban el mensaje, ya que por defecto jaws no lee los title de los enlaces.

Qué hace el script:

Código javascript que busca los enlaces con atributos target=»_blank» y si no tienen title, indica que el enlace se abrirá en ventana nueva. Si además el enlace es a otro dominio, también lo incluye en el title.

Instrucciones de uso:

• Copiar el código
• Incluirlo justo antes de la etiqueta </body>. De esa manera no impediremos que cargen el resto de scripts (como los de estadísticas, por ejemplo)

<!-- inicio js que muestra target nueva ventana -->
<p>Ejemplo: <a target="_blank" href="http://es.wikipedia.org/">.</a></p>
<script type="text/javascript">
  function externalLinks(){
   if (!document.getElementsByTagName);
   var activedomain=document.domain;
   var anchors = document.getElementsByTagName("a");
   for (var i=anchors.length-1; i>=0; i--)     {
     var anchor = anchors[i];
     var url=anchor.href;
     if(anchor.target=="_blank"){
       if(!anchor.title){anchor.title = " enlace en nueva ventana ";}
       var num=url.search(activedomain);
       if (num<0){ anchor.title = anchor.title+"a sitio externo ";}
       }
     }
 }
externalLinks();</script>
<noscript>Javascript no disponible,
no se marcar&aacute;n autom&aacute;ticamente los enlaces
que se abren en ventana nueva
</noscript>





<!-- final js que muestra target nueva ventana -->

Conclusión

Aunque no todos los usuarios se beneficiarán de esta solución, sí puede valernos como una mejora temporal de la accesibilidad.

Además, el script puede ser fácilmente modificado para otras tareas, como por ejemplo incluir la etiqueta alt a las imágenes que no la lleven o darnos ideas para crear los scripts de servidor que ataquen directamente las bases de datos…