# SkipLink

O primeiro link da página, invisível até o teclado chegar nele: leva direto ao conteúdo, pulando a navegação.

## Playground

```html
<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

### 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

```html
<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.