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.
También vale la pena señalar que el consejo del W3C contra la apertura de enlaces en una nueva 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.
AccedeMe.com sabe mucho sobre las oportunidades comerciales únicas que su organización puede disfrutar simplemente haciendo que sus páginas web sean más accesibles para todos sus visitantes.
La mejor manera absoluta de aumentar la cantidad de clientes que tiene es asegurarse de que todos los que acceden a su sitio puedan experimentarlo al máximo, independientemente de sus habilidades.