XHTML y target=”_blank” posible
30 Mayo 2006
Como todos sabemos, no es válido utilizar el atributo target si nuestra página está validando contra un dtd de (X)HTML estricto.
Pero podemos simular este comportamiento mediante un javascript no intrusivo:
En la web de Sitepoint existe un artículo que explica cómo hacerlo:
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors [i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
anchor.target = "_blank";
}
}
}
window.onload = externalLinks;
<a href="http://www.antxoa.com" rel="external">Blog de Antxoa</a>
Pero este script tiene un fallo de accesibilidad. Si queremos satisfacer el nivel WCAG-AA, necesitaremos avisar al usuario de que se va a abrir una nueva ventana.
Podemos pensar en aplicar un atributo title del estilo:
<a href="http://www.antxoa.com" rel="external" title="este enlace se abrirá en una nueva ventana">Blog de Antxoa</a>
Pero si lo hacemos, todos los usuarios sin soporte javascript tendrán que aguantar el aviso, con unas instrucciones totalmente erróneas.
Lo ideal es que sólo aparezca el aviso si se tiene soporte javascript y es muy fácil: basta con incluir el atributo title en la propia función javascript:
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors [i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
anchor.target = "_blank";
anchor.title = "este enlace se abrirá en una nueva ventana";
}
}
}
window.onload = externalLinks;
<a href="http://www.antxoa.com" rel="external">Blog de Antxoa</a>
Y asunto arreglado. Pero para dejarlo aún más perfecto, lo que vamos a hacer es modificar ligeramente la forma de incluir el title para que, en el caso de que ese enlace tenga ya este atributo con un valor, no lo reemplacemos, sino que lo mantengamos, añadiéndole la coletilla de la nueva ventana:
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors [i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
anchor.target = "_blank";
if (anchor.getAttribute("title")){
anchor.title = anchor.getAttribute("title") + " (se abre en nueva ventana)";
}
else{
anchor.title = "(se abre en nueva ventana)";
}
}
}
}
window.onload = externalLinks;
<a href="http://www.antxoa.com" rel="external">Blog de Antxoa</a>
Ahora sólo queda por decidir si realmente queremos abrir ventanas nuevas o no…
