Zum Inhalt springen
Logo mtc Berlin - Zur Startseite Logo mtc Berlin - Zur Startseite

Skip-Links

Skip-Links (auch bekannt als “Sprunglinks” oder “Überspringen-Links”) sind unsichtbare oder teilweise sichtbare Navigationshilfen, die es Nutzern ermöglichen, direkt zu bestimmten Bereichen einer Webseite zu springen, ohne sich durch eine Vielzahl von Navigationselementen und anderen wiederkehrenden Inhalten bewegen zu müssen. Diese Links sind besonders wichtig für Tastaturnutzer und Menschen, die Screenreader verwenden, da sie ihnen helfen, effizient durch Webseiten zu navigieren.

Skip-Links erscheinen in der Regel nur, wenn sie den Fokus erhalten (z.B. durch Tastaturbedienung mit der Tab-Taste), und bleiben ansonsten unsichtbar. Sie werden typischerweise am Anfang einer Webseite platziert und bieten direkten Zugriff auf den Hauptinhalt, die Navigation oder andere wichtige Bereiche der Seite.

Für sehende Nutzer, die eine Maus verwenden, ist es einfach, visuell zu identifizieren, wo sich der Hauptinhalt einer Seite befindet, und direkt dorthin zu scrollen. Für Tastaturnutzer und Screenreader-Nutzer ist dies jedoch nicht so einfach. Ohne Skip-Links müssten diese Nutzer:

  1. Sich durch alle Navigationselemente tabben, die auf jeder Seite wiederholt werden
  2. Bei jedem Seitenladen erneut durch dieselben Elemente navigieren
  3. Erheblich mehr Zeit aufwenden, um zum gewünschten Inhalt zu gelangen

Skip-Links lösen dieses Problem, indem sie einen direkten Weg zum Hauptinhalt oder zu anderen wichtigen Bereichen bieten, wodurch die Nutzererfahrung verbessert und die Effizienz erhöht wird.

Die Implementierung von Skip-Links ist relativ einfach. Hier sind die grundlegenden Schritte:

1. HTML-Struktur

Fügen Sie am Anfang Ihrer HTML-Datei, direkt nach dem öffnenden <body>-Tag, einen oder mehrere Skip-Links hinzu:

<body>
  <a href="#content" class="skip-link">Zum Hauptinhalt springen</a>
  <a href="#nav" class="skip-link">Zur Navigation springen</a>
  <a href="#footer" class="skip-link">Zum Fußbereich springen</a>


  <!-- Rest der Seite -->
  <header>...</header>
  <nav id="nav">...</nav>
  <main id="content">...</main>
  <footer id="footer">...</footer>
</body>

2. CSS-Styling

Skip-Links sollten nur sichtbar sein, wenn sie den Fokus haben. Dies kann mit CSS erreicht werden:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}


.skip-link:focus {
  top: 0;
}

Dieses CSS positioniert den Skip-Link außerhalb des sichtbaren Bereichs, bis er den Fokus erhält, dann wird er am oberen Rand des Bildschirms angezeigt.

3. Zielbereiche definieren

Stellen Sie sicher, dass die Zielbereichs-IDs (#content, #nav, #footer usw.) in Ihrem HTML-Code vorhanden sind:

<main id="content">
  <!-- Hauptinhalt -->
</main>

Um sicherzustellen, dass Ihre Skip-Links wirklich effektiv sind, befolgen Sie diese bewährten Praktiken:

1. Sichtbarkeit und Zugänglichkeit

  • Eindeutiger Fokus-Zustand: Stellen Sie sicher, dass Skip-Links deutlich sichtbar sind, wenn sie den Fokus erhalten.
  • Ausreichender Kontrast: Verwenden Sie Farben mit ausreichendem Kontrast für bessere Lesbarkeit.
  • Angemessene Schriftgröße: Verwenden Sie eine gut lesbare Schriftgröße (mindestens 16px).

2. Platzierung und Reihenfolge

  • Erste tabbbare Elemente: Skip-Links sollten die ersten tabbaren Elemente auf der Seite sein.
  • Logische Reihenfolge: Ordnen Sie Skip-Links in einer logischen Reihenfolge an, beginnend mit dem Link zum Hauptinhalt.

3. Ziele und Beschriftungen

  • Klare Beschriftungen: Verwenden Sie beschreibende Texte wie “Zum Hauptinhalt springen” anstelle von einfachem “Überspringen”.
  • Funktionierende Ziele: Stellen Sie sicher, dass die Ziel-IDs existieren und korrekt sind.
  • Fokussierbares Ziel: Die Zielbereiche sollten fokussierbar sein oder ein tabindex="-1" haben, damit sie Fokus erhalten können.

Vermeiden Sie diese häufigen Fehler bei der Implementierung von Skip-Links:

  1. Skip-Links komplett ausblenden: Verwendung von display: none oder visibility: hidden macht die Links für Screenreader unzugänglich.
  2. Falsche oder fehlende Ziel-IDs: Links, die auf nicht existierende IDs verweisen, sind nutzlos.
  3. Fehlender Fokus-Zustand: Skip-Links, die beim Fokussieren nicht sichtbar werden, bieten keinen Nutzen für Tastaturbenutzer.
  4. Unzureichender Kontrast: Skip-Links mit schlechtem Kontrast sind schwer zu lesen.
  5. Zu kleine Klickfläche: Skip-Links sollten eine ausreichend große Klickfläche haben.

Einfache Implementation

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Barrierefreie Webseite</title>
    <style>
      .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: white;
        padding: 8px;
        z-index: 100;
        transition: top 0.3s;
      }


      .skip-link:focus {
        top: 0;
      }
    </style>
  </head>
  <body>
    <a href="#content" class="skip-link">Zum Hauptinhalt springen</a>


    <header>
      <nav>
        <!-- Navigation -->
      </nav>
    </header>


    <main id="content" tabindex="-1">
      <!-- Hauptinhalt -->
    </main>


    <footer>
      <!-- Fußbereich -->
    </footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Erweiterte barrierefreie Webseite</title>
    <style>
      .skip-links {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
      }


      .skip-links a {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: white;
        padding: 8px;
        transition: top 0.3s;
        text-decoration: none;
      }


      .skip-links a:focus {
        top: 0;
        outline: 2px solid #4d90fe;
      }
    </style>
  </head>
  <body>
    <div class="skip-links">
      <a href="#content">Zum Hauptinhalt springen</a>
      <a href="#nav">Zur Navigation springen</a>
      <a href="#search">Zur Suche springen</a>
      <a href="#footer">Zum Fußbereich springen</a>
    </div>


    <header>
      <div id="search" tabindex="-1">
        <!-- Suchfunktion -->
      </div>
      <nav id="nav" tabindex="-1">
        <!-- Navigation -->
      </nav>
    </header>


    <main id="content" tabindex="-1">
      <!-- Hauptinhalt -->
    </main>


    <footer id="footer" tabindex="-1">
      <!-- Fußbereich -->
    </footer>
  </body>
</html>

Verwenden Sie diese Checkliste, um sicherzustellen, dass Ihre Skip-Links barrierefrei und effektiv sind:

  • Skip-Links sind die ersten tabbaren Elemente auf der Seite
  • Skip-Links werden beim Fokussieren deutlich sichtbar
  • Skip-Links haben aussagekräftige Beschriftungen
  • Alle Ziel-IDs existieren und sind korrekt
  • Zielbereiche haben tabindex="-1", wenn sie normalerweise nicht fokussierbar sind
  • Skip-Links haben ausreichenden Farbkontrast
  • Skip-Links funktionieren mit Tastatur und Screenreader
  • Es gibt mindestens einen Skip-Link zum Hauptinhalt
  • Skip-Links werden nicht mit display: none oder visibility: hidden ausgeblendet

Fazit

Skip-Links sind ein einfaches, aber äußerst wirksames Mittel zur Verbesserung der Barrierefreiheit von Webseiten. Sie bieten Tastaturnutzern und Screenreader-Nutzern eine effiziente Möglichkeit, wiederkehrende Inhalte zu überspringen und direkt zum gewünschten Inhalt zu gelangen. Durch die Implementierung gut gestalteter Skip-Links können Sie die Nutzererfahrung für alle Besucher Ihrer Webseite verbessern, unabhängig von ihren Fähigkeiten oder den von ihnen verwendeten Hilfsmitteln.

Die Implementierung von Skip-Links ist ein wichtiger Schritt zur Einhaltung der Web Content Accessibility Guidelines (WCAG) und trägt dazu bei, Ihre Webseite für alle Nutzer zugänglicher zu machen.