Inhaltsverzeichnis
Was sind Breadcrumbs?
Breadcrumbs (deutsch: Brotkrümel-Navigation oder Brotkrümel-Pfad) sind ein sekundäres Navigationselement auf Websites, das Besuchern den aktuellen Pfad durch die Seitenhierarchie anzeigt. Der Begriff stammt aus dem Märchen von Hänsel und Gretel, in dem die Kinder Brotkrumen auf ihrem Weg durch den Wald streuen, um den Weg zurück zu finden.
Typischerweise werden Breadcrumbs oben auf einer Seite angezeigt und bilden die Hierarchie von der Startseite bis zur aktuellen Position ab – zum Beispiel: Startseite > Produkte > Elektronik > Smartphones. Jede Ebene ist ein klickbarer Link, über den Besucher direkt zu übergeordneten Kategorien oder Unterseiten springen können, ohne den Umweg über das Menü nehmen zu müssen.
Breadcrumbs erfüllen mehrere wichtige Funktionen: Sie verbessern die Orientierung der Besucher auf der Website, erleichtern die Navigation durch mehrschichtige Strukturen, reduzieren die Anzahl nötiger Klicks und bieten eine kompakte Übersicht über die Seitenhierarchie. Gleichzeitig unterstützen sie Suchmaschinen wie Google dabei, die Struktur einer Website besser zu verstehen.
Für die digitale Barrierefreiheit ist eine korrekt implementierte Brotkrümel-Navigation essentiell. Sie ermöglicht Menschen mit Behinderungen – insbesondere Nutzern von Screenreadern, Menschen mit kognitiven Einschränkungen und älteren Besuchern – eine bessere Orientierung und Kontrolle über ihre Navigation. Lesen Sie in diesem Artikel, wie Breadcrumbs den Benutzern helfen.
Breadcrumbs verbessern Usability, Orientierung und SEO gleichermaßen
Barrierefreie Implementierung ist ein WCAG-Erfolgskriterium
Google zeigt Breadcrumbs als Rich Snippets in den SERPs an
Vorteile von Breadcrumbs für Besucher, SEO und Usability
Orientierung und Übersicht: Breadcrumbs geben dem Besucher eine klare, visuelle Darstellung seiner Position innerhalb der Seitenhierarchie. Dies ist besonders wertvoll auf Websites mit tiefen Ebenen oder komplexen Kategorien. Ein User weiß sofort, wo er sich befindet und welchen Pfad er durch die Inhalte genommen hat.
Reduzierte Navigationsschritte: Ohne Breadcrumbs müssten Besucher zum Menü zurückkehren, um zu übergeordneten Unterseiten zu navigieren. Mit einer Brotkrümelnavigation können sie direkt zu einer beliebigen Ebene in der Hierarchie klicken – das spart Zeit und verbessert die Usability erheblich.
Niedrigere Absprungrate: Studien zeigen, dass Websites mit gut implementierten Breadcrumbs eine niedrigere Absprungrate aufweisen und längere Besuchszeiten erzielen. Besucher fühlen sich sicherer und erkunden mehr Inhalte, falls sie sich in der Seitenhierarchie verloren fühlen.
SEO-Vorteile: Breadcrumbs helfen Suchmaschinen und deren Crawler, die Struktur und Hierarchie einer Website zu verstehen. Mit korrektem Schema.org-Markup können Breadcrumbs als Rich Snippets in den SERPs von Google angezeigt werden, was die Klickrate deutlich erhöht. Außerdem unterstützen sie die interne Verlinkung zwischen Kategorien und Unterseiten.
Kognitive Unterstützung: Menschen mit Lese-Rechtschreibstörung, Gedächtnisstörungen oder anderen kognitiven Einschränkungen profitieren besonders von Breadcrumbs. Sie reduzieren die kognitive Last, indem sie einen visuellen Rahmen und eine klare Übersicht für die Navigation bieten. Der Besucher muss sich nicht merken, wie er zur aktuellen Position gelangt ist.
Arten von Breadcrumbs
Es gibt drei gängige Varianten von Breadcrumbs, die sich in Funktion und Darstellung unterscheiden. Welche Variante die richtige ist, hängt von der Struktur Ihrer Website und den Bedürfnissen Ihrer Besucher ab.
Location Breadcrumbs (Hierarchie)
Der häufigste Typ. Zeigt die Seitenhierarchie an – von der Startseite über Kategorien bis zur aktuellen Position. Beispiel: Startseite > Shop > Elektronik > Smartphones. Diese Breadcrumbs bilden immer die gleiche Struktur ab, unabhängig davon, welchen Weg der Besucher genommen hat.
Path Breadcrumbs (Pfad)
Basieren auf dem tatsächlichen Pfad, den ein Besucher durch die Website genommen hat. Sie zeigen den individuellen Weg an – ähnlich wie die Brotkrumen im Märchen. Falls ein User verschiedene Unterseiten in unterschiedlicher Reihenfolge besucht, werden unterschiedliche Breadcrumbs angezeigt. Diese Variante ist heute weniger gebräuchlich.
Attribute Breadcrumbs
Zeigen die Attribute oder Filter an, die zum Erreichen der aktuellen Seite verwendet wurden. Häufig in E-Commerce und Online-Shops. Beispiel: Startseite > Damenschuhe > Größe 39 > Farbe Schwarz. Besucher können einzelne Attribute anklicken und ändern, ohne die gesamte Navigation wiederholen zu müssen.
Breadcrumbs und barrierefreie Webgestaltung
Breadcrumbs sind ein kritisches Element für digitale Barrierefreiheit. Eine korrekt implementierte Brotkrümel-Navigation hilft Menschen mit Behinderungen, die Seitenhierarchie zu verstehen und sich auf der Website zurechtzufinden. Eine schlecht implementierte Variante kann für diese Nutzer hingegen unsichtbar oder sogar verwirrend sein.
Screenreader-Nutzer: Besucher, die Bildschirmlesegeräte verwenden, benötigen ein semantisch korrektes HTML-Markup der Breadcrumbs. Dazu gehört die Verwendung des <nav>-Elements mit aria-label="Breadcrumb" und eine korrekte Strukturierung als geordnete Liste. Ohne korrektes Markup können Screenreader-Nutzer das Element nicht als Brotkrümel-Navigation erkennen.
Tastatur-Navigation: Alle Links in den Breadcrumbs müssen über die Tastatur erreichbar sein und eine sichtbare Fokus-Anzeige haben. Dies ist essentiell für User, die keinen Mauszeiger verwenden können. Der Besucher muss durch Klicken der Tab-Taste jede Ebene der Brotkrümelnavigation erreichen können.
Kognitive Barrierefreiheit: Eine klar strukturierte Breadcrumb-Navigation hilft Besuchern mit Aufmerksamkeitsstörungen oder Lese-Rechtschreibschwäche, ihre Position zu verstehen. Die Übersicht der Ebenen reduziert Verwirrung und gibt Orientierung – ähnlich wie die Brotkrümel im Märchen von Hänsel und Gretel den Weg zurück wiesen.
Die Web Content Accessibility Guidelines (WCAG) enthalten mehrere Erfolgskriterien, die direkt auf Breadcrumbs anwendbar sind und deren barrierefreie Umsetzung regeln.
Best Practices: Barrierefreie Breadcrumbs erstellen
Folgen Sie diesen Regeln, um sicherzustellen, dass Ihre Breadcrumbs barrierefrei, benutzerfreundlich und SEO-optimiert sind.
Semantisches HTML und ARIA
Verwenden Sie das <nav>-Element mit aria-label="Breadcrumb". Nutzen Sie eine geordnete Liste (<ol>), um die Hierarchie der Ebenen zu betonen. Markieren Sie die aktuelle Position mit aria-current="page" – als Text, nicht als Link.
Visuelle Klarheit und Design
Verwenden Sie ein deutliches Trennzeichen zwischen den Ebenen (z. B. „>", „/" oder ein Pfeil-Icon). Stellen Sie sicher, dass Links eine ausreichende Größe haben und genug Abstand besitzen. Der Kontrast zwischen Text und Hintergrund muss mindestens 4,5:1 betragen. Falls der Pfad sehr lang ist, begrenzen Sie die Darstellung auf 5–7 Ebenen.
Tastatur- und Fokus-Management
Alle Links müssen über die Tastatur erreichbar sein. Eine sichtbare Fokus-Anzeige im CSS ist essentiell. Die Link-Texte sollten aussagekräftig sein – vermeiden Sie Begriffe wie „hier klicken" oder „weiter". Der Fokus muss logisch von links nach rechts durch die Ebenen wandern.
SiteCockpit Lösung
So unterstützt easyVision die Brotkrümelnavigation
easyVision macht Breadcrumbs für alle Besucher zugänglicher. Das Widget bietet die Möglichkeit, die Schriftgröße zu erhöhen – besonders wichtig für ältere User, die kleine Navigationselemente übersehen. Durch die Funktion zur Kontrasterhöhung werden Brotkrümel und Trennzeichen auch bei ungünstigen Lichtverhältnissen lesbar. Zusätzlich können Besucher Animationen deaktivieren, was die Fokus-Sichtbarkeit beim Klicken durch die Ebenen verbessert.
Technische Implementierung: Breadcrumbs in HTML, CSS und CMS
HTML-Struktur (Best Practice): Die Grundlage für barrierefreie Breadcrumbs ist ein semantisch korrektes HTML-Markup. Verwenden Sie ein <nav>-Element mit aria-label, eine geordnete Liste und markieren Sie die aktuelle Position mit aria-current="page". Das letzte Element im Pfad sollte kein Link sein, da es die aktuelle Seite repräsentiert.
CSS-Styling: Gestalten Sie das Trennzeichen zwischen den Ebenen über CSS-Pseudoelemente (::before oder ::after) statt als Textzeichen im HTML-Content. Stellen Sie sicher, dass Fokus-Zustände deutlich sichtbar sind – verlassen Sie sich dabei nicht nur auf Farbe, sondern nutzen Sie auch Umrandungen oder Unterstreichungen. Responsive Design ist eine Regel: Auf mobilen Geräten sollten Breadcrumbs gekürzt werden können, falls der Pfad zu lang ist.
Schema.org-Markup für Google: Erstellen Sie zusätzlich ein BreadcrumbList-Schema, damit Suchmaschinen die Seitenhierarchie verstehen. Google kann dieses Markup als Rich Snippets in den SERPs darstellen. Die Daten sollten mit dem Google Rich Results Testing Tool validiert werden.
Umsetzung in CMS und PHP: Die meisten Content-Management-Systeme wie WordPress, Shopware oder TYPO3 bieten Breadcrumbs als eingebaute Funktion oder über Plugins an. Falls Sie ein eigenes System mit PHP nutzen, erstellen Sie die Brotkrümelnavigation dynamisch auf Basis der Seitenhierarchie. Achten Sie darauf, dass das HTML-Markup auch bei dynamischer Generierung alle Barrierefreiheits-Attribute enthält.
JavaScript-Erweiterungen: Falls JavaScript für dynamische Breadcrumbs verwendet wird, stellen Sie sicher, dass die Navigation auch ohne JavaScript funktioniert. Verwenden Sie aria-live="polite" für dynamische Updates, damit Screenreader-Nutzer über Änderungen informiert werden.
Häufige Fehler bei der Implementierung von Breadcrumbs
Fehlende semantische Struktur: Der häufigste Fehler: Breadcrumbs werden als einfache <div>- oder <span>-Elemente mit „>" als Trennzeichen implementiert. Für Screenreader-Nutzer ist dieses Element unsichtbar und nicht navigierbar. Ohne korrektes HTML erkennt kein Crawler die Brotkrümelnavigation als solche.
Keine aria-current-Markierung: Die aktuelle Position im Pfad sollte nicht als Link dargestellt werden. Sie muss mit aria-current="page" gekennzeichnet sein. Dies hilft Screenreader-Nutzern zu verstehen, auf welcher Ebene sie sich befinden.
Schlechte Fokusanzeige: Falls die Fokusanzeige im CSS schwach oder unsichtbar ist, können Besucher, die nur die Tastatur verwenden, die Breadcrumbs nicht navigieren. Der Fokus-Zustand muss bei jedem Link deutlich sichtbar sein.
Zu viele Ebenen: Eine Brotkrümelnavigation mit 10 oder mehr Ebenen ist verwirrend und verschlechtert die Usability. Das deutet in der Regel auf eine zu tiefe Seitenhierarchie hin. Als Regel gelten maximal 5–7 Ebenen.
Mehrdeutige Link-Texte: Breadcrumb-Elemente wie „Klicken Sie hier" oder „Weiter" sind nicht aussagekräftig. Jedes Element sollte klar den Namen der Kategorie oder Unterseite benennen, zu der es führt.
Verwechslung mit dem Menü: Breadcrumbs sind ein ergänzendes Navigationselement, kein Ersatz für das Hauptmenü. Beide sollten unabhängig voneinander funktionieren und dem Besucher verschiedene Möglichkeiten der Navigation bieten.
Breadcrumbs in E-Commerce und Online-Shops
Attribute-Breadcrumbs im Shop: In E-Commerce-Websites und Online-Shops sind Breadcrumbs oft komplexer, da Besucher Produkte über verschiedene Attribute filtern – etwa nach Kategorie, Größe, Farbe oder Preis. Eine gute Brotkrümelnavigation stellt diese Attribute als anklickbare Ebenen dar, sodass User einzelne Filter ändern können, ohne den Weg von vorne beginnen zu müssen.
Dynamische Breadcrumbs: Manche Shop-Systeme verwenden dynamische Breadcrumbs, die sich basierend auf dem Pfad des Besuchers ändern. Falls sich die Inhalte der Navigation ändern, müssen Screenreader-Nutzer darüber informiert werden – aria-live-Regionen können hier unterstützen.
Mobile Optimierung: Auf mobilen Geräten können lange Breadcrumb-Pfade Platzprobleme verursachen. Eine gängige Variante ist die Verkürzung auf „Startseite > … > Aktuelle Kategorie". Falls diese Lösung gewählt wird, muss die vollständige Navigation über ein aufklappbares Element erreichbar bleiben.
Breadcrumbs und Suchfunktion: Auf Suchergebnis-Seiten haben Breadcrumbs oft keine klassische Seitenhierarchie. Eine alternative Darstellung bietet sich an, zum Beispiel: „Startseite > Suchergebnisse für 'Sneaker'". So bleibt die Orientierung für den Besucher auch bei Suchanfragen erhalten.
Relevante WCAG-Erfolgskriterien für Breadcrumbs
Die Web Content Accessibility Guidelines (WCAG) enthalten mehrere Erfolgskriterien, die sich auf die barrierefreie Umsetzung von Breadcrumbs und Navigationselementen beziehen:
WCAG 1.3.1 – Info und Beziehungen (Level A): Die Struktur und Hierarchie der Breadcrumbs muss durch HTML-Markup kommuniziert werden – nicht nur visuell durch Design oder CSS. Crawler und Screenreader müssen die Seitenhierarchie erkennen können.
WCAG 1.4.3 – Kontrast Minimum (Level AA): Text in Breadcrumbs muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund aufweisen. Dies stellt sicher, dass Besucher mit Sehbehinderungen die Navigation lesen können.
WCAG 2.1.1 – Tastatur (Level A): Alle Funktionen der Breadcrumbs müssen über die Tastatur bedienbar sein. Besucher, die nicht klicken können, müssen jede Ebene per Tab-Taste erreichen.
WCAG 2.4.3 – Fokus-Reihenfolge (Level A): Der Fokus muss in logischer Reihenfolge durch die Ebenen wandern. Der Pfad der Brotkrümelnavigation muss von links nach rechts fokussierbar sein.
WCAG 2.4.7 – Fokus sichtbar (Level AA): Der aktuelle Fokus muss bei jedem Element der Breadcrumbs deutlich sichtbar sein – essentiell für User, die nur mit der Tastatur navigieren.
WCAG 3.2.3 – Konsistente Navigation (Level AA): Die Breadcrumbs müssen auf allen Unterseiten einer Website konsistent an der gleichen Position erscheinen. Besucher erwarten die Brotkrümelnavigation immer im selben Bereich.
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen, diese WCAG-Kriterien zu erfüllen. Mit easyStatement dokumentieren Sie die barrierefreie Umsetzung Ihrer Breadcrumbs und Navigation.
Häufige Fragen zu Breadcrumbs
Werkzeuge zum Testen von Breadcrumbs
Browser Developer Tools: Die Chrome und Firefox DevTools ermöglichen die Überprüfung der HTML-Struktur Ihrer Breadcrumbs. Nutzen Sie den Accessibility Tree, um zu sehen, wie Screenreader die Brotkrümelnavigation interpretieren.
Screenreader-Tests: Testen Sie mit kostenloser Software wie NVDA (Windows) oder VoiceOver (macOS). Prüfen Sie, ob die Breadcrumbs korrekt als Navigation angekündigt werden und jeder Link im Pfad erreichbar ist.
Tastatur-Navigation-Test: Navigieren Sie nur mit Tab und Shift+Tab. Alle Links müssen erreichbar und fokussierbar sein. Die Fokus-Anzeige muss bei jedem Element des Pfades deutlich sichtbar sein.
Google Rich Results Test: Validieren Sie Ihr BreadcrumbList-Schema, um sicherzustellen, dass Google die Daten korrekt liest und die Breadcrumbs als Rich Snippets in den SERPs anzeigen kann.
Automatisierte Prüfung: easyMonitoring von SiteCockpit bietet automatisierte WCAG-Prüfungen Ihrer gesamten Website – einschließlich der Analyse von Breadcrumbs, Kontrasten und Navigationsstruktur.
Prüfen Sie Ihre Breadcrumbs auf Barrierefreiheit
Sind Ihre Breadcrumbs barrierefrei und SEO-optimiert? Prüfen Sie jetzt mit SiteCockpit kostenlos, ob Ihre Brotkrümelnavigation den WCAG-Standards entspricht.
Keine Kreditkarte erforderlich.