Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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 Intern: Navigationsregion ausgezeichnet werden:

<nav id="breadcrumb">
  ...
  </nav>

Wie Links in einer Brotkrumennavigation aufbereitet werden sollen, wurde Extern, englischsprachig: 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 Extern, englischsprachig: 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 Intern: übersprungen werden. Darüber hinaus sollten folgende Aspekte im HTML noch berücksichtigt werden:

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

<nav id="breadcrumb">
  <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>

Das Breadcrumb-Grundgerüst, dargestellt als ungeordnete Liste Breadcrumb ohne CSS

Bezeichnung der Region

Eine Navigationsregion sollte bezeichnet werden insbesondere dann, wenn Extern: 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: