Los enlaces de omisión son pequeños enlaces de navegación internos que ayudan a los usuarios a moverse por una página. Es posible que nunca antes haya visto uno porque a menudo están ocultos a la vista y se utilizan como una mejora de accesibilidad que permite a los usuarios del teclado y lectores de pantalla saltar desde la parte superior de la página al contenido sin tener que pasar por otros elementos en el página primero.
De hecho, puede encontrar uno aquí en Programar Plussi abre DevTools.
En mi opinión, la mejor manera de implementar un enlace de salto es ocultarlo y luego mostrarlo cuando esté enfocado. Entonces, digamos que tenemos un enlace en el HTML:
<a class="skip-to-content-link" href="https://css-tricks.com/how-to-create-a-skip-to-content-link/#main">
Skip to content
</a>… podemos darle una posición absoluta y traducirlo fuera de la pantalla:
.skip-to-content-link {
left: 50%;
position: absolute;
transform: translateY(-100%);
}Luego, podemos volver a ponerlo a la vista 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 pondrá a la vista cuando esté enfocado.
Ahora, permítanme elaborar, 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 al que se enfrentan muchos usuarios al usar la web que doy por sentado. Pensamos mucho en crear una gran experiencia de usuario sin pensar en todos nuestros usuarios y en cómo satisfacer sus necesidades. Es cierto que un enlace de salto 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 de salto, decidí que mi misión fuera 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 teclado y lectores de pantalla a encontrar el contenido de una página rápidamente? En resumen, la solución es el tiempo. Darles a los usuarios la capacidad de navegar a las partes de nuestro sitio web que les interesan más les da el poder de ahorrar un tiempo valioso.
Tome el sitio web de Sky News como ejemplo. Ofrece un botón “Saltar al contenido” que permite a los usuarios omitir todos los elementos de navegación y pasar 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 enlace siempre está en el documento, pero solo se vuelve visible cuando está enfocado.
Este es el tipo de enlace de salto 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 de salto.
El sitio web tiene varios enlaces de navegación pero, en aras del tiempo, solo hay dos páginas: pagina de inicio y el página del blog. Esto es todo lo que necesitamos para ver cómo funcionan las cosas.
Identificando el problema
Aquí está 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 atravesar 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 desea acceder al contenido.
Este es un caso de uso perfecto para un enlace de salto.
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 <header> elemento.
<header>
<a class="skip-link" href="https://css-tricks.com/how-to-create-a-skip-to-content-link/#main">Skip to content</a>
<!-- Navigation-->
</header>Este enlace tiene un .skip-link clase para que podamos diseñarlo. Elhref puntos de atributo a #main, que es el ID que agregaremos al <main> elemento que viene más abajo en la página. Eso es a lo que saltará el enlace cuando se haga clic en él.
<header>
<a class="skip-link" href="https://css-tricks.com/how-to-create-a-skip-to-content-link/#main">Skip to content</a>
<!-- Navigation-->
</header>
<!-- Maybe some other stuff... -->
<main id="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 el transform propiedad, que está ocultando y mostrando nuestro enlace de salto dependiendo de si está enfocado o no. Hagamos que se vea un poco mejor con una transición rápida en el transform propiedad.
.skip-link {
/* Same as before */
transition: transform 0.3s;
}Ahora pasará a la vista, lo que lo hace un poco mejor.
Ahora debería (con suerte) tener lo que tengo a continuación:
Demo en vivo
Como puede ver, el enlace de omisión omite la navegación y salta directamente al <main> elemento 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 por qué detenernos ahí.
Podemos ir aún más lejos y crear un enlace de salto que tenga más opciones, como una forma de saltar al pie de página del sitio. Como puede 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 varios enlaces de omisión. Es común que los blogs usen AJAX que se carga en más publicaciones cuando llega 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 vínculo que omita todo ese negocio de carga automática y lleve al usuario directamente a un #footer elemento en la página.
<div class="skip-link" >
Skip to <a href="https://css-tricks.com/how-to-create-a-skip-to-content-link/#main">content</a> or <a href="https://css-tricks.com/how-to-create-a-skip-to-content-link/#footer">footer</a>
</div>También necesitamos modificar un poco nuestro CSS y usar el :focus-within pseudo selector.
.skip-link {
transform: translateY(-100%);
}
.skip-link:focus-within {
transform: translateY(0%);
}Esto significa que si algo dentro de nuestro elemento .skip-link tiene foco, lo mostramos. Lamentablemente, ni Internet Explorer ni Opera Mini admiten el 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 posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 60 | 52 | No | 79 | 10.1 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 96 | 10,3 |
Lo último que debemos hacer es asegurarnos de que haya una ID en nuestro elemento de pie de página para que el enlace tenga algo a lo que saltar.
<footer id="footer">Esto es lo que nos da esto:
Si quisiéramos ir un paso más allá (y lo alentarí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 liso, 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 de omisión en su sitio? O, si no es así, ¿esto te convence de usar uno? Espero que quede claro que los enlaces saltados 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 hacen que la experiencia del usuario sea 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