SkipLink
Le premier lien de la page, invisible jusqu'à ce que le clavier y arrive : il va directement au contenu, en sautant la navigation.
Sur cette page
Playground
Fond
<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
Sauter vers le contenu
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
<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. |