Breadcrumb-Navigation in WordPress barrierefrei umsetzen (BFSG-konform)
Der Praxis-Leitfaden für Unternehmen 2025
Eine gute Navigation ist wie ein zuverlässiger Kompass – sie hilft Besuchern, sich auf Ihrer Website zurechtzufinden und schnell ans Ziel zu kommen.
Die Breadcrumb-Navigation übernimmt dabei eine besonders wichtige Rolle: Sie zeigt Nutzern jederzeit den aktuellen Standort und den Weg zurück zur Startseite. Gerade für Menschen mit Sehbehinderungen oder blinde Menschen, die Ihre Website mit einem Screenreader besuchen, ist diese klare Orientierung unverzichtbar.
Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) ab Juni 2025 wird eine unbeschränkt zugängliche Navigation noch wichtiger. Dieser Leitfaden zeigt Ihnen, wie Sie eine barrierefreie Breadcrumb-Navigation in WordPress umsetzen.
Sie erfahren, welche Fallstricke es zu vermeiden gilt und wie Sie gleichzeitig Ihre Nutzerführung und Ihr Google-Ranking verbessern.
Dieser Praxis-Leitfaden ist besonders wertvoll für:
- WordPress-Websites, die auf das BFSG vorbereitet werden müssen
- Unternehmen, die barrierefreie Navigationen umsetzen
- Website-Betreiber, die ihre Nutzerführung für alle Menschen optimieren möchten
Zuletzt aktualisiert: März 2025
Was ist eine Breadcrumb-Navigation?
Die Breadcrumb-Navigation (zu deutsch: Brotkrümel-Navigation) ist ein bewährtes Element der Website-Navigation, das seinen Namen aus dem Märchen „Hänsel und Gretel“ entlehnt. Wie die Brotkrumen im Märchen den Weg nach Hause markieren, zeigt die Breadcrumb-Navigation den Besuchern den Pfad durch die Hierarchie Ihrer Website.
Aufbau und Funktionsweise
Eine typische Breadcrumb-Navigation erscheint als horizontale Linie unterhalb der Hauptnavigation und zeigt den aktuellen Standort sowie alle übergeordneten Seiten an:
Startseite > Produkte > Kategorie > Aktuelles Produkt
Jedes Element ist dabei ein klickbarer Link (außer der aktuellen Seite), sodass Besucher schnell zu übergeordneten Ebenen zurückkehren können. Die einzelnen Elemente werden üblicherweise durch Symbole wie „>“ oder „/“ getrennt.
Die drei Arten von Breadcrumb-Navigationen
Hierarchie-basierte Breadcrumbs
- Zeigen die Position der aktuellen Seite in der Website-Struktur
- Am häufigsten verwendet
- Ideal für Websites mit klarer hierarchischer Struktur
- Beispiel: Startseite > Lösungen > Workshop: Content Strategie
Beispiel für eine Breadcrumb-Navigation nach Hierarchie (hier von unserer Website netzpluslogik.de)
Verlaufs-basierte Breadcrumbs
- Zeigen den individuellen Navigationspfad des Nutzers
- Funktionieren wie der „Zurück“-Button im Browser
- Nützlich für komplexe Webanwendungen
- Beispiel: Startseite > Produkt A > Produkt B (basierend auf dem Nutzerverhalten)
Attribut-basierte Breadcrumbs
- Zeigen Eigenschaften oder Kategorien des aktuellen Elements
- Häufig in E-Commerce verwendet
- Beispiel: Startseite > Elektronik > Unter 500€ > Mit 5G
Technische Grundstruktur
Eine barrierefreie Breadcrumb-Navigation basiert auf semantisch korrektem HTML-Code
Diese Struktur:
- Nutzt das semantische <nav>-Element mit aussagekräftigem aria-label
- Verwendet eine geordnete Liste (<ol>) für die logische Struktur
- Markiert das aktuelle Element mit aria-current=“page“
- Ermöglicht Screenreadern die korrekte Interpretation der Navigation
Ein Code-Beispiel (HTML):
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a href="/">Startseite</a></li>
<li><a href="/produkte">Produkte</a></li>
<li aria-current="page">Aktuelles Produkt</li>
</ol>
</nav>Bedeutung für das BFSG und WCAG
Die Frage, ob eine Breadcrumb-Navigation für die Erfüllung des Barrierefreiheitsstärkungsgesetzes (BFSG) verpflichtend ist, lässt sich klar beantworten: Eine Breadcrumb-Navigation ist nicht explizit vorgeschrieben.
Dennoch spielt sie eine wichtige Rolle bei der Umsetzung barrierefreier Websites nach den WCAG-Richtlinien, auf denen das BFSG basiert.
WCAG-Anforderungen an die Navigation
Die WCAG 2.1 bzw. WCAG 2.2 definieren mehrere Voraussetzungen, die eine Website-Navigation erfüllen muss:
- Focus Order (WCAG 2.4.3, Level A): Die Navigation via Keyboard muss in einer logischen Reihenfolge erfolgen.
- Multiple Ways (WCAG Punkt 2.4.5, Level AA): Nutzer sollen verschiedene Möglichkeiten haben, Inhalte zu erhalten.
- Location (WCAG 2.4.8, Level AAA): Nutzer sollen wissen, wo sie sich innerhalb einer Website befinden, dazu können Breadcrumbs , Sitemaps oder andere Möglichkeiten genutzt werden.
Eine gut umgesetzte Breadcrumb-Navigation hilft dabei, diese Kriterien zu erfüllen. Sie bietet:
- Eine logische Abbildung der Website-Hierarchie.
- Einen zusätzlichen Navigationsweg neben dem Hauptmenü.
- Klare Orientierung über den aktuellen Standort.
Rechtliche Einordnung im BFSG-Kontext
Das BFSG verlangt ab Juni 2025 die Umsetzung der WCAG-Richtlinien auf Level AA. Obwohl eine Breadcrumb-Navigation nicht explizit gefordert wird, unterstützt sie die Erfüllung wichtiger Anforderungen:
- Auffindbarkeit von Informationen: Erleichterter Zugang zu allen Bereichen der Website
- Navigierbarkeit: Verbesserte Orientierung und Navigation
- Verständlichkeit: Klare Darstellung der Website-Struktur
Abgesehen von der Barrierefreiheit Ihrer Website unterstützt eine Breadcrumb-Navigation auch alle übrigen Besucher beim schnellen Finden von Informationen.
Bedeutung für die Barrierefreiheit
Die Breadcrumb-Navigation bietet besondere Vorteile für:
Screenreader-Nutzer
- Klare Ansage der Hierarchieebenen
- Einfache Navigation zu übergeordneten Seiten
- Strukturiertes Erfassen der Website-Organisation
Menschen mit kognitiven Einschränkungen
- Bessere Orientierung durch visuelle Hierarchie
- Reduzierte kognitive Belastung
- Klare Rückwege zu bekannten Punkten
Sehbehinderte Menschen
- Zusätzliche Orientierungshilfe neben dem Hauptmenü
- Kontrastreiches, gut lesbares Navigationselement
- Vereinfachte Standortbestimmung
Direkt aus der Praxis: Barrierefreie Breadcrumb-Navigation mit Divi
Wie bereits beschrieben, ist eine Breadcrumb-Navigation keine Pflicht, aufgrund der Nützlichkeit für alle Arten von Besuchern aber unbedingt zu empfehlen.
WordPress, Divi, Breadcrumbs und Barrierefreiheit – es ist kompliziert
Ende 2024 war es unser Ziel, unsere eigene Website netzpluslogik.de barrierefrei zu machen. Nach BFSG sind wir dazu nicht verpflichtet, wir möchten das aber auf jeden Fall erreichen. Für alle Menschen Informationen und Websites frei zugänglich zu machen, ist eine sehr gute Idee!
Dabei war für uns vor allem ein bestandener WAVE-Test der erste wichtige Meilenstein.
Leider sind weder WordPress noch Divi in Sachen Barrierefreiheit oder Breadcrumbs besonders hilfreich.
Breadcrumbs und Barrierefreiheit – unser Weg
Nach viel Ausprobieren haben wir dann für unsere Website folgende Lösung gewählt:
Bei der Auswahl des Breadcrumb-Plugins war es uns wichtig, dass es ein richtiges Divi-Plugin ist, dass sich in den Visual Builder integriert. Die Verwendung von Shortcodes, gerade auch in Hinsicht auf das kommende Divi 5, möchten wir vermeiden.
Unsere Wahl ist das beliebte Plugin bzw. die Modul-Sammlung Divi Supreme Pro.
Das enthaltene Modul Divi Supreme Breadcrumbs Module gefällt vor allem durch vielen Einstellmöglichkeiten und leichte Bedienbarkeit.
An sich das perfekte Modul, wenn es denn ARIA verwenden würde… Macht es aber leider nicht. Nicht mal ein „aria-label=“Breadcrumb“ lässt es sich beibringen.
Ein zusätzliches Accessibility-Plugin
Zusätzlich haben wir das Plugin Accessibility Atributes installiert. Mit diesem Plugin können für Abschnitte, Spalten, Zeilen und Module in Divi ARIA-Label hinzugefügt werden.
Um aria-label=“Breadcrumb“ nun in <nav> zu bekommen, das das Breadcrumbs-Modul gesetzt hat (und nur genau da gehört das hin!), sind folgende Einstellungen notwendig:
- Zeileneinstellung (grüne Zeilen in Divi) aufrufen
- In Spalte Einstellungen > Erweitert dann ARIA Label: Mode auf „AN“
- ARIA Label: Text ist „Breadcrumb“
- ARIA Label: Selector ist „nav“
Damit wird dann dem <nav>-Tag für die Breadcrumb-Navigation das aria-label=“Breadcrumb“ zugeordnet. Mit dieser semantischen Auszeichnung weiß ein Screenreader dann, um welche Art Navigation es sich handelt.
Die Pfeile zwischen den einzelnen Navigationspunkten der Breadcrumb-Navigation werden übrigens korrekt auf aria-hidden=“true“ gesetzt. Damit haben diese Elemente für einen Screenreader keine Bedeutung und sind nur rein optischer Natur.
Ergänzend dazu wäre eigentlich noch ein aria-current=“page“ für die aktuelle, aktive Seite in der Breadcrumb sinnvoll. Dafür haben wir aber auch noch keine Lösung. Über Accessibility Attributes geht das im Moment (noch) nicht. Wir haben den Autor des Plugins angeschrieben – sobald es neue Infos gibt, berichten wir an dieser Stelle.
Noch mehr nützliche Informationen
Modernstes Webdesign und Barrierefreie Websites gehen Hand in Hand. Hier ein kleiner Überblick von Themen und Lösungen, die für Sie auch interessant sein könnten.
Barrierefreie Websites nach BFSG
Dieser Leitfaden erklärt Ihnen praxisnah und ohne technischen Fachjargon, was barrierefreie Websites ausmacht, welche konkreten Vorteile sie Ihrem Unternehmen bringen und wie Sie Schritt für Schritt umsetzen können.
Accessibility Overlays für Websites
Accessibility Overlays versprechen barrierefreie Websites auf Knopfdruck – doch halten sie, was sie versprechen? Dieser Artikel erklärt, was Overlays tatsächlich leisten können, wo ihre Grenzen liegen und ob damit das BFSG erfüllt ist.
Konzeption und Erstellung von Websites
Als Ihr Partner für erfolgreiches Webdesign liefern wir attraktive Websites, die Ihr Neukundengeschäft ankurbeln. Maßgeschneiderte Webdesign-Lösungen mit WordPress.