Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Sprunglink zum Inhalt veröffentlicht in 2016

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" tabindex="-1">
  <!-- Hauptinhalt der Seite -->
</main>

Hinweis: Das tabindex-Attribut mit dem Wert -1 ist dazu da, den Sprung zum Inhalt in Webkit-Browsern zu ermöglichen. Weitere Infos sind zu finden auf Extern, englischsprachig: The A11Y Project.

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. Wenn der Sprunglink am Bildschirm versteckt werden soll, dann muss er bei Fokus sichtbar gemacht werden.

Es gibt diverse Techniken, um Intern: Inhalte am Bildschirm auszublenden, aber nur ganz bestimmte Techniken eignen sich für aktive Elemente. Eine zuverlässige Technik ist die Positionierung des Links außerhalb des Bildschirmbereichs:

.unsichtbar {
  Position:absolute;
  Top:auto;
  Left:-10000px;
  Width:1px;
  Height:1px;
  Overflow:hidden;
}

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 ein Link fokussiert wird. Hierzu schafft eine Pseudoklasse Abhilfe:

.unsichtbar:focus {
  Left:auto;
  Width:auto;
  Height:auto;
}

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.
  5. Derzeit besteht ein Bug in Webkit-Browsern, so dass das Ziel des Sprunglinks mit tabindex="-1" ergänzt werden muss.