Cómo crear un enlace “Saltar al contenido”

Los enlaces para saltar son pequeños enlaces de navegación interna que ayudan a los usuarios a moverse por una página. Es posible que nunca hayas visto uno antes porque a menudo están ocultos a la vista y se usan como una mejora de accesibilidad que permite a los usuarios del teclado y a los lectores de pantalla saltar desde la parte superior de la página al contenido sin tener que pasar. por otros elementos en la pantalla. página primera.

De hecho, puedes encontrar uno aquí mismo en CSS-Tricks si abres DevTools.

En mi opinión, la mejor manera de implementar un enlace para omitirlo es ocultarlo y luego mostrarlo cuando esté enfocado. Entonces, digamos que tenemos un enlace en HTML:

a href="#main"  Skip to content/a

…podemos darle una posición absoluta y trasladarlo fuera de la pantalla:

.skip-to-content-link {  left: 50%;  position: absolute;  transform: translateY(-100%);}

Luego podemos volver a mostrarlo cuando esté enfocado y darle un poco de estilo en el proceso:

.skip-to-content-link {  background: #e77e23;  height: 30px;  left: 50%;  padding: 8px;  position: absolute;  transform: translateY(-100%);  transition: transform 0.3s;}.skip-to-content-link:focus {  transform: translateY(0%);}

Esto ocultará nuestro enlace hasta que esté enfocado y luego lo mostrará cuando esté enfocado.

Ahora, permítanme dar más detalles, comenzando con esta cita de Miles Davis:

El tiempo no es lo principal. Es lo único.

Mientras me siento a escribir este artículo en una Irlanda lluviosa, pienso en el desafío que enfrentan muchos usuarios al utilizar la Web que están sentados. Pensamos mucho en crear una excelente experiencia de usuario sin pensar en todos nuestros usuarios y en cómo satisfacer sus necesidades. Es cierto que saltar un enlace era algo de lo que nunca había oído hablar hasta que completó un curso sobre Frontend Masters de Marcy Sutton. Desde que aprendí el poder y la simplicidad de usar un enlace para saltar, decidí tener como misión difundir más conciencia, ¡y qué plataforma mejor que CSS-Tricks!

Una solución es una respuesta a un problema, entonces, ¿cuál es la solución para ayudar a los usuarios de teclados y lectores de pantalla a encontrar rápidamente el contenido de una página? En definitiva, la solución es el tiempo. Brindar a los usuarios la posibilidad de navegar a las partes de nuestro sitio web que más les interesan les brinda el poder de ahorrar un tiempo valioso.

Tomemos como ejemplo el sitio web de Sky News. Ofrece un botón “Saltar al contenido” que permite a los usuarios omitir todos los elementos de navegación y saltar directamente al contenido principal.

Puede ver este botón navegando a la parte superior de la página usando su teclado. Esto es similar a la implementación que se muestra arriba. El vínculo siempre está en el documento, pero solo se vuelve visible cuando está enfocado.

Este es el tipo de enlace de omisión que vamos a crear juntos en esta publicación.

Nuestro sitio web de muestra

Creé un sitio web de muestra que usaremos para demostrar un enlace para omitir.

El sitio web tiene varios enlaces de navegación pero, por cuestiones de tiempo, sólo hay dos páginas: la página de inicio y la página del blog . Esto es todo lo que necesitamos para ver cómo funcionan las cosas.

Identificando el problema

Esta es la navegación con la que estamos trabajando:

En total, tenemos ocho elementos de navegación que un usuario de teclado y un lector de pantalla deben recorrer antes de llegar al contenido principal debajo de la navegación.

Ese es el problema. La navegación puede resultar irrelevante para el usuario. Quizás el usuario recibió un enlace directo a un artículo y simplemente quiere acceder al contenido.

Este es un caso de uso perfecto para saltar un enlace.

Creando el enlace

Hay un par de enfoques para crear un enlace Saltar al contenido. Lo que me gusta hacer es similar al ejemplo de Sky News, que oculta el enlace hasta que se enfoca. Eso significa que podemos colocar el enlace en la parte superior de la página o cerca de ella, como dentro del headerelemento.

header  a href='#main'Skip to content/a  !-- Navigation--/header

Este enlace tiene una .skip-linkclase para que podamos diseñarlo. El hrefatributo apunta a #main, que es el ID que agregaremos al mainelemento que viene más abajo en la página. Eso es a lo que saltará el enlace cuando se haga clic.

header  a href='#main'Skip to content/a  !-- Navigation--/header
!-- Maybe some other stuff... --
main  !-- Content --/main

Esto es lo que tenemos si simplemente colocamos el enlace en el encabezado sin estilo.

Esto no se ve muy bien, pero la funcionalidad está ahí. Intente navegar hasta el enlace con su teclado y presione Entrar cuando esté enfocado.

Ahora es el momento de hacerlo lucir bonito. Primero debemos arreglar el posicionamiento y solo mostrar nuestro enlace de salto cuando esté enfocado.

.skip-link {  background: #319795;  color: #fff;  font-weight: 700;  left: 50%;  padding: 4px;  position: absolute;  transform: translateY(-100%);}.skip-link:focus {  transform: translateY(0%);}

La magia aquí está en la transformpropiedad, que oculta y muestra nuestro enlace de omisión dependiendo de si está enfocado o no. Hagamos que se vea un poco mejor con una transición rápida en la transformpropiedad.

.skip-link {  /* Same as  before */  transition: transform 0.3s;}

Ahora aparecerá a la vista, lo que mejora un poco la situación.

Ahora deberías (con suerte) tener lo que tengo a continuación:

Como puede ver, el enlace para omitir omite la navegación y salta directamente al mainelemento cuando se hace clic.

¡Está bien usar más de un enlace!

En este momento, el enlace solo tiene un propósito y es saltar al contenido de nuestro sitio web. Pero no tenemos que detenernos ahí.

Podemos ir aún más lejos y crear un enlace para saltar que tenga más opciones, como una forma de saltar al pie de página del sitio. Como puedes imaginar, esto es bastante similar a lo que ya hemos hecho.

Hagamos que la página del blog del sitio de ejemplo sea un poco más utilizable mediante el uso de múltiples enlaces de omisión. Es común que los blogs usen AJAX que carga más publicaciones al llegar al final de la página. Esto puede dificultar mucho el acceso al pie de página del sitio web. Ese es el problema que queremos resolver en este caso.

Así que agreguemos un segundo enlace que evite todo ese proceso de carga automática y lleve al usuario directamente a un #footerelemento de la página.

div   Skip to a href='#main'content/a or a href='#footer'footer/a/div

También necesitamos modificar un poco nuestro CSS y usar el :focus-withinpseudo selector.

.skip-link {  transform: translateY(-100%);}.skip-link:focus-within {  transform: translateY(0%);}

Esto quiere decir que si algo dentro de nuestro elemento .skip-link tiene foco, lo mostramos. Lamentablemente, ni Internet Explorer ni Opera Mini admiten enfoque interno, pero su cobertura es bastante buena y hay un polyfill disponible.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

Lo último que debemos hacer es asegurarnos de que haya una identificación en nuestro elemento de pie de página para que el enlace tenga algo a lo que saltar.

footer

Esto es lo que esto nos da:

Si quisiéramos ir un paso más allá (y lo recomendaría), podríamos diseñar cada enlace de manera un poco diferente para que los usuarios puedan distinguir entre los dos. Ambos enlaces en este ejemplo son de color blanco, lo que funciona muy bien para un solo botón que hace una sola cosa, pero sería más claro que estamos tratando con dos enlaces si se presentaran de manera diferente.

Saltando a conclusiones

¿Está utilizando enlaces para saltar en su sitio? O, si no, ¿esto te convence para usar uno? Espero que quede claro que omitir enlaces son un gran valor agregado cuando se trata de la accesibilidad de un sitio. Si bien no es una solución milagrosa que resuelva todas las necesidades de accesibilidad, sí resuelve algunos casos de uso que crean una experiencia de usuario mucho más pulida.

A continuación se muestran algunos sitios destacados que utilizan esta técnica o una similar:

• Amazonas
• Perseguir
• Google (no es un enlace para saltar, sino un enlace para dejar comentarios sobre accesibilidad)
• Objetivo
• Los New York Times
• Zillow