Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Sprunglink zum Inhalt veröffentlicht in 2016zuletzt bearbeitet in

Von der Möglichkeit, Navigationsbereiche zu überspringen, profitieren verschiedene Nutzergruppen. Es sind zunächst blinde Nutzer zu nennen, die mit Screenreadern Inhalte lesen und bedienen und ausschließlich per Tastatur navigieren. Darüber hinaus zählen Nutzer dazu, die eine Maus oder ein Touch-Screen nicht bedienen können und deshalb auf die Tastatur oder eine Schaltersteuerung zur Bedienung einer Webseite angewiesen sind.

Überspringen von Inhalten

Die Web Content Accessibility Guidelines (WCAG) 2.0 bzw. Barrierefreie Informationstechnik-Verordnung – BITV 2.0 geben vor, dass Tastaturnutzer Möglichkeiten erhalten müssen, sich wiederholende Navigationsbereiche zu überspringen. Dazu stehen verschiedene Techniken zur Verfügung:

Der Sprunglink ersetzt die strukturelle Navigation nicht, sondern ergänzt sie für Nutzer, die keinen Screenreader verwenden. Sprunglinks können dennoch für blinde Nutzer hilfreich sein, etwa wenn sie die Möglichkeiten der strukturellen Navigation nicht beherrschen oder wenn ihnen der Seitenaufbau noch nicht geläufig ist.

Beispiel für ein skip navigation link

Ein Sprunglink direkt zum Hauptinhalt einer Webseite ist dann zweckmäßig, wenn im HTML-Code vor dem eigentlichen Inhalt eine Navigationsleiste steht. Dann sollte ein per Schaltersteuerung oder mit der Tabulatortaste als Erstes anspringbarer Link direkt zum Inhalt eingesetzt werden – dabei geht es darum, die Links in der Navigationsleiste überspringbar zu machen.

<nav role="navigation" aria-label="Sprunglink">
  <p><a href="#inhalt">Hauptregion der Seite anspringen</a></p>
</nav>
<!-- Kopfzeile und Navigationsbereiche -->
<main id="inhalt">
  <!-- Hauptinhalt der Seite -->
</main>

Hinweis: Sprunglinks werden nicht überall gut unterstützt. Für Safari auf iOS wird bis heute ein Extern, englischsprachig: <tabindex="-1"> für das angesprungene Element empfohlen. Für Android in Verbindung mit Talkback muss hingegen JavaScript eingesetzt werden, um den Fokus auf das anzuspringende Element zu setzen.

In der Regel werden Sprunglinks dieser Art unsichtbar gestellt. Die allermeisten Nutzer benötigen diesen Link nicht, weil sie den Inhalt sehen und zudem per Mausklick den Hauptinhalt fokussieren bzw. bedienen können.

Es gibt diverse Techniken, um Inhalte unsichtbar zu stellen, aber nur bestimmte Techniken sind dafür geeignet, einen Link für Tastatur und Screenreader zugänglich zu machen. Eine zuverlässige Technik ist die Verkleinerung des Links auf 1×1 Pixel:

.unsichtbar {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

Der Link benötigt dann noch eine Klasse:

<a class="unsichtbar" href="#inhalt">Hauptregion der Seite anspringen</a>

Ein Link zum Überspringen eines Navigationsbereichs darf zwar unsichtbar gestaltet werden, aber spätestens beim Fokussieren mit der Tab-Taste sollte der Nutzer sehen können, dass der Link fokussiert wurde. Hierzu schafft eine CSS-Pseudoklasse Abhilfe:

.unsichtbar:not(:focus) {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

Checkliste für einen Sprunglink

Zusammengefasst sollten folgende Aspekte für einen Sprunglink berücksichtigt werden:

  1. Ein Sprunglink am Anfang einer Webseite ist nur sinnvoll, wenn damit weitere aktive Elemente übersprungen werden können. Bei umfangreichen Navigationsbereichen sind eventuell auch 2 Sprunglinks zweckmäßig.
  2. Der Sprunglink sollte das erste fokussierbare Element der Seite sein.
  3. Der Linktext sollte Auskunft über den Linkzweck geben. Beispiele sind "Hauptinhalt anspringen" oder "Navigationsbereiche überspringen". Generell ist die Beschreibung des Linkziels aufschlussreicher.
  4. Spätestens bei Fokus muss der Linktext des Sprunglinks sichtbar sein.