Eine ergänzende Orientierungshilfe: Die Brotkrumen-Navigation veröffentlicht in 2011zuletzt bearbeitet in 2016

HTML und CSS für Breadcrumbs

HTML sieht kein Element für die Auszeichnung einer Brotkrumennavigation vor. Allerdings handelt es sich bei einer Brotkrumennavigation meist um eine Folge von Links zu übergeordneten Webseiten, d.h. die Links sollten als Navigationsregion ausgezeichnet werden:

Wie Links in einer Brotkrumennavigation aufbereitet werden sollen, wurde in der Vergangenheit oft diskutiert. Die meisten Quellen empfehlen entweder eine Nummerierung mit OL, eine Aufzählung mit UL oder einen Absatz mit P ohne Listenelemente. Die Listen bieten leichte Vorteile, weil dann Screenreader vorab ankündigen, wieviele Listeneinträge in der Brotkrumennavigation stehen.

Beispiel mit UL

Von allen Variationen ist eine einfache Aufzählung mit UL am Ehesten zu empfehlen, denn eine Brotkrumennavigation ist ihrem Wesen nach eine Linkliste. Wenn Links als Liste aufbereitet werden, können sie besser in einem Screenreader übersprungen werden. Darüber hinaus sollten folgende Aspekte im HTML noch berücksichtigt werden:

• Die Navigationsregion benötigt eine Bezeichnung, damit sie von anderen Navigationsregionen unterschieden werden kann. Die Bezeichnung kann mit dem aria-label- oder aria-labelledby-Attribut erfolgen.
• Visuell stellt die Brotkrumennavigation eine Beziehung zwischen der aktuellen Seite und den übergeordneten Webseiten her. Oft wird das durch ein Zeichen wie ein ">" dargestellt. Das Trennzeichen sollte im HTML stehen, damit auch Screenreader es erfassen können.
• Die aktuelle Seite, d.h. der letzte Eintrag in der Navigation, wird meist visuell so gestaltet, dass er sich von den anderen Einträgen unterscheidet. Das muss natürlich auch semantisch im HTML berücksichtigt werden; am einfachsten ist der Verzicht auf die Verlinkung. Bleibt der aktuelle Eintrag verlinkt, sollte der Link mit Aria-current="page" ergänzt werden.

Das HTML-Grundgerüst für eine Brotkrumennavigation ist also:

Breadcrumb ohne CSS

Bezeichnung der Region

Eine Navigationsregion sollte bezeichnet werden insbesondere dann, wenn mehrere gleichartige Regionen auf einer Webseite vorkommen. Auf den meisten Webseiten befinden sich mehrere Navigationsregionen, so dass auf eine Bezeichnung für die Brotkrumennavigation nicht verzichtet werden sollte. Es gibt zwei Ansätze:

1. Wenn eine sichtbare Beschriftung vorhanden ist, kann der Text herangezogen werden mit aria-labelledby.

   <nav id="breadcrumb" aria-labelledby="breadcrumb-header">
  <header aria-hidden="true">
      <h2 id="breadcrumb-header">Sie sind hier:</h2>
    </header>
  <ul>
    <li><a href="/">Startseite</a> →</li>
    <li><a href="/knowhow/">Wissen</a> →</li>
    <li><a href="/knowhow/nuetzerfuehrung/">Nutzerführung</a> →</li>
    <li><strong>Breadcrumbs</strong></li>
  </ul>
  </nav>

   In diesem Beispiel ist es ohne Belang, ob ein H2- oder beispielsweise ein P-Element eingesetzt wird, denn das HEADER-Element wird vor dem Accessibility-Tree verborgen, um Redundanzen in Screenreadern zu vermeiden.

2. Anderenfalls kann eine Navigationsregion mit aria-label bezeichnet werden.

   <nav id="breadcrumb" aria-label="Pfadangabe">
  <ul>
    <li><a href="/">Startseite</a> →</li>
    <li><a href="/knowhow/">Wissen</a> →</li>
    <li><a href="/knowhow/nuetzerfuehrung/">Nutzerführung</a> →</li>
    <li><strong>Breadcrumbs</strong></li>
  </ul>
  </nav>

Hinweise zur Gestaltung

Die konkrete Gestaltung einer Brotkrumennavigation hängt zwar vom grafischen Design ab, aber einige Aspekte der Barrierefreiheit sollten immer beachtet werden:

• In einer Brotkrumennavigation ist der letzte Eintrag meist nicht verlinkt. Verlinkte und nicht-verlinkte Einträge dürfen sich nicht alleine durch Farbe unterscheiden. Meist bedeutet das, dass entweder die Links unterstrichen werden sollten oder der nicht verlinkte Eintrag fett dargestellt wird (auch wenn es zahlreiche Alternativen für die visuelle Formatierung gibt). Um die aktuelle Position visuell und vor allem im Kontrastmodus besser hervorzuheben, kann beispielsweise auch mit der border-Technik gearbeitet werden:

  #breadcrumb strong {
  border-right:   4px solid #fff;
  padding-right: 4px;
}

  Visuelle Hervorhebung der aktuellen Seite für den Kontrastmodus

• Wenn Hover-Effekte eingesetzt werden, darf der Fokus-Effekt nicht vergessen werden:

  #breadcrumb   a:hover,
#breadcrumb  a:focus,
#breadcrumb  a:active {
  text-decoration: none;
}