Informationen
Symbol Link dieser Seite

Einsprunglinks (Skip Navigation Links)

Als Einsprunglinks werden Links zu Bereichen innerhalb einer einzelnen Webseite bezeichnet. Sie müssen ganz zu Beginn des <body>-Bereichs eingebunden werden, damit sie unmittelbar wahrnehmbar sind oder werden.

Im engeren Sinn wird durch ein Einsprunglink der Fokus direkt über den Kopfbereich hinweg auf den individuellen Hauptinhalt gesetzt. Nur dieser Mechanismus wird aus Sicht der Barrierefreiheit und Nutzungsfreundlichkeit für wesentliche Szenarien empfohlen.

Im weiteren Sinn werden als Einsprunglinks auch Links zu weiteren Komponenten einer einzelnen Webseite bezeichnet. Diese werden oft unnötig und überbordend eingesetzt.

Ein Einsprunglink zum Hauptinhalt ist unnötig, wenn dieser nach wenigen Klicks ohnedies erreicht wird. Ein Verzicht scheint insbesondere beim Einsatz einer Burger Navigation überlegenswert. In der mobilen Version von Zweiter Blick werden Sie beispielsweise kein Einsprunglink finden.

Relevanz für die Barrierefreiheit

Einsprunglinks sind für die effiziente Bedienung ohne Maus äußerst hilfreich, solange Browser über keine eigenen Mechanismen zur Navigation zwischen Seitenbereichen verfügen.

WCAG Kontext

Einsprunglinks werden von den Web Content Accessibility Guidelines (WCAG) als Option für erleichterte Seitennavigation angesehen. Bei der konkreten Realisierung sind weitere Erfolgskriterien zu beachten:

Erfolgskriterium 2.4.1 Blöcke umgehen
Ein Mechanismus zum Überspringen von Inhaltsblöcken ist verfügbar, wenn sich die Blöcke auf den Seiten eines Webauftritts mehrfach wiederholen.
Einsprunglinks sind ein hinreichender Mechanismus zum Erfüllen dieses Erfolgskriteriums.
Erfolgskriterium 2.1.1 Tastatur
Die gesamte Funktionalität des Inhalts muss mit wenigen Ausnahmen über eine Tastaturschnittstelle bedienbar sein.
Einsprunglinks müssen über die TAB-Taste erreichbar sein.
Erfolgskriterium 2.4.3 Fokusreihenfolge
Das Einsprunglink muss in der Fokusreihenfolge an erster Stelle stehen.
Erfolgskriterium 2.4.7 Fokus sichtbar
Das Einsprunglink muss sichtbar sein, wenn es den Fokus einnimmt.
Erfolgskriterium 2.1.4 Tastatur Kurztasten
Allfällige Kurztasten, die für Einsprunglinks vergeben werden, dürfen nicht grundsätzlich Kurzbefehle von Browsern oder assistierenden Technologien überlagern.

Zielgruppen

Einsprunglinks dienen vor allem Menschen, die ohne Maus eine Webseite bedienen. Screen Reader und Browser-Plugins bieten darüber hinaus umfangreichere Navigationsmechanismen über die Tastatur. Relevante Zielgruppen sind daher:

Das Ziel ist, möglichst effizient zum individuellen Hauptinhalt einer Webseite zu gelangen. Dafür stehen in HTML auch folgende Techniken bereit:

Seitenregionen
Der Hauptinhalt wird in ein <main>-Element verpackt. Assistierende Technologien können Navigationsmechanismen zu dieser Region bereitstellen.
Überschriften
Der Hauptinhalt beginnt mit einer möglichst exklusiven Überschrift der Ebene 1 (<h1>-Element). Screen Reader stellen Navigationsmechanismen zu dieser Überschriftenebene bereit (Kurztaste 1).

Diese Techniken ersetzen nicht den Einsatz von Einsprunglinks. Die erforderlichen Navigationsmechanismen stehen nur mit einem Screen Reader oder Plugins zur Verfügung. Es empfiehlt sich daher, diese Techniken ergänzend zu Einsprunglinks bereitzustellen.

Realisierung in HTML

Einsprunglinks sollten in HTML denkbar schlicht eingebaut werden: Ohne <nav>-Region, Überschrift und als einziges Element auch ohne Listensemantik.

Voraussetzungen

Individuelle Standortangaben können unseres Erachtens durch ein Einsprunglink übersprungen werden, sofern diese als Navigationsbereich gekennzeichnet sind.

Code

Der entsprechende Link wird gleich am Beginn des BODY-Bereichs eingefügt. Der Code kann etwa folgendermaßen aussehen:

<body>
  <a href="#mainContent">
    Zum Hauptinhalt
  </a>
  ...
  <main id="mainContent">
    <h1>Hauptüberschrift </h1>
      ...

Zum Referenzieren auf ein Element der Webseite wird im Wert des href-Attributs ein # vor den Wert des referenzierten id-Attributs gesetzt.

Sichtbarkeit der Einsprunglinks

Screen Reader machen Links auch dann wahrnehmbar und bedienbar, wenn sie mittels CSS-Anweisungen außerhalb des Bildschirms dargestellt werden. Für sehende Personen muss ein Steuerelement zumindest sichtbar werden, wenn es den Fokus erhält.

Für eine barrierefreie Realisierung eines Einsprunglinks stehen daher folgende beiden Varianten zur Verfügung:

Permanente Sichtbarkeit

Einsprunglinks werden in dieser Variante am oberen, meist linken Bildschirmrand grundsätzlich angezeigt. Deren Funktionalität wird dadurch für alle spontan wahrnehmbar und bedienbar, sofern sie verstanden wird.

Allerdings ist diese Darstellung seltener anzutreffen und kann daher zu Verwirrung beitragen. Auch für die visuelle Gestaltung von Webseiten gilt: So viel wie nötig, so wenig wie möglich. Es ist beim grafischen Design der Seiten also zu überlegen, ob Einsprunglinks standardmäßig am Bildschirm erscheinen sollen.

Sichtbarkeit bei Fokus

Einsprunglinks werden in dieser Variante mittels CSS-Anweisungen grundsätzlich vom Bildschirm verborgen. Erst wenn sich der Fokus auf einem Einsprunglink befindet, wird der Link mittels weiterer CSS-Anweisungen am Bildschirm sichtbar. Wenn sich, wie erforderlich, ein Einsprunglink ganz oben im Quellcode befindet, genügt ein Drücken der Tab-Taste.

HTML-Code

Setzen wir Einsprunglinks in einen neutralen <div>- Bereich mit einer eindeutigen ID:

<div id="skip">
  <a href="#mainContent">
    Zum Hauptinhalt
  </a>
</div>

Code zum Sichtbarmachen bei Fokus

Links im Bereich mit id="skip" werden mit CSS-Anweisungen zunächst vom Bildschirm verborgen. Sobald und solange der Link jedoch den Fokus innehat, wird er am linken oberen Bildschirmrand deutlich sichtbar hervorgehoben:

#skip a {
  left: -1000em;
  position: absolute;
}

#skip a:focus {
  background: yellow;
  color: black;
  left: 3em;
  outline: 2px solid darkred;
  padding: .4ex;
}

Verwendung von sichtbaren Einsprunglinks bei Fokus

Diese Technik gilt als hinreichend, um Einsprunglinks für Menschen, die auf eine Tastaturbedienung angewiesen sind, barrierefrei zu machen.

Auch auf Zweiter Blick wird dieser Mechanismus eingesetzt. Sie können ihn folgendermaßen erleben:

  1. Drücken Sie F5, um diese Seite neu zu laden.
  2. Drücken Sie Tab, um den Tastaturfokus auf das Einsprunglink als erstes fokussierbares Element zu setzen.

Optimieren der Nutzungsfreundlichkeit

Mehrere Einsprunglinks?

Aus der Perspektive der WCAG genügt ein Link, das direkt zum individuellen Hauptinhalt einer Webseite führt, sofern dadurch ein wiederkehrender Kopfbereich übersprungen werden kann. Trotzdem lassen sich viele Webauftritte finden, die über eine umfangreichere Einsprungnavigation verfügen. Wie ist dieses Design zu beurteilen?

Wie in allen Bereichen der barrierefreien Umweltgestaltung gilt es auch bei der Gestaltung von Einsprunglinks zu beachten: So viel wie nötig, so wenig, wie möglich. Eine Einsprung-Navigation, die zu umfangreich ist, stellt selbst eine Barriere dar.

Der Nutzen von Links zu einzelnen Bereichen einer Seite besteht in der Reduktion erforderlicher Tab-Klicks. Jedes zusätzliche Einsprunglink bedeutet einen zusätzlichen Klick auf Tab. Befinden sich die Suche und die Hauptnavigation gleich einmal im Kopfbereich, benötigen sie daher keine eigenen Einsprungmechanismen.

Beschriftung formulieren

Verschiedene Formulierungen der Einsprunglinks sind gebräuchlich und zulässig:

Lediglich Hauptinhalt als Beschriftung wird gelegentlich irrtümlich als Bereichsüberschrift verstanden. Diese Fehlinterpretation kann insbesondere aus einer mehrdeutigen visuellen Gestaltung des Links resultieren.

Gelegentlich wird statt Hauptinhalt lediglich Inhalt verwendet. Dies ist zwar technisch nicht ganz korrekt, dürfte aber doch verstanden werden.

Die technisch korrekte Formulierung Navigation überspringen dürfte hingegen nicht allgemein verständlich sein.

Kurztasten (Accesskeys) für Einsprunglinks

Steuerelemente, wie Links oder Formularkomponenten, können mit Kurztasten versehen werden. Abhängig von Betriebssystem und Browser lösen Tastenkombinationen zugeordnete Mechanismen aus. Teilweise wird der Fokus auf das Steuerelement gesetzt, teilweise wird das Steuerelement gleich ausgelöst.

Der Code für ein Einsprunglink mit Kurztaste kann etwa folgendermaßen aussehen:

<a
  href="#mainContent"
  accesskey="0">
  Zum Hauptinhalt (Kurztaste 0)
</a>

Für das Einsprunglink zum Hauptinhalt hat sich vielfach die Ziffer 0 eingebürgert. Ein Vorteil ist dabei, dass 0 mit der rechten Hand gedrückt wird, während die linke Hand die Kommandotasten (Alt, Shift, …) drücken kann.

Kurztasten werden vielfach als verzichtbar angesehen. Es gibt keine Standards für die Zuordnung einzelner Kurztasten zu Seitenkomponenten und sie erfordern eine entsprechende Gedächtnisleistung.

Das Vorhandensein einer Kurztaste muss wahrnehmbar sein. Bei Einsprunglinks erfolgt die Information üblicherweise in der Beschriftung des Links. Diese Zusatzinformation kann jedoch zu Verwirrung führen, wenn die zugehörige Funktionalität nicht bekannt ist.

WebAIM | Keyboard Accessibility > Accesskey
Gründe um sich nicht auf Kurztasten im Browser zu verlassen oder ganz darauf zu verzichten.

Inhalte überspringen

Einsprunglinks zielen im Sinne des Erfolgskriteriums 2.4.1 im Wesentlichen auf das Überspringen des Kopfbereichs ab. Aus der Perspektive der Nutzungsfreundlichkeit können für Inhaltsbereiche zusätzliche Mechanismen eingesetzt werden:

Inhaltsverzeichnis für einen Webartikel (Table of Contents)
Der Hauptinhalt enthält eine Linkliste zu den Hauptabschnitten.
Ausklappmechanismen (Akkordeons)
Ein Abschnittsinhalt erscheint erst durch Auslösen eines fokussierbaren Steuerelements.
Bedingt zugängliche Inhalte
Seitenbereiche, die bekanntermaßen aus deren Prinzip bei bestimmten Bedürfnisgruppen unzugänglich sind, erhalten ein Skip-Link zur Beschreibung des unzugänglichen Seitenbereichs. (Bilder aus Zeichen (ASCII-Art))