SkipLink
Der erste Link der Seite, unsichtbar bis die Tastatur ihn erreicht: er geht direkt zum Inhalt und überspringt die Navigation.
Auf dieser Seite
Playground
Hintergrund
<a class="feitio-skip-link" style="position: static; translate: none" href="#playground">Zum Inhalt springen</a>Wann verwenden
- Auf jeder Seite mit Navigation vor dem Inhalt, was fast alle sind. AppShell und DocPage enthalten bereits diese Funktion.
Wann nicht verwenden
- Auf einer Seite ohne etwas vor dem Inhalt.
Beispiele
Zum Inhalt springen
Wie es aussieht
Drücken Sie Tab direkt nach dem Öffnen dieser Seite: "Zum Inhalt springen" erscheint in der Ecke, wie angehobenes Papier. Darunter ist es offen gezeichnet.
Code anzeigen
<a class="feitio-skip-link" href="#conteudo">Pular para o conteúdo</a>
…
<main id="conteudo" tabindex="-1">…</main>Barrierefreiheit
- Es muss das erste fokussierbare Element sein, und sein Ziel (
main) muss Fokus akzeptieren (tabindex="-1"). - Es erscheint beim Fokussieren; es wird nie für gut ausgeblendet.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-skip-link" | erforderlich | Unsichtbar bis die Tastatur ankommt; erscheint wie angehobenes Papier. |
href | "#conteudo" | Die ID des Hauptinhalts. |
tabindex="-1" | auf dem <main> | Das Ziel akzeptiert Fokus. |