Eine ergänzende Orientierungshilfe: Die Brotkrümelnavigation

HTML sieht kein Element für die Auszeichnung einer Brotkrümelnavigation vor. Allerdings handelt es sich bei einer Brotkrümelnavigation meist um eine Folge von Links zu übergeordneten Webseiten, das heißt die Links sollten als Navigationsregion ausgezeichnet werden:

Wie Links in einer Brotkrümelnavigation aufbereitet werden sollen, wurde in der Vergangenheit oft diskutiert. Die meisten Quellen empfehlen entweder eine Nummerierung mit einem ol-, eine Aufzählung mit einem ul- oder einen Absatz mit einem p-Element. Die Listen bieten leichte Vorteile, weil dann Screenreader vorab ankündigen, wieviele Listeneinträge in der Brotkrümelnavigation stehen.

Beispiel mit dem ol-Element

Von allen Variationen ist eine Nummerierung mit einem ol-Element am Ehesten zu empfehlen, denn eine Brotkrümelnavigation ist ihrem Wesen nach eine geordnete Liste. Wenn Links als Liste aufbereitet werden, können sie im Bedarfsfall in einem Screenreader übersprungen werden. Darüber hinaus sollten folgende Aspekte im HTML noch berücksichtigt werden:

• Die Navigationsregion benötigt einen Namen, damit sie von anderen Navigationsregionen unterschieden werden kann. Der Name kann mit dem aria-label- oder aria-labelledby-Attribut erfolgen.
• Visuell stellt die Brotkrümelnavigation eine Beziehung zwischen der aktuellen Seite und den übergeordneten Webseiten her. Oft wird das durch ein Zeichen wie ein "»" dargestellt. Solche Trennzeichen sind Teil der Präsentation. Sie gehören ins CSS und sollten vor Screenreadern verborgen werden. Für Screenreader wird die Beziehung zwischen den einzelnen Einträgen durch die Struktur, also etwa eine Liste abgebildet.
• Die aktuelle Seite, das heißt 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 einem aria-current="page" ergänzt werden.

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

Name für die Seitenregion

Eine Navigationsregion sollte einen Namen erhalten 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 Brotkrümelnavigation nicht verzichtet werden sollte. Es gibt zwei Ansätze:

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

   <nav id="breadcrumb" aria-labelledby="breadcrumb-header">
  <header aria-hidden="true">
    <strong id="breadcrumb-header">Sie sind hier:</strong>
  </header>
  <ol>
    <li><a href="/">Startseite</a></li>
    <li><a href="/artikel/">Artikel</a></li>
    <li><a href="/artikel/interaktion/">Interaktion</a></li>
<li><a href="/artikel/interaktion/navigationskonzepte/">Navigationskonzepte</a></li>
    <li><strong>Breadcrumbs</strong></li>
  </ol>
</nav>

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

2. Alternativ kann eine Navigationsregion mit einem aria-label-Attribut einen Namen erhalten.

   <nav id="breadcrumb" aria-label="Sie sind hier">
  <ol>
    <li><a href="/">Startseite</a></li>
    <li><a href="/artikel/">Artikel</a></li>
    <li><a href="/artikel/interaktion/">Interaktion</a></li>
<li><a href="/artikel/interaktion/navigationskonzepte/">Navigationskonzepte</a></li>
    <li><strong>Breadcrumbs</strong></li>
  </ol>
</nav>

Beispiele

Die Brotkrümelnavigation kann wie folgt gestaltet werden:

Wenn die aktuelle Seite verlinkt bleibt, dann setzen Sie für den Link ein aria-current="page" ein:

Hinweise zur Gestaltung

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

• In einer Brotkrümelnavigation 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;
}

  

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

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