SkipLink
El primer enlace de la página, invisible hasta que el teclado lo alcanza: va directamente al contenido, saltando la navegación.
En esta página
Playground
Fondo
<a class="feitio-skip-link" style="position: static; translate: none" href="#playground">Saltar al contenido</a>Cuándo usarlo
- En cada página con navegación antes del contenido, que es casi todas. AppShell y DocPage ya incluyen esto.
Cuándo no usarlo
- En una página sin nada antes del contenido.
Ejemplos
Saltar al contenido
Cómo aparece
Presione Tab justo después de abrir esta página: "Saltar al contenido" aparece en la esquina, como papel levantado. Abajo, está dibujada abierta.
Mostrar código
<a class="feitio-skip-link" href="#conteudo">Pular para o conteúdo</a>
…
<main id="conteudo" tabindex="-1">…</main>Accesibilidad
- Debe ser el primer elemento enfocable, y su objetivo (
main) debe aceptar el foco (tabindex="-1"). - Aparece al enfocar; nunca está oculto para bien.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-skip-link" | obligatorio | Oculto hasta que llega el teclado; aparece como papel levantado. |
href | "#conteudo" | El id del contenido principal. |
tabindex="-1" | sobre el <main> | El objetivo acepta el foco. |