Addaw, ir a inicio Donar

Técnica Scripts de cliente WCAG 2.2

SCR24Abrir ventanas nuevas solo con un script que avise y que funcione sin él

Nombre oficial en el W3C: Usar la mejora progresiva para abrir ventanas nuevas a petición del usuario

En pocas palabras

Abrir una ventana o pestaña nueva sin avisar puede desorientar. Esta técnica parte de un enlace normal que abre en la misma ventana. Un script añade después la apertura en ventana nueva y avisa de ello. Si el script no funciona, el enlace sigue abriendo con normalidad.

Por qué es importante

Una persona ciega puede no darse cuenta de que está en otra ventana. Al pulsar «Atrás», no vuelve a la página anterior y se siente perdida.

Quien usa una lupa de pantalla o tiene dificultades cognitivas tampoco percibe a veces el cambio. Avisar y no depender del script evita estos problemas.

Cómo se hace

  1. Escriba el enlace como un enlace normal, con href y sin target.
  2. Con JavaScript, añada al enlace un aviso en su texto, por ejemplo «(se abre en una ventana nueva)».
  3. Use el evento click de un <a href>, que funciona igual con ratón y con teclado.
  4. En ese evento, abra la ventana con window.open(). Si se abre, cancele la navegación normal.
  5. Si la ventana no se abre (bloqueador o script desactivado), deje que el enlace se abra en la misma ventana.
  6. Reserve las ventanas nuevas para casos justificados, como ayuda dentro de un formulario.

Cómo comprobarlo

  1. Active cada enlace de la página y anote cuáles abren una ventana o pestaña nueva.
  2. Compruebe que esos enlaces avisan en su texto de que abren una ventana nueva.
  3. Actívelos también con el teclado y verifique que funcionan igual.
  4. Desactive JavaScript y compruebe que el enlace abre en la misma ventana.

Ejemplo

Enlace a un PDF de una convocatoria que se abre en ventana nueva solo si el script funciona.

<a href="/bases-convocatoria.pdf" id="bases">Bases de la convocatoria (PDF)</a>
<script>
  const enlace = document.getElementById("bases");
  enlace.append(" (se abre en una ventana nueva)");
  enlace.addEventListener("click", (e) => {
    const ventana = window.open(enlace.href);
    if (ventana) e.preventDefault();
  });
</script>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica SCR24 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica SCR24 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.