Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Sprunglink zum Inhalt veröffentlicht in 2016zuletzt bearbeitet in 2018

Von der Möglichkeit, Navigationsbereiche per Tastatur 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 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, Intern: 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 mit der Tabulatortaste als Erstes anspringbarer Link direkt zum Inhalt eingesetzt werden – dabei geht es eigentlich darum, die Links in der Navigationsleiste per Tab-Taste bzw. Eingabetaste ü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: Es wird immer wieder berichtet, dass Webkit-Browser ein tabindex="-1" auf das MAIN-Element benötigen, damit der Sprunglink funktioniert (z.B. Extern, englischsprachig: The A11Y Project. Die Korrektur des Problems führt aber dazu, dass im MAIN enthaltene Links per Tab-Taste nicht mehr angesprungen werden können (z.B. beim Einsatz von JAWS mit Internet Explorer).

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 Intern: 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 Intern: 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.