SkipLink
O primeiro link da página, invisível até o teclado chegar nele: leva direto ao conteúdo, pulando a navegação.
Nesta página
Playground
Fundo
<a class="feitio-skip-link" style="position: static; translate: none" href="#playground">Pular para o conteúdo</a>Quando usar
- Em toda página com navegação antes do conteúdo, ou seja, quase todas. O AppShell e o DocPage já trazem.
Quando não usar
- Numa página sem nada antes do conteúdo.
Exemplos
Pular para o conteúdo
Como ele aparece
Aperte Tab logo depois de abrir esta página: o "Pular para o conteúdo" aparece no canto, como papel sobreposto. Aqui embaixo, ele está desenhado aberto.
Mostrar código
<a class="feitio-skip-link" href="#conteudo">Pular para o conteúdo</a>
…
<main id="conteudo" tabindex="-1">…</main>Acessibilidade
- Precisa ser o primeiro elemento que recebe foco, e o destino (
main) precisa aceitar foco (tabindex="-1"). - Aparece ao receber foco; nunca fica escondido para sempre.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-skip-link" | obrigatório | Escondido até o teclado chegar; aparece como papel sobreposto. |
href | "#conteudo" | O id do conteúdo principal. |
tabindex="-1" | no <main> | O destino aceita o foco. |