html-einfach.de

Barrierefreie Komponenten · Navigation & Bedienelemente

Breadcrumbs barrierefrei aufbauen

Von Zuletzt geändert am

Breadcrumbs – auf Deutsch Brotkrümel – zeigen, wo man sich innerhalb der Seitenstruktur befindet: „Start › Barrierefreie Komponenten › Breadcrumbs“. Sie sind ein kleines Element mit doppeltem Nutzen: Orientierung für Menschen und ein klares Strukturmerkmal für Suchmaschinen. Richtig umgesetzt, sind sie schnell gebaut – und genau das macht es ärgerlich, wenn die Semantik fehlt.

Der Schlüssel liegt in zwei Entscheidungen: das richtige Listenelement und die korrekte Kennzeichnung der aktuellen Seite.

Das semantische Grundgerüst

Eine Brotkrumen-Navigation ist eine geordnete Liste in einem benannten <nav>. Geordnet (<ol>) deshalb, weil die Reihenfolge eine Hierarchie abbildet – von der Startseite bis zur aktuellen Seite. Die letzte Krume ist die aktuelle Seite und wird mit aria-current="page" markiert; ich setze sie bewusst nicht als Link, denn man ist ja schon dort:

<nav aria-label="Sie sind hier">
  <ol>
    <li><a href="/index.html">Start</a></li>
    <li><a href="/barrierefreie-komponenten.html">Barrierefreie Komponenten</a></li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

Das aria-label benennt diese Navigation, damit sie sich von der Hauptnavigation unterscheidet – „Sie sind hier“ oder „Brotkrümel“ sind beide gängig. Dass hier ein <ol> und kein <ul> steht, ist kein Detail: Die Reihenfolge ist die Information. Mehr dazu unter Listen richtig nutzen.

Trenner gehören ins CSS, nicht in den Text

Die Schrägstriche oder Pfeile zwischen den Krumen sind reine Dekoration. Stünden sie als Textzeichen im Markup, würde ein Screenreader sie mitlesen – „Start Schrägstrich Barrierefreie Komponenten Schrägstrich …“. Deshalb erzeuge ich sie per CSS und halte sie aus dem Inhalt heraus:

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: #4a4d57;
}

Wer den Trenner partout im HTML braucht, versteckt ihn mit aria-hidden="true". Aber der CSS-Weg ist sauberer und genau der, den auch diese Website nutzt.

Strukturierte Daten gratis dazu

Breadcrumbs sind eine der dankbarsten Stellen für strukturierte Daten. Mit einem BreadcrumbList nach Schema.org versteht eine Suchmaschine die Hierarchie und zeigt sie häufig direkt im Suchergebnis an – statt der nackten URL erscheint dann der Breadcrumb-Pfad:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "Start", "item": "https://example.de/" },
      { "@type": "ListItem", "position": 2, "name": "Barrierefreie Komponenten", "item": "https://example.de/barrierefreie-komponenten.html" }
    ]
  }
</script>

Auf dieser Website wird genau dieses JSON-LD automatisch aus derselben Datenquelle erzeugt, die auch die sichtbaren Breadcrumbs speist – eine Quelle, kein Drift. Wie strukturierte Daten generell funktionieren, vertieft Strukturierte Daten / Schema.org.

Häufige Fehler

  • <ul> statt <ol>. Breadcrumbs bilden eine Reihenfolge ab – das gehört in eine geordnete Liste.
  • Aktuelle Seite verlinkt. Die letzte Krume sollte kein Link sein und aria-current="page" tragen.
  • Trenner als Textzeichen. Schrägstriche im Markup werden mitgelesen – besser per CSS.
  • <nav> ohne Label. Bei mehreren Navigationen braucht jede einen unterscheidbaren Namen.
  • Sichtbare und strukturierte Breadcrumbs laufen auseinander. Beide sollten aus derselben Quelle stammen, sonst widersprechen sie sich irgendwann.

Häufige Fragen

Braucht jede Seite Breadcrumbs?

Nur, wenn es eine Hierarchie zum Abbilden gibt. Auf einer flachen Website ohne Unterebenen bringen sie wenig. Bei verschachtelten Strukturen – Themenbereiche, Kategorien, Shops – sind sie dagegen Gold wert.

Soll die aktuelle Seite in den Breadcrumbs auftauchen?

Ja, als letzte Krume – aber als Text mit aria-current="page", nicht als Link. So ist der Pfad vollständig und die aktuelle Position klar.

Ersetzen Breadcrumbs die Hauptnavigation?

Nein. Sie ergänzen sie. Breadcrumbs zeigen den Weg von oben bis hierher; die Hauptnavigation erschließt die Breite des Angebots. Das sind zwei verschiedene Aufgaben.

Fazit

Barrierefreie Breadcrumbs sind ein <nav aria-label> mit einer geordneten Liste, deren letzte Krume per aria-current="page" die aktuelle Seite markiert; die Trenner kommen aus dem CSS. Wer dann noch ein BreadcrumbList-JSON-LD aus derselben Quelle erzeugt, bekommt Orientierung und SEO-Vorteil in einem – mit erfreulich wenig Markup.