Verwendung
Sogenannte Skip-Links (Sprung-Links) dienen Tastaturnutzern als einfaches Mittel, um definierte größere logische Seitenbereiche unmittelbar zu erreichen und damit andere Seitenbereiche zu überspringen.
Das Besondere ist, dass diese Skip Links nicht nur den Viewport verschieben, sondern auch den Tastatur-Fokus auf den angesprungenen Bereich setzen. So kann man hiermit nach dem Laden einer Folgeseite die nun überflüssige Navigation überspringen und unmittelbar zum wesentlichen Seiteninhalt gelangen.
Diese initial unsichtbaren Skip-Links sind als Bestandteil des Seitenrahmens das zwingend zu verwendende erste und letzte interaktive Element in einem Seitenbaum.
Link zu Seitenbereichen im Header
Die oberen Skip-Links sind zunächst visuell ausgeblendet, aber Bestandteil der Tab-Reihenfolge und identifizieren einen Tastaturnutzer eindeutig, indem sie nur bei :focus im Seitenkopf eingeblendet werden.
Die Anzahl der Ziele für diese Skip-Links wird vom Design System bewusst nicht vorgegeben, eine benötigte Anzahl größer als 3 oder 4 könnte aber ein Indikator für eine zu komplexe Seitenstruktur sein, die weiter in Einzelschritte aufgeteilt werden könnte. Im Standard-Seitenrahmen sind die folgenden oberen Skip-Links definiert:
- „Zur Navigation“ setzt den Tastatur-Fokus auf die Navigation im Header (
<header><nav id="$IDREF">) - „Zum Seiteninhalt“ setzt den Tastatur-Fokus auf den wesentlichen Seiteninhalt (
<main id="$IDREF">) - „Zu weiteren Links“ setzt den Tastatur-Fokus auf den Footer der Gesamtseite (
<footer id="$IDREF">)
Link zurück zum Seitenanfang im Footer
Die Skip-Links am Seitenbeginn finden ihr Pendant am Ende der Seiten – dort wird ebenso ausschließlich bei Tastaturnutzung ein entsprechender zunächst unsichtbarer Link „Zum Seitenanfang" zum Abschluss der Fußzeile eingeblendet.
Die Funktionalität „Zum Seitenanfang“ ermöglicht es Tastaturnutzern oder Anwendern mit mobilen Endgeräten und Screenreadern, vom Fußbereich der Seiten unmittelbar zum Kopfbereich zu navigieren. Dies erspart bei Touch-UIs lange Scroll-Wege und setzt bei Tastaturnutzung den Fokus wieder auf den Beginn des Inhalts, um von dort weiter zu navigieren.
Anwendungen, die an den Seitenrahmen des Zoll-Portals angelehnt sind, müssen diese beiden Skip Links zwingend in der hier beschriebenen Form verwenden.
Variante: Link zurück zum Seitenanfang im Content
Bei bestimmten Inhaltsformen wie z. B. ausführlichen Hilfen mit einer Vielzahl von Fragen und Antworten (FAQs) kann es sinnvoll sein, aus dem Inhalt heraus wieder zurück nach “oben” zu einer Übersicht der Fragen oder zu seinem Seitennavigations-Menü zu verlinken. Allerdings sollen diese Links nur vereinzelt und mit Bedacht eingesetzt werden, um das Interface nicht zu überfrachten.
Diese Variante wird zusätzlich zu den zuvor genannten Skip Links des Seitenrahmens verwendet und ergänzt diese, ersetzt sie aber nicht.
