Core · Navegación
Enlace para saltar al contenido
Permite a quienes usan el teclado saltarse la cabecera e ir al contenido principal.
Ejemplo
Enlace para saltar al contenido de esta página; aparece cuando recibe el foco.
This page has one: press Tab at the top of the page to see it.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
<body>
<a class="luz-skip-link" href="#main-content">Skip to main content</a>
<header class="o-sticky">…</header>
<main id="main-content" tabindex="-1">…</main>
</body>Variantes y opciones
No hay variantes: una clase en un enlace.
| Clase | Efecto |
|---|---|
.luz-skip-link | Fuera de pantalla hasta que recibe el foco; entonces queda fijo en la esquina superior inicial, con el fondo de marca, por encima de todo, incluso de una barra adhesiva. No se imprime. |
Cómo funciona
Un enlace normal al id de <main>, al principio de <body> y antes de un aviso de cookies, otro aviso o la cabecera. Solo CSS.
- Se desliza a la vista al recibir el foco, durante
--luz-duration-fast; con movimiento reducido, aparece de inmediato. - El navegador hace el salto.
tabindex="-1"en<main>permite que reciba el foco, así que la siguiente pulsación de Tab empieza dentro en todos los navegadores. - Debajo de una barra adhesiva (.o-sticky), el relleno de desplazamiento de la página mantiene el principio de
<main>por debajo de la barra tras el salto.
Sin JavaScript
No cambia nada: el enlace para saltar al contenido es un enlace y CSS.
Teclado y ARIA
Pulsa Tab una vez desde el principio de la página para mostrar el enlace; Enter lo sigue hasta el contenido principal.
- Debe ser el primer elemento enfocable de la página, antes de un aviso de cookies o de otro aviso.
- Sin ARIA: su texto es su nombre.
El contraste y el foco se explican en la pestaña Diseño.
Diseño
Cuándo usarlo
Añade un enlace para saltar al contenido en cada página que tenga una cabecera, un banner o navegación antes del contenido principal.
Cuándo no usarlo
No te fíes solo de él: la página sigue necesitando puntos de referencia y un orden lógico de encabezados.
- No añadas una lista de enlaces para saltar a cada sección: basta con uno que lleve al contenido principal.
Qué hacer y qué no
Cómo escribir el contenido
Indica adónde lleva: «Saltar al contenido principal».
- Usa el mismo texto en todas las páginas.
Contraste y foco
El enlace tiene texto blanco sobre el fondo de marca, encima de la página.
| Parte | Color sobre fondo | Claro | Oscuro | Alto contraste | Mínimo necesario |
|---|---|---|---|---|---|
Texto del enlace | --luz-text-on-fill on --luz-brand-fill | 6.0:1 | 4.9:1 | 14.1:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Calculado a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo necesario corresponde al nivel AA de WCAG 2.2: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
- Foco: el enlace se desliza a la vista al recibir el foco, con el anillo del enlace y un contorno de 2 px
--luz-focus-ring, a 2 px por fuera.
Tokens que usa
Los 8 tokens que lee components/skip-link.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Spacing and sizing
--luz-space-sm,--luz-space-xs- Radius
--luz-radius-md- Motion
--luz-duration-fast,--luz-easing-enter- Layers
--luz-z-toast
El teclado y ARIA se explican en la pestaña Código.