Técnica Técnicas generales WCAG 2.2
G201Avisar a los usuarios con antelación cuando se vaya a abrir una nueva ventana
En resumen
Cuando un enlace o botón abre una ventana o pestaña nueva al activarlo de forma normal (clic, Intro o Espacio), conviene avisarlo antes, tanto en el texto o nombre accesible del control como con una indicación visual (por ejemplo, un icono). Así, quienes usan lector de pantalla o tienen dificultades cognitivas no se desorientan ni se sorprenden al descubrir que el botón «atrás» del navegador ya no funciona. Es una técnica recomendada.
Aplicabilidad
Páginas que abren nuevas ventanas
Descripción
El objetivo de esta técnica es avisar con antelación de los enlaces y botones que abren una nueva ventana o pestaña cuando el usuario los activa. Esto se aplica únicamente a la activación «normal», como un clic con el botón izquierdo del ratón o la pulsación de Intro o Espacio cuando el enlace o el botón tiene el foco: acciones que normalmente abrirían el destino del enlace en la pestaña o ventana actual, desencadenarían una acción en la página actual o provocarían el envío de un formulario y la carga de una página de confirmación en la pestaña o ventana actual. La técnica no se aplica a las situaciones en las que el usuario elige explícitamente abrir una nueva pestaña o ventana; por ejemplo, al usar la opción del menú contextual del navegador o al hacer clic en un enlace con el botón central del ratón.
Abrir una nueva pestaña o ventana cuando se activa un enlace o un botón puede resultar desorientador para las personas que tienen dificultades para percibir el contenido visual y para algunas personas con discapacidades cognitivas, si no se les avisa con antelación. Proporcionar un aviso o una indicación de que se va a abrir una nueva pestaña o ventana permite al usuario decidir si quiere abandonar la pestaña o ventana actual. También le ayudará a comprender que, una vez que active el enlace o el botón, el botón «atrás» de su navegador no funcionará y que tendrá que volver a la última pestaña o ventana que tenía abierta para encontrar su ubicación anterior.
Esta técnica es recomendada. Aunque indicar que un enlace o botón «se abre en una nueva ventana» se considera una buena práctica, no es necesario para cumplir los requisitos de ningún criterio de conformidad en particular.
Ejemplos
Incluir el aviso en el texto que describe un control
El nombre o la etiqueta que describe un control puede incluir el aviso de que se abre en una nueva ventana.
<a href="knitting.html" rel="noopener" target="_blank">
All about Knitting (opens in new window)
</a>Usar un icono y una descripción accesible para avisar antes de abrir una nueva ventana
El código siguiente utiliza CSS para añadir un icono SVG a un enlace, lo que proporciona un aviso visual antes de abrir una nueva
ventana. Además, se utiliza aria-describedby en el enlace para incluir un aviso textual equivalente
para los usuarios de tecnologías de asistencia.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Link opens in new window notification</title>
<style>
body {
background:#fff;
color: #000;
font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
}
[hidden] {
display:none;
}
.new-window-icon {
fill:currentColor;
height:0.75rem;
margin-inline-start:0.3em;
vertical-align:middle;
width:0.75rem;
}
</style>
</head>
<body>
<svg hidden>
<symbol id="new-window-icon" viewBox="0 0 12 12">
<title id="new-win-desc">opens in a new window</title>
...
</symbol>
</svg>
<h1>Link opens in new window notification</h1>
<p>This is an example of an
<a aria-describedby="new-win-desc" href="https://example.com" rel="noopener"
target="_blank">external link<svg class="new-window-icon" aria-hidden="true"
role="img"><use href="#new-window-icon"></use></svg></a></p>
</body>
</html>Hay disponible un ejemplo práctico de uso de un icono y una descripción accesible para avisar antes de abrir una nueva ventana.
Pruebas
Procedimiento
Para cada enlace o botón que abra una nueva ventana o pestaña al activarse:
- Comprobar que la tecnología de asistencia anuncia un aviso de que este control abre una nueva ventana.
- Comprobar que hay un aviso o una indicación visual de que este control abre una nueva ventana.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
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.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G201 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.
