Addaw, ir a inicio Donar

Técnica Scripts de cliente WCAG 2.2

SCR24Usar la mejora progresiva para abrir ventanas nuevas a petición del usuario

En resumen

Esta técnica explica cómo abrir un enlace en una ventana o pestaña nueva mediante un script que avisa previamente al usuario (añadiendo «se abre en una ventana nueva» al texto del enlace), funciona con ratón y teclado y, si la ventana no se abre, deja que el navegador siga el enlace en la misma ventana. Evita desorientar a usuarios de lectores de pantalla y a personas con dificultades cognitivas ante ventanas que aparecen sin aviso.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es evitar la confusión que puede causar la aparición de ventanas nuevas que el usuario no ha solicitado. La apertura repentina de ventanas nuevas puede desorientar a algunos usuarios o pasarles completamente desapercibida. Las ventanas o pestañas nuevas pueden abrirse con el atributo target de HTML o con JavaScript. El ejemplo siguiente demuestra cómo abrir ventanas nuevas con un script: añade un manejador de eventos a un enlace y avisa al usuario de que el contenido se abrirá en una ventana nueva.

Ejemplos

Usar JavaScript para abrir una pestaña o ventana nueva

Marcado:

El script se incluye en la cabecera del documento, y el enlace tiene un id que el script puede usar como punto de enganche.

<script src="popup.js"></script>
...
<a href="help.html" id="newwin">Show Help</a>

Script:

window.onload = addHandlers;
function addHandlers(){
  var objAnchor = document.getElementById('newwin');
  if (objAnchor){
    objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
    objAnchor.onclick = function(event){return launchWindow(this, event);}
    // UAAG requires that user agents handle events in a device-independent manner
    // but only some browsers do this, so add keyboard event to be sure
    objAnchor.onkeypress = function(event){return launchWindow(this, event);}
  }
}
   function launchWindow(objAnchor, objEvent)
   {
     var iKeyCode, bSuccess=false;
     // If the event is from a keyboard, we only want to open the
     // new window if the user requested the link (return or space)
     if (objEvent && objEvent.type == 'keypress')
     {
       if (objEvent.keyCode)
         iKeyCode = objEvent.keyCode;
       else if (objEvent.which)
         iKeyCode = objEvent.which;
       // If not carriage return or space, return true so that the user agent
       // continues to process the action
       if (iKeyCode != 13 && iKeyCode != 32)
         return true;
     }
     bSuccess = window.open(objAnchor.href);
     // If the window did not open, allow the browser to continue the default
     // action of opening in the same window
     if (!bSuccess)
       return true;
     // The window was opened, so stop the browser processing further
     return false;
   }

Pruebas

Procedimiento

  1. Activar cada enlace del documento para comprobar si abre una ventana nueva.
  2. Para cada enlace que abra una ventana nueva, comprobar que utiliza un script para hacer todo lo siguiente:

    1. indicar que el enlace se abrirá en una ventana nueva,
    2. usar manejadores de eventos independientes del dispositivo, y
    3. permitir que el navegador abra el contenido en la misma ventana si no se ha abierto una ventana nueva.

Resultados esperados

  • La comprobación n.º 2 es verdadera.

Recursos

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica SCR24 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.

Financiado por la unión europea Gobierno de españa red.es Plan de recuperación transformación y resilencia kit digital