SSB-C – Einheitlicher Standard für Breadcrumbs

Definitionen

Der SSB-C-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Breadcrumbs fest.

Schema.org-Mikro-Markup – Verwendung der Attribute itemscope, itemtype und itemprop zur korrekten Darstellung von Breadcrumbs in Suchergebnissen (Rich Snippets).

HTML-Struktur – logische Abfolge der Elemente: <nav> → <ol> → <li> → <a> (mit Ausnahme des letzten Elements, das die aktuelle Seite darstellt).

Letztes Element – das Listenelement <li>, das die aktuelle Seite kennzeichnet und kein Link sein darf; die Verwendung von aria-current="page" wird empfohlen.

Textformatierung – Listenelemente müssen Basisstile aufweisen, die einen Zeilenumbruch verhindern (white-space: nowrap) und von Links geerbt werden.

Horizontales Scrollen – Für mobile Geräte muss der Container <nav> horizontales Scrollen ermöglichen, wenn der Inhalt überläuft (overflow-x: auto).

Struktur und Semantik

Breadcrumbs sollten semantisch korrekte HTML-Tags verwenden:

• <nav> zur Kennzeichnung des Navigationsblocks;
• <ol> für eine geordnete Liste;
• <li> für jedes Breadcrumb-Element.

HTML-Beispiel (mit BEM-Klassen):

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">Startseite</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/category" class="breadcrumbs__link">Kategorie</a>
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current">
      Titel der aktuellen Seite
    </li>
  </ol>
</nav>

Barrierefreiheit

Das letzte Element der Liste kennzeichnet die aktuelle Seite:

• Es darf kein Link sein;
• Zur Verbesserung der Barrierefreiheit sollte aria-current="page" hinzugefügt werden.

HTML-Beispiel:

<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
  Titel der aktuellen Seite
</li>

Interaktivität und visuelle Rückmeldung

Gestaltung von Text und Links:

• Die Elemente <li> enthalten Basisstile, die von den Links (<a>) übernommen werden;
• Um Zeilenumbrüche zu verhindern, wird white-space: nowrap verwendet.

CSS-Beispiel:

.breadcrumbs__item {
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
}

.breadcrumbs__link {
  color: #007bff;
  text-decoration: none;
}

.breadcrumbs__item--current {
  font-weight: bold;
  color: #343a40;
}

Horizontaler Bildlauf für mobile Geräte:

.breadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
}

.breadcrumbs__list {
  display: flex;
}

Schema.org-Mikrodaten:

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">Startseite</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category">
        <span itemprop="name">Kategorie</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">Titel der aktuellen Seite</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>