consultor web

Target blank accesible con javascript

En muchas ocasiones durante un desarrollo web accesible, necesitamos usar el atributo target=»_blank» para abrir mediante un enlace externo una ventana nueva.

En este caso, haremos uso de la librería desarrollada en javascript para abrir los enlaces externos en pestañas nuevas de nuestro navegador, cumpliendo los estándares web del W3C y las pautas de accesibilidad web correspondientes.

Características target=»_blank» accesible con javascript

ExternalLinks es una pequeña librería en javascript que nos permite incluir el atributo target=»_blank» de forma accesible y usable, permitiendo agregar enlaces externos de forma no intrusiva, aunque el navegador no tenga javascript habilitado.

• Todos los enlaces externos de abren en pestañas nuevas.
• Y también, los enlaces que hagan uso del atributo rel=»external».
• Cumple los estándares web del W3C y las pautas de accesibilidad web.
• El código fuente de nuestro desarollo web queda más limpio y legible.

Descargar ExternalLinks JS

ExternalLinks JS (749 bytes)

Código target=»_blank» accesible con javascript

A continuación, adjunto el código de la librería ExternalLinks para ejecutar el atributo target=»_blank» de forma no intrusiva:

/**
 * Enlaces Externos Accesibles
 * (c) 2009 Alejandro Arco - https://alejandroarco.es
 * MIT-style license
 */
setExternalLinks=function() {
	if(!document.getElementsByTagName) { return null; }
	
	var anchors = document.getElementsByTagName('a');
	for(var i=0;i<anchors.length;i++) {
		var anchor = anchors[i];
		if((anchor.getAttribute('href').substr(0,7)=='http://' && anchor.getAttribute('href').lastIndexOf(document.domain)==-1) || anchor.getAttribute('rel')=='external') { anchor.setAttribute('target','_blank'); }
	}
}

if(document.all&&window.attachEvent) { window.attachEvent("onload",setExternalLinks); } // IE-Win
else if(window.addEventListener) { window.addEventListener("load",setExternalLinks,false); } // Otros