'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
SkipLink y VisuallyHidden
El primer enlace de la página salta la navegación; el texto oculto da a los lectores de pantalla el contexto que la pantalla ya muestra.
import { SkipLink, VisuallyHidden } from '@alea/ui';
Ejemplos
Skip link
Presiona Tab en esta página: la primera parada es el skip link (mostrado aquí dentro de la vista previa).
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-chip-bg…--alea-chip-text…--alea-focus…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-toast…
Props
SkipLink props
El primer enlace de la página: oculto hasta recibir foco, salta la navegación hasta el contenido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
children | ReactNode | - | El texto del enlace. Por defecto "Saltar al contenido". |
target | string | 'main' | El id del contenido principal, sin #. Por defecto "main". |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
SkipLink
- Estados
- Focus (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-skip-link
VisuallyHidden
- Variantes
asdivh2h3pspan- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-visually-hidden
Accesibilidad
- SkipLink está oculto hasta que recibe foco, y entonces aparece arriba a la izquierda. Ponlo primero en el body y dale a tu elemento main el mismo id.
- VisuallyHidden mantiene el texto en el árbol de accesibilidad; nunca lo uses para ocultar cosas que necesita quien ve y usa teclado.
Teclado
| Tecla | Acción |
|---|---|
| Tab (el primero) | Muestra el enlace para saltar |
| Enter | Salta al contenido |
Qué hacer y qué evitar
Hacer
- Pon SkipLink primero en cada página con navegación antes del contenido.
- Usa VisuallyHidden para contexto como "(se abre en una pestaña nueva)".
Evitar
- No ocultes controles que reciben foco con VisuallyHidden.
- No apuntes el skip link a un elemento sin el id.