# SkipLink

Le premier lien de la page, invisible jusqu'à ce que le clavier y arrive : il va directement au contenu, en sautant la navigation.

## Playground

```html
<a class="feitio-skip-link" style="position: static; translate: none" href="#playground">Aller au contenu</a>
```

## Quand l'utiliser

-   Sur chaque page avec une navigation avant le contenu, ce qui est presque tout. AppShell et DocPage l'incluent déjà.

## Quand ne pas l'utiliser

-   Sur une page sans rien avant le contenu.

## Exemples

### Apparence

Appuyez sur Tab juste après avoir ouvert cette page : « Sauter vers le contenu » apparaît dans le coin, comme un papier soulevé. En dessous, il est dessiné ouvert.

Afficher le code

```html
<a class="feitio-skip-link" href="#conteudo">Pular para o conteúdo</a>
…
<main id="conteudo" tabindex="-1">…</main>
```

## Accessibilité

-   Il doit être le premier élément focalisable, et sa cible (`main`) doit accepter la focalisation (`tabindex="-1"`).
-   Il apparaît au focus ; il n'est jamais caché pour de bon.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-skip-link"`

obligatoire

Caché jusqu'à l'arrivée du clavier ; apparaît comme un papier soulevé.

`href`

`"#conteudo"`

L'identifiant du contenu principal.

`tabindex="-1"`

sur le `<main>`

L'élément cible accepte le focus.