Navigation überspringen Sitemap anzeigen

Ratgeber Wiederkehrende Elemente sollten überspringbar sein

Was bedeutet der Hinweis?

Dieser Hinweis zeigt an, dass wiederkehrende Elemente auf deiner Website, wie Navigationen, Menüs oder Header, nicht einfach übersprungen werden können. Für Nutzer, die auf Tastaturnavigation angewiesen sind, kann das Navigieren durch diese Elemente mühsam sein. Eine Funktion zum Überspringen hilft Nutzern, direkt zu den Hauptinhalten zu springen.

Warum ist das wichtig?

Auswirkungen des Problems:

  • Barrierefreiheit: Menschen mit Behinderungen können schneller und einfacher auf den Hauptinhalt zugreifen.
  • Benutzerfreundlichkeit: Alle Nutzer profitieren von einer effizienteren Navigation, insbesondere auf komplexen Websites.
  • Rechtliche Anforderungen: Barrierefreiheitsstandards wie die WCAG verlangen überspringbare Elemente.

Lösungsschritte

Schritt-für-Schritt-Anleitung zur Fehlerbehebung:

  1. Erstelle einen „Zum Inhalt springen“-Link:
    • Füge am Anfang der Seite einen unsichtbaren Link hinzu, der Nutzern ermöglicht, direkt zum Hauptinhalt zu springen.
    • Beispiel: 
      <a href="#main-content" class="skip-link">Zum Inhalt springen</a>
  2. Verankere den Hauptinhalt mit einer ID:
    • Stelle sicher, dass der Hauptinhalt mit einer eindeutigen ID versehen ist, auf die der Link verweist.
    • Beispiel: 
      <main id="main-content">   
    <h1>Willkommen auf unserer Website</h1>   
    <p>Hier finden Sie alle wichtigen Informationen.</p>   
</main>
  3. Mache den Link visuell zugänglich:
    • Der „Zum Inhalt springen“-Link sollte standardmäßig versteckt sein und nur bei Fokus sichtbar werden.
    • Beispiel-CSS: 
      .skip-link {   
    position: absolute;   
    top: 10px;   
    left: 10px;   
    background: #000;   
    color: #fff;   
    padding: 10px;   
    text-decoration: none;   
    z-index: 1000;   
    transform: translateY(-100%);   
}    

.skip-link:focus {   
    transform: translateY(0);   
}
  4. Teste die Funktionalität:
    • Navigiere mit der Tabulatortaste durch die Seite und überprüfe, ob der „Zum Inhalt springen“-Link sichtbar wird und korrekt funktioniert.
  5. Verwende semantische HTML-Elemente:
    • Nutze semantische Tags wie <header>, <nav> und <main>, um die Struktur deiner Website zu verbessern und überspringbare Bereiche klar zu definieren.

Beispiele & Best Practices

Beispiel ohne überspringbare Elemente (fehlerhaft):

<header>
    <nav>
        <!-- Lange Navigation -->
    </nav>
</header>
<main>
    <h1>Hauptinhalt</h1>
</main>

Beispiel mit überspringbaren Elementen (optimiert):

<a href="#main-content" class="skip-link">Zum Inhalt springen</a>
<header>
  <nav>
    <!-- Lange Navigation -->
  </nav>
</header>
<main id="main-content">
  <h1>Hauptinhalt</h1>
</main>

Häufige Fehler und wie man sie vermeidet:

  • Fehlender Fokus-Stil: Achte darauf, dass der Link sichtbar wird, wenn er fokussiert ist.
  • Kein Ziel für den Link: Der „Zum Inhalt springen“-Link muss auf eine eindeutige ID verweisen.
  • Nur dekorative Implementierung: Der Link sollte tatsächlich funktionieren und Nutzern Zeit sparen.

Technische Details

  • Ein „Zum Inhalt springen“-Link sollte früh im DOM platziert werden, idealerweise direkt nach dem <body>-Tag.
  • Verwende eine klare und konsistente Benennung für IDs und Links.
  • Nutze CSS, um den Link standardmäßig auszublenden, aber bei Fokus sichtbar zu machen.

Weiterführende Ressourcen

Kontakt für Hilfe

Falls du Unterstützung bei der Implementierung überspringbarer Elemente benötigst, kannst du dich gerne an uns wenden. Schreibe uns unter .

Mit überspringbaren Elementen sorgst du für eine bessere Benutzerfreundlichkeit und Barrierefreiheit auf deiner Website.

Zum Seitenanfang