Das Märchen von Hänsel und Gretel kennen wohl die meisten. Die Kinder werden in den Wald gebracht, hinterlassen aber einen Pfad aus Brotkrumen hinter sich. Den wollen sie zurückverfolgen um wieder aus dem Wald zu finden. Jetzt sollte eine Website kein undurchdringlicher Wald sein, aber manchmal ist es trotzdem hilfreich, den gegangenen Pfad zu kennen um sich orientieren zu können. Genau dafür dient die nach dem Grimmschen Märchen benannte Brotkrumen-Navigation oder auch Breadcrumb-Navigation, kurz Breadcrumbs. Ein paar wenige Links, doch sie können einen wichtigen Teil zur Barrierefreiheit einer Website beisteuern. Sehen wir uns zunächst mal die Fakten an.
Was sind Breadcrumbs?
Breadcrumbs, oder auf Deutsch „Brotkrumen-Navigation“, sind kleine, aber effektive Orientierungshilfen auf Websites. Sie zeigen den Pfad an, den Nutzer innerhalb einer Seite zurückgelegt haben, und helfen dabei, sich besser in der Struktur einer Website zurechtzufinden. Meistens findet man sie als eine horizontale Leiste am oberen Seitenrand – etwa so:
Startseite → Kategorie → Unterkategorie → Aktuelle Seite
Statt sich mühsam durch das Menü oder den „Zurück“-Button zu navigieren, können Nutzer mit einem Klick zu vorherigen Ebenen springen. Das macht Breadcrumbs besonders auf umfangreichen Websites wie Online-Shops, Blogs oder Wissensportalen nützlich. Sie verbessern die Orientierung, verkürzen den Weg zu relevanten Inhalten und sorgen für eine bessere Benutzererfahrung.
Struktur der Seite oder Pfad des Nutzers?
Viele Wege führen nach Rom und auch viele Navigationspfade zu Ihren Seiten. Nutzer könnten direkt aus einer Suchmaschine gekommen sein, über die Seitennavigation, einen internen Link zwischen den Seiten oder Ihre eigene Suche. Dabei haben Ihre Websites häufig eine geplante Struktur, einen logischen Aufbau. Meist ist das der, den man auch in der Hauptnavigation findet.
Doch welchen Pfad sollte eine Breadcrumb dann anzeigen? Den tatsächlich gelaufenen oder den geplanten, also die vorgesehene Seitenstruktur in der es eine feste Hierarchie gibt? Beide Varianten haben Vorteile:
Vorteile einer hierarchischen Breadcrumb
- Konsistenz & Vorhersehbarkeit: Die Darstellung der Breadcrumb ist für jeden Nutzer und zu jedem Zeitpunkt gleich.
- Struktur & Hierarchie: Nutzer erhalten ein besseres Verständnis über die Struktur der Website, insbesondere bei einem Einstieg über externe Links.
- Ergänzung zur Navigation: Sie unterstützen die Hauptnavigation durch einen schnellen Zugriff auf thematisch relevante Seiten.
- SEO: Auch Suchmaschinen erfreuen sich an der zusätzlichen Struktur.
Vorteile einer Pfad-Darstellung
Gerade in großen Online-Shops liegen Artikel oft in mehreren Kategorien. So wird der neue Unisex-Zeitmesser vermutlich in der Kategorie Herrenuhren zu finden sein, aber auch bei den Damenuhren, womöglich den Luxusuhren und auch den Lederbanduhren. All diese Kategorien sind gleichwertig, es gibt keine davon, die die Hauptkategorie ist.
Würde eine Nutzerin die Uhr nun in den Damenuhren finden und öffnen, die Breadcrumb würde dann aber „Herrenuhren“ anzeigen, wäre die Verwirrung groß. Deshalb kann es hier hilfreich sein, den tatsächlich gewählten Pfad der Nutzerin anzuzeigen und ihr die Sicherheit zu geben, dass es sich (auch) um eine Damenuhr handelt.
Welche Breadcrumb-Variante ist nun besser?
Grundsätzlich wird empfohlen, die Hierarchie der Website darzustellen und eine Seite mithilfe der Breadcrumb einen Kontext zu geben. Eine Verpflichtung ist das aber nicht. Der Zweck einer Breadcrumb ist es am Ende, Nutzer zu unterstützen. Wählen Sie also die Variante, die auf Ihrer Website am meisten Sinn ergibt.
Brauche ich eine Breadcrumb-Navigation auf meiner Website?
Viele Designer sind von Breadcrumbs genervt. Sie stören die Ansicht des mühevoll geplanten Seitenkopfes. Ganz oben soll ein emotionales Bild doch Aufmerksamkeit generieren und dann kommt diese schnöde und nicht sonderlich Attraktive Linkliste daher und möchte auch einen Platz finden. Nicht selten soll sie, trotz vieler Vorteile, deshalb am besten gleich wegfallen. Doch was macht das mit der Barrierefreiheit einer Website? Welche Anforderungen gibt es?
Anforderung der WCAG
Die Web Content Accessibility Guidelines (WCAG) erwähnen Breadcrumbs zwar nicht explizit, jedoch sind sie ein typisches Werkzeug um Kriterium 2.4.8 Location (Position) zu erfüllen. Darin heißt es:
Es gibt Informationen zu der Position des Benutzers innerhalb eines Satzes von Webseiten.
Das Kriterium fällt in das höchste Konformitätslevel AAA und hat demnach eigentlich nur dann Priorität, wenn ein Höchstmaß an Barrierefreiheit erreicht werden soll. Es ist allerdings in der deutschen BITV enthalten. Damit ist die Erfüllung dieses Kriteriums für öffentliche Stellen, Kommunen und durch Bund und Länder zum Großteil geförderte Projekte verpflichtend. Es kann also keinesfalls ignoriert werden.
Braucht meine kleine Website eine Breadcrumb-Navigation?
Sie haben eine kleine Website mit nur wenigen Unterseiten und möchten diese gern barrierefrei umsetzen? Sie mögen aber keine Breadcrumbs, finden diese sperrig und unattraktiv? Dann machen Sie sich keine Sorge, denn die WCAG schreiben ja nur vor, dass Nutzer über die aktuelle Position informiert werden müssen, sie fordern keine Breadcrumbs. Auf kleinen Websites, auf denen jede Seite in der Navigation verlinkt ist, reicht es deshalb auch, die aktive Seite (und deren Eltern-Seiten) hervorzuheben. Auch so wird Nutzern deutlich gemacht, wo im Seitenbaum sie sich gerade befinden. Beachten Sie aber, dass diese Markierung auch ohne Farben funktionieren muss. Wählen Sie doch eine deutliche Unterstreichung oder einen anderen Schriftschnitt für den aktiven Menüpunkt.
Mehr Informationen:
Breadcrumbs in HTML barrierefrei umsetzen
Doch wie werden die Brotkrumen jetzt verteilt? Einfach auf den Waldboden werfen wie im Märchen klappt nicht. Auch Hänsel und Gretel mussten merken, dass sie dort von den Vögeln gegessen werden und am Ende nichts bringen. Also machen wir es besser und schauen uns an, wie wir eine barrierefreie Breadcrumb-Navigation in unserer Website einbinden.
Zunächst einmal machen wir uns Gedanken darüber: was genau Breadcrumbs semantisch sind. Im Endeffekt sind sie eine Liste von Links und zwar eine sortierte Liste, denn die Reihenfolge ist wichtig. Beginnend beim äußersten Element bzw. der Hauptkategorie werden die Einträge immer präziser bis hin zur aktuellen Seite.
Mehr über den Unterschied zwischen sortierten und unsortierten Listen gibt es übrigens im Artikel HTML-Listen für barrierefreie Aufzählungen.
Mit dem Wissen um die semantische Bedeutung einer Breadcrumb können wir schon einmal ein HTML-Grundgerüst erstellen:
<nav>
<ol>
<li><a href="/">Startseite</a></li>
<li><a href="/blog/">Blog</a></li>
<li>Aktueller Beitrag</li>
</ol>
</nav>Das Nav-Element um die Liste setzen wir ein um Screenreadern deutlich zu machen, dass es sich um einen Teil der Seitennavigation handelt. Den aktuellen Menüpunkt kann man verlinken, muss man aber auch nicht. Nutzer sind ja schon auf dieser Seite.
Relevante ARIA-Attribute
So wie unsere Breadcrumbs aktuell umgesetzt sind, sind sie zwar mit der Tastatur und Screenreader nutzbar, aber nicht ideal. Im wesentlichen bleiben 2 Fragen unbeantwortet:
Um was für eine Art Navigation handelt es sich denn?
Was ist hier die aktuelle Seite?
Diese Fragen lassen sich unkompliziert durch zwei ARIA-Attribute beantworten.
- aria-label: aria-label dient der Beschriftung von Elementen, damit sie für Screenreader einen Namen erhalten. Da es keine echte semantische Rolle für Breadcrumbs gibt kann Nutzern von Screenreadern so trotzdem erklärt werden, wie die folgende Liste zu verstehen ist. Der Name „Breadcrumb“ reicht dafür meist aus.
- aria-current:
aria-currentzeigt an, welches Element in einer Gruppe gerade aktiv oder relevant ist. In Breadcrumbs wirdaria-current="page"verwendet, um Screenreadern mitzuteilen, dass das hier die aktuell aufgerufene Seite ist. Man kann es aber auch verwenden um den aktuellen Tag im Kalender oder den aktuellen Schritt in einem mehrstufigen Formular zu kennzeichnen.
Bauen wir beide Attribute in unser HTML ein, erhalten wir folgenden einfachen, gut lesbaren Code für unsere Breadcrumb. Und mit ein wenig CSS sieht es auch aus, wie wir es kennen.
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Startseite</a></li>
<li><a href="/blog/">Blog</a></li>
<li aria-current="page">Aktueller Beitrag</li>
</ol>
</nav>Vorlagen wie diese für barrierefreie Komponenten gibt es übrigens beim ARIA Authoring Practise Guide.
Fazit – Breadcrumbs als Orientierungshilfe
Wie Hänsel und Gretel ihre Brotkrumen nutzten, um den Weg aus dem Wald zu finden, helfen Breadcrumbs dabei, sich auf einer Website zurechtzufinden. Sie erleichtern die Navigation, indem sie einen schnellen Sprung zu übergeordneten Seiten ermöglichen, und sind besonders auf großen Websites eine sinnvolle Ergänzung zur Hauptnavigation. Während hierarchische Breadcrumbs eine klare Struktur schaffen, zeigen pfadbasierte Varianten, wie jemand zur aktuellen Seite gelangt ist – was in manchen Fällen hilfreicher sein kann. Mit semantischem HTML und ARIA-Attributen wie aria-label="Breadcrumb" und aria-current="page" lassen sie sich nicht nur verständlicher gestalten, sondern auch nahtlos ins Design einfügen, ohne die Optik zu stören. So bleibt die Orientierung erhalten – ganz ohne Krümel auf dem Bildschirm.