Skip Links für barrierefreie Webseiten

von

Skip Links sind Links einer Webseite, die es Nutzenden ermöglichen, repetitive Elemente zu überspringen und effizienter zu navigieren. Dies ist besonders hilfreich für Personen, die assistive Technologien wie Screenreader oder ausschließlich die Tastatur zur Navigation verwenden. Sie ermöglichen eine inklusivere Nutzung von Webauftritten.

Beispiel für einen Skip Link:
Ein Link ganz oben auf der Seite mit dem Text „Zum Hauptinhalt springen“. Wird dieser aktiviert, landet der Fokus direkt auf dem Hauptinhalt der Seite und überspringt alle Elemente davor.

Zum Hauptinhalt springen

Es wird sichergestellt, dass Webseiten für alle Menschen gleichermaßen nutzbar sind, unabhängig von ihrer individuellen Fähigkeit zur Interaktion mit digitalen Inhalten. Darüber hinaus sorgen sie für eine bessere Nutzung von Webinhalten, indem sie den direkten Zugang zu wichtigen Informationen ermöglichen, ohne dass Nutzende sich durch viele Strukturelemente kämpfen müssen.

Die Integration von Skip Links ist daher nicht nur eine technische Maßnahme zur Erfüllung von Barrierefreiheitsstandards, sondern eine grundlegende Verbesserung der Benutzerfreundlichkeit für alle. Sie erleichtert das Zurechtfinden auf komplexen Webseiten und stellt sicher, dass alle Inhalte ohne unnötige Hindernisse erreichbar sind.

Welche Nutzergruppen profitieren davon?

  • Personen mit Sehbeeinträchtigungen: Für blinde oder sehbehinderte Menschen, die Screenreader verwenden, erleichtern Skip Links die Navigation erheblich. Ohne diese Funktion müssten sie sich durch jede Navigationsebene arbeiten, bevor sie zum Inhalt gelangen. Skip Links ermöglichen es ihnen, diese wiederkehrenden Elemente zu überspringen und direkt zu den relevanten Informationen zu gelangen.
  • Nutzende mit motorischen Beeinträchtigungen: Personen mit eingeschränkter Bewegungsfähigkeit, die auf Tastaturnavigation angewiesen sind, profitieren von Skip Links, da sie die Anzahl der notwendigen Tastatureingaben reduzieren. Dies erleichtert den Zugang zum Hauptinhalt und minimiert den physischen Aufwand.
  • Menschen mit kognitiven Beeinträchtigungen: Skip Links können auch für Personen mit kognitiven Einschränkungen hilfreich sein, indem sie die Komplexität der Navigation verringern. Durch das Überspringen von sich wiederholenden Navigationsblöcken wird die kognitive Belastung reduziert, was zu einer klareren und verständlicheren Benutzererfahrung führt.

Relevante gesetzliche Grundlagen

Für digitale Angebote des Bundes gilt die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0). Nach § 3 Abs. 2 BITV 2.0 ist die Europäische Norm EN 301 549 als technischer Standard zu beachten. In Abschnitt 9.2.4.1 der EN 301 549 wird auf das Erfolgskriterium 2.4.1 der Web Content Accessibility Guidelines (WCAG) 2.1 verwiesen. In den Ländern gelten teilweise ähnliche Regelungen. Es wird empfohlen, sich über die vor Ort geltenden gesetzlichen Bestimmungen zu informieren.Absicht, ein höheres Maß an Barrierefreiheit zu erreichen als gesetzlich vorgeschrieben.

WCAG 2.1 Erfolgskriterium 2.4.1

Das Erfolgskriterium 2.4.1 der Web Content Accessibility Guidelines (WCAG) 2.1 fordert, dass Webseiten einen Mechanismus bereitstellen, der es Nutzenden ermöglicht, wiederkehrende Inhaltsblöcke zu überspringen. Dies ist besonders für Personen wichtig, die Inhalte sequenziell, beispielsweise mit Tastatur oder Screenreader, durchlaufen. Ohne diese Funktion müssten sie auf jeder Seite erneut durch identische Navigationsleisten, Kopfzeilen oder Werbebanner navigieren, bevor sie zum gewünschten Inhalt gelangen.

Praktische Umsetzung von Skip Links

Bei der Umsetzung von Skip Links sollten folgende Aspekte berücksichtigt werden:

  • Platzierung: Der Skip Link sollte als erstes interaktives Element auf der Seite stehen, damit er sofort per Tastatur erreichbar ist.
  • Sichtbarkeit: Standardmäßig kann der Skip Link verborgen sein, sollte jedoch sichtbar werden, sobald er den Fokus erhält, um Nutzenden seine Existenz und Funktionalität anzuzeigen.
  • Beschriftung: Eine klare und prägnante Beschriftung wie „Zum Hauptinhalt springen“ hilft Nutzenden, die Funktion des Links sofort zu verstehen. Das Label der Links sollte dabei auch deutlich machen, dass es sich um Skip Links handelt, um eine eindeutige Orientierung zu gewährleisten.
  • Technische Umsetzung: Die Implementierung sollte sicherstellen, dass der Fokus nach Aktivierung des Skip Links tatsächlich zum definierten Ziel springt, und dies sollte in verschiedenen Browsern und mit unterschiedlichen assistiven Technologien getestet werden.

Beispiel:
Ein Skip Link am Seitenanfang führt direkt zum Hauptinhalt der Webseite.

<a href="#maincontent" class="skip-link">Zum Hauptinhalt springen</a>
<main id="maincontent">
<h1>Willkommen auf unserer Seite</h1>
</main>

Mit Hilfe von CSS kann der Skip-Link bei Fokussierung sichtbar gemacht werden:

skip-link {
background-color: #fff;
position: absolute;
padding: 0.2em;
display: block;
}
skip-link:not( :focus): not(:active) {
clip-path: inset(50%);
height: 1px;
overflow: hidden; white-space: nowrap;
width: 1px;
}

Weitere Informationen

Understanding Success Criterion 2.4.1: Bypass Blocks | WAI | W3C

Accessibility Skip links

WebAIM: Skip Navigation Links

  1. Platzierung und Sichtbarkeit:
    • Ist der Skip Link an oberster Stelle der Seite platziert?
    • Wird der Link sichtbar, wenn er fokussiert wird?
  2. Funktionalität:
    • Führt der Link zuverlässig zu den Inhalten?
    • Ist sichergestellt, dass der Skip Link für alle Nutzenden funktioniert, unabhängig von der Eingabemethode?
  3. Beschriftung und Nutzerführung:✓
    • Sind die Beschriftungen eindeutig und verständlich?
    • Wird die Navigation für Nutzende durch den Skip Link tatsächlich erleichtert?
  4. Technische Umsetzung:
    • Ist sichergestellt, dass der Skip Link auf allen Geräten und in allen gängigen Browsern korrekt funktioniert?
    • Wurde getestet, ob Screenreader den Skip Link korrekt interpretieren?