El Blog de Accede Me

Enlaces externos, nuevas ventanas y accesibilidad
Enlaces externos, nuevas ventanas y accesibilidad

Vamos a ver en este artículo cómo es mejor hacer que los enlaces a páginas externas, páginas que no están en nuestro dominio, sean accesibles.

¿Deberían los enlaces externos abrirse en una nueva pestaña?

Todo conocedor del código HTML sabe que se pueden insertar elementos de tipo ‘enlace’ (a) a páginas externas, basta con indicar en el atributo href esa url externa y que para que se abra en una nueva ventana/pestaña hay que añadir el atributo target con valor ‘_blank’.

Pero, ¿esto es realmente accesible?

Implicaciones de accesibilidad

Las recomendaciones de la W3C indican que no, que es mejor no abrir nuevas ventanas o pestañas automáticamente:

 “En general, es mejor no abrir nuevas ventanas y pestañas, ya que pueden desorientar a las personas, especialmente a las que tienen dificultad para percibir el contenido visual.”

Considera a un usuario que no sabe/entiende que ahora está en una pestaña diferente. Presiona su atajo de teclado o flecha «atrás» para volver a la página anterior, pero no sucede nada y no entiende dónde está. No es una buena experiencia y se puede mejorar fácilmente.

Sin embargo, hay excepciones a esta regla. En algunas situaciones, navegar por la pestaña actual puede ser muy molesto, en cuyo caso es preferible abrir una nueva pestaña. Por ejemplo, un enlace en una página con un formulario largo podría abrirse en una nueva pestaña para que el usuario no pierda ningún dato que haya ingresado.

pestaña se expresa como una técnica informativa y no como un criterio de éxito. En otras palabras, puede ignorar este consejo y seguir siendo totalmente compatible con las WCAG 2.1. Sin embargo, no recomiendo que hagas eso.

Lo necesito hacer de todos modos

Muy bien, supongamos que aún deseas o necesitas abrir enlaces en una nueva ventana/pestaña. Tal vez tengas una de esas situaciones en las que una nueva pestaña es más accesible, como se mencionó anteriormente. O tal vez tu jefe/cliente te obliga a hacerlo. O tal vez sólo porque lo quieres. No estoy aquí para juzgar, pero te ayudaré a hacer que estos enlaces sean más accesibles.

Lo importante es informar a los usuarios si un enlace se abrirá en una nueva pestaña.

Esto ayuda a mantener su sitio predecible, lo cual es importante para la accesibilidad y es uno de los principios de la WCAG.

Cómo informar a tus usuarios

La forma más sencilla es poner un mensaje en el texto del enlace.

< a href="https://ejemplo.com" target="_blank">enlace de ejemplo (se abre en una nueva pestaña)< /a>

Si no te gusta la palabrería adicional que aparece en tus enlaces, entonces puedes modificar un poco las cosas para ocultar el mensaje extra visualmente y mantenerlo disponible para los lectores de pantalla (hablaremos sobre cómo agregar una señal visual más adelante en este artículo).

< a href=”https://ejemplo.com” target=”_blank”> enlace de ejemplo < span class=”screen-reader-only”>(se abre en una pestaña nueva)< /span> < /a>

Este < span> está diseñado para ocultar el texto visualmente, pero no para los lectores de pantalla. Hay muchas maneras de hacer esto, pero aquí hay una.

.screen-reader-only
position: absolute;
width: 1px;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap; }

Si usas una librería como Bootstrap tienes la clase ‘sr-only’ que cumple la misma función.

Agregar una señal visual

Ya tenemos cubiertos los lectores de pantalla, pero aún necesitamos una indicación visual de que se abrirá un enlace en una nueva ventana/pestaña.

Si se decidió por agregar un mensaje visible de «abre en una nueva pestaña» en el texto de su enlace, entonces puede que ya haya ha terminado. Pero puede ayudar a los demás con una buena práctica que es usar un icono para indicar que se va abrir una nueva ventana/pestaña.

Resumiendo

Si siempre asumiste que los enlaces externos deberían abrirse en una nueva pestaña, entonces tal vez este artículo te haya dado algo en qué pensar. No estoy tratando de decir que las nuevas pestañas sean malas, pero hay más que considerar cuando las usas, especialmente con respecto a la accesibilidad.

Contáctanos

Te ayudamos y acompañamos
0 spam garantizado
Gedesprin, s.l. te informa que los datos de carácter personal que me proporciones cumplimentandoo el presente formulario serán tratados por Gedesprin, s.l. como responsable de esta web.

Finalidad de la recogida y tratamiento de los datos personales: Atender la solicitud enviada a través del formulario.

Legitimación: Consentimiento informado del interesado.

Destinatarios: Gedesprin, s.l.. Debes saber que nunca cederemos ni venderemos los datos personales recabados.

Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad competente.

El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no podamos atender tu solicitud.

Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en esta página web en nuestra Política de Privacidad.