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
- Escriba el enlace como un enlace normal, con
hrefy sintarget. - Con JavaScript, añada al enlace un aviso en su texto, por ejemplo «(se abre en una ventana nueva)».
- Use el evento
clickde un<a href>, que funciona igual con ratón y con teclado. - En ese evento, abra la ventana con
window.open(). Si se abre, cancele la navegación normal. - Si la ventana no se abre (bloqueador o script desactivado), deje que el enlace se abra en la misma ventana.
- Reserve las ventanas nuevas para casos justificados, como ayuda dentro de un formulario.
Cómo comprobarlo
- Active cada enlace de la página y anote cuáles abren una ventana o pestaña nueva.
- Compruebe que esos enlaces avisan en su texto de que abren una ventana nueva.
- Actívelos también con el teclado y verifique que funcionan igual.
- 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
- Activar cada enlace del documento para comprobar si abre una ventana nueva.
Para cada enlace que abra una ventana nueva, comprobar que utiliza un script para hacer todo lo siguiente:
- indicar que el enlace se abrirá en una ventana nueva,
- usar manejadores de eventos independientes del dispositivo, y
- 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
- HTML - Navigable target names (nombres de destino navegables en la especificación HTML)
- Wikipedia: Progressive Enhancement (mejora progresiva)
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.
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.