Es posible que un usuario de teclado tenga que desplazarse por el mismo encabezado en cada página antes de llegar al artículo. Un enlace para omitir hace que se pueda acceder al contenido principal con una sola acción, sin cambiar el diseño visual para todos.
<a class="skip-link" href="#main">Skip to content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>Manténgalo visible cuando esté enfocado
- Coloque el enlace cerca del inicio del documento para que sea una de las primeras paradas del teclado.
- Ocultarlo visualmente sin eliminarlo del orden de pestañas, luego revelarlo con :focus.
- Dale al objetivo una identificación estable y asegúrate de que el foco pueda moverse hacia él.
.skip-link:not(:focus) {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.skip-link:focus { clip-path: none; height: auto; width: auto; }Pruebe presionando Tab inmediatamente después de cargar la página, luego active el enlace y confirme el enfoque y la posición de lectura para pasar al contenido principal.
