Explicar la apertura de pestañas nuevas

Silktide encuentra enlaces que se abren en una pestaña o ventana nueva y señala aquellos que no lo indican. Se debe advertir a las personas visitantes antes de que un enlace las saque de la página en la que están.

Por qué es importante

Abrir una pestaña nueva sin avisar rompe las expectativas de la persona visitante: el botón Atrás deja de funcionar y puede que ni siquiera se dé cuenta de que existe una pestaña nueva. Las personas usuarias de quizá no oigan ninguna indicación de que el contexto ha cambiado, y quienes tienen dificultades cognitivas o poca experiencia en la web pueden quedarse desorientadas, sin saber cómo volver. Unas pocas palabras de advertencia en el texto del enlace evitan todo esto.

A menudo, la mejor solución es no abrir pestañas nuevas en absoluto: deja que las personas visitantes elijan. Cuando sea imprescindible, esta comprobación verifica que el enlace lo indique, respaldando el criterio de conformidad 3.2.5 (Cambio a petición) de las , un requisito de .

Cómo solucionarlo

Es preferible eliminar target="_blank" para que el enlace se abra con normalidad.
Cuando esté justificado abrir una pestaña nueva, añade una explicación al texto del enlace:

<a href="products.html" target="_blank">
  Productos (se abre en una pestaña nueva)
</a>

En un enlace de imagen, pon la explicación en el :

<a href="products.html" target="_blank">
  <img src="products.jpg" alt="Productos (se abre en una pestaña nueva)">
</a>

Para cubrir muchos enlaces a la vez, puede añadir el texto automáticamente:

/* Añade el aviso a cada enlace que abre pestaña nueva */
a[target="_blank"]::after {
  content: " (se abre en una pestaña nueva)";
}

Como alternativa, usa una etiqueta , que cambia lo que se anuncia sin cambiar la apariencia del enlace. Ten en cuenta que aria-label sustituye por completo el texto del enlace, así que debe repetirlo:

<a href="products.html" target="_blank" aria-label="Productos (se abre en una pestaña nueva)">
  Productos
</a>

Un icono por sí solo no basta: el aviso debe existir como texto que un lector de pantalla pueda anunciar (el texto alternativo del icono cuenta).

Cómo lo comprueba Silktide

Encontrar todos los enlaces en la página con target="_blank", el atributo que abre una pestaña o ventana nueva, omitiendo cualquier elemento que hayas excluido de la comprobación.
Reunir el texto legible de cada enlace: su contenido de texto, el texto alternativo y el atributo title de los elementos dentro de él, cualquier etiqueta ARIA y el texto añadido con CSS ::before y ::after.
Aprobar el enlace si ese texto contiene una explicación reconocida: "pestaña nueva", "ventana nueva", "pestaña nueva del navegador", "ventana nueva del navegador" o "enlace externo" (también se reconocen los equivalentes en galés).
Informar de todos los demás enlaces que abren pestaña nueva.

Solución de problemas

Mi enlace lo explica con otras palabras

Solo se reconocen las frases anteriores. Si tu redacción es un equivalente real, como "se abre en una ventana emergente", estandariza con una frase reconocida o el hallazgo.

"Ventana" o "pestaña"?

Prácticamente todos los navegadores modernos abren los enlaces con target="_blank" en una pestaña, por lo que "se abre en una pestaña nueva" suele ser la formulación más clara, aunque ambas opciones son válidas.