Breadcrumb-Navigation: Barrierefreie Orientierung auf Websites
Breadcrumbs sind ein einfaches, aber wirkungsvolles Navigationsmittel: Sie zeigen Nutzern auf einen Blick, wo sie sich in der Seitenhierarchie befinden, und ermöglichen den schnellen Sprung zu übergeordneten Ebenen. Für Screenreader-Nutzer bieten sie eine wertvolle Orientierungshilfe, die ohne visuelles Scannen der Seite auskommt. Für Suchmaschinen sind Breadcrumbs mit Schema.org-Markup ein strukturiertes Signal für die Seitenhierarchie. Trotz ihrer scheinbaren Einfachheit werden Breadcrumbs überraschend oft nicht barrierefrei umgesetzt – fehlende semantische Auszeichnung, unzugängliche Trennzeichen und mangelnde Kennzeichnung der aktuellen Seite sind häufige Probleme.
WCAG-Anforderungen und semantisches Markup
WCAG 2.4.8 „Location" (Level AAA) fordert, dass Nutzer erkennen können, wo sie sich innerhalb einer Website befinden. Breadcrumbs sind eine der effektivsten Methoden, dieses Kriterium zu erfüllen. Die semantisch korrekte Umsetzung verwendet ein `
Schema.org-Markup für Suchmaschinen
Google und andere Suchmaschinen nutzen Breadcrumb-Markup, um die Seitenhierarchie zu verstehen und in den Suchergebnissen als Rich Snippet anzuzeigen. Das empfohlene Format ist JSON-LD mit dem Schema.org-Typ „BreadcrumbList". Jede Ebene wird als „ListItem" mit Position, Name und URL ausgezeichnet. Alternativ können Microdata-Attribute direkt im HTML verwendet werden, was den Vorteil hat, dass Markup und sichtbarer Inhalt synchron bleiben. In beiden Fällen müssen die URLs absolut sein. Die aktuelle Seite sollte als letztes ListItem aufgeführt werden, idealerweise ohne URL-Property. Validieren Sie Ihr Markup mit dem Google Rich Results Test. Beachten Sie, dass Schema.org-Markup und ARIA-Attribute unterschiedliche Zwecke erfüllen: Schema.org ist für Suchmaschinen, ARIA für assistive Technologien. Beide sollten implementiert werden, sie ergänzen sich und widersprechen sich nicht.
Gestaltung und visuelle Best Practices
Breadcrumbs sollten visuell zurückhaltend, aber gut erkennbar sein. Platzieren Sie sie konsistent am oberen Seitenrand, oberhalb des Hauptinhalts und unterhalb der Hauptnavigation. Verwenden Sie eine kleinere Schriftgröße als der Fließtext, aber nicht kleiner als 12px – Breadcrumbs müssen lesbar bleiben. Links in Breadcrumbs sollten als solche erkennbar sein (Unterstreichung oder Farbunterscheidung) und den üblichen Link-Kontrast von 4,5:1 zum Hintergrund einhalten. Die aktuelle Seite am Ende der Breadcrumb-Kette sollte sich visuell von den klickbaren Links unterscheiden – etwa durch fehlende Unterstreichung, eine andere Farbe oder Fettschrift. Auf kleinen Bildschirmen können Breadcrumbs bei tiefer Hierarchie umbrechen oder auf die letzten zwei bis drei Ebenen verkürzt werden. Bei Verkürzung sollte die erste Ebene (Startseite) und die aktuelle Seite immer sichtbar bleiben, dazwischenliegende Ebenen können als „…" zusammengefasst werden – dieses Element muss dann aufklappbar und tastaturzugänglich sein.
Häufige Fehler und Accessibility-Anti-Patterns
Der häufigste Fehler ist die Verwendung von Divs und Spans statt einer semantischen Listenstruktur – Screenreader können dann die Anzahl der Ebenen nicht kommunizieren. Trennzeichen wie „>" als reiner Text eingefügt werden von Screenreadern vorgelesen: „Startseite größer als Kategorie größer als Produkt" statt „Startseite, Kategorie, Produkt". Fehlende `aria-current="page"` auf der aktuellen Seite lässt Screenreader-Nutzer im Unklaren, welche Ebene die aktuelle ist. Die aktuelle Seite als klickbaren Link zu gestalten ist verwirrend – ein Link, der zur aktuellen Seite führt, hat keinen Nutzen. Breadcrumbs, die nur visuell per CSS erzeugt werden (z.B. über `content`-Properties), sind für Screenreader unsichtbar. Fehlende Landmark-Navigation via `
Wie steht deine Webseite in diesem Punkt da?
Kostenloser Scan gegen 15 WCAG-2.1-AA-Kriterien – inkl. Breadcrumb-Navigation-Check.
Jetzt Webseite prüfen →