Skip Links

Skip Links: son enlaces de página internos que ayudan a la navegación por la página actual, en lugar de a páginas completamente nuevas.

Son botones que a simple vista no se ven pero al momento que un software de lectura de texto los detecta aparecene

Se crean poniendo un botón común y corriente

<button id="skip-link">Saltar al contenido</button>

Y en css le pondremos lo siguiente

.skip-link{
weight: 0; /* desaparecemos el botón a simple vista*/
}
.skip-link:focus,
.skip-link:active{
background..
font ...
} /* de esta forma cuando navegen con un teclado este aparecerá*/

Skip link

🏂 Skip Links

• A veces tenemos una navegación inicial bastante extensa
• Para una persona con discapacidades que use un dispositivo que le facilite acceder al sitio, tendrá que pasar por todo el contenido inicial
• Podemos usar skip links facilitar la navegación ofreciendo un botón que le permita saltar al contenido principal
• Skip links son enlaces que nos dirigen a partes específicas dentro del HTML

Los skip links solo se deberían de poner en las paginas donde el contenido sea muy amplio? o Deberia ser casi obligatorio?

Utilizar la etiqueta <main>

<main id = "tu_id">
<!-- Tu contenido -->
</main>

Es lo más recomendable, gracias a ello tenemos por defecto este comportamiento habilitado.
Antes de ello, aprendan bien a posicionar la etiqueta main, semánticamente tiene un orden que hay que cumplir.

Si te preocupa la compatibilidad de Main: Incluso es aceptado por Internet Explorer 11 con la propiedad: width: tuvalor, pero para 2020 la el uso de este browser es del 2%, así que: Ni se preocupen ya por darle soporte, está “prácticamente muerto IE 11”

Skip-link

Facilitan la accesivilidad haciendo que por medio de un link te transfiera a la seccion principal o la que desees en una pagina.

Se crea un ancla <a> que conecte con el id que le agregaremos posteriormente a un elemento:

<a href="#main" class="skip-link">Saltar al contenido</a>

<main id="main">
...
<main>

En este caso al dar clink en “Saltar contenido” te trasferira directamente a la seccion main de la pagina.

muy interesante

Con eso también se hace que el skip link se vuelva a esconder una vez pasamos de él o lo usamos?

Wow qué interesante! Esto es nuevo para mí, es una manera de crear un menú de navegación para accesibilidad y que se puede esconder si no lo necesitas.

En este momento, en el puzzle de la accesibilidad me falta saber cómo puedo personalizar y diseñar todo el flujo del narrador de la pagina para que vaya narrando y navegando las diferentes secciones y elementos.

Me ha encantado esta estrategia, no se me habia ocurrido y me parece súper util para personas que quieren navegar con el teclado y para mejorar la accesibilidad

Crea una opción para saltar al contenido principal de tu sitio web con HTML y CSS

Ejemplo de estrategia para no mostrar elementos.

👌