Zum Inhalt springen
44 Barrierefreiheit Dokumentation

2.4.1 - Bypass-Blöcke

A 2.0 Umsetzung

Ziel

Effiziente Navigation durch die Möglichkeit, wiederholte Inhaltsblöcke zu überspringen, um schnell zum Hauptinhalt zu gelangen.

Beschreibung

  • Wiederholte Inhaltsblöcke wie Navigationsleisten, Menüs oder Kopf- und Fußzeilen überspringen, um den Hauptinhalt schneller und direkter zu erreichen.
  • Auch betroffen sind Seiten mit langen Inhaltslisten oder Filteroptionen.
  • Skip-Links oder andere Mechanismen müssen einfach auffindbar und nutzbar sein.
  • Die Navigation sollte sowohl mit der Tastatur als auch assistiven Technologien wie Screenreadern möglich sein.

Anforderungen

  • HTML5-Regionen wie <header>, <main>, <footer> oder ARIA-Landmarks wie role=“main” verwenden.
  • Alternativ Skip-Links einbauen, um direkt zum Hauptinhalt springen zu können.
  • Sicherstellen, dass Regionen wie <main> visuell und funktional klar abgrenzbar sind.
  • Skip-Links wie <a href="#main-content">Zum Hauptinhalt springen</a> an prominenter Stelle implementieren.
  • Eine korrekte Überschriftenstruktur sicherstellen, wobei <h1> nur im Hauptinhalt verwendet wird.

Code-Beispiele

<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
<main id="main-content">
  <h1>Hauptinhalt der Seite</h1>
  <p>...</p>
</main>
HTML5-Regionen
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">
  <h1>Seiteninhalt</h1>
  <p>...</p>
</main>
<footer role="contentinfo">...</footer>
ARIA-Landmarks (falls keine HTML5-Regionen genutzt werden können):
<div role="banner">...</div>
<div role="navigation">...</div>
<div role="main">
  <h1>Seiteninhalt</h1>
  <p>...</p>
</div>
<div role="contentinfo">...</div>