Técnica Técnicas generales WCAG 2.2
G201Avisar de que un enlace o botón abre una ventana o pestaña nueva
Nombre oficial en el W3C: Avisar a los usuarios con antelación cuando se vaya a abrir una nueva ventana
En pocas palabras
Si un enlace o un botón abre una ventana o pestaña nueva al pulsarlo de forma normal, hay que avisarlo antes. El aviso debe verse en pantalla y también debe oírse con el lector de pantalla. Así cada persona decide si quiere seguir y sabe cómo volver.
Por qué es importante
Al abrirse una pestaña nueva, el botón «Atrás» del navegador deja de servir. Quien no lo sabe cree que se ha perdido y no encuentra la página anterior.
Afecta sobre todo a quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla). También a quien usa ampliador y a personas con discapacidad cognitiva. Es una buena práctica recomendada, no una exigencia de un criterio concreto.
Cómo se hace
- Localice los enlaces y botones que abren otra ventana o pestaña al hacer clic o pulsar Intro.
- La forma más sencilla es incluir el aviso en el propio texto del enlace: «Bases de la convocatoria (se abre en una pestaña nueva)».
- Si prefiere un icono, añádale un texto equivalente. Puede ser un texto alternativo o un texto enlazado con
aria-describedby. - Use siempre el mismo icono y la misma frase en toda la web.
- No hace falta avisar cuando es la persona quien elige abrir otra pestaña, por ejemplo con el menú del botón derecho.
Cómo comprobarlo
- Para cada enlace o botón que abre una ventana o pestaña nueva, mire si hay un aviso visible (texto o icono).
- Llegue a él con el tabulador usando NVDA o VoiceOver. Debe oírse que se abre en una pestaña o ventana nueva.
- En las herramientas del navegador (F12), panel «Accesibilidad», compruebe que el aviso forma parte del nombre o de la descripción del enlace.
Ejemplo
Enlace a un PDF que avisa en su propio texto de que se abre aparte.
<a href="bases-convocatoria-2026.pdf" target="_blank">
Bases de la convocatoria (PDF, se abre en una pestaña nueva)
</a>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 G201 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
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 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 G201 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.