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

HTML und CSS

Ein Brotkrumenpfad ist seinem Wesen nach eine Linkliste, so dass eine Auszeichnung mit UL oder OL in Frage kommt. Darüber hinaus sollten folgende Aspekte im HTML noch berücksichtigt werden:

Die optische Gestaltung eines Breadcrumbs ist meist horizontal, wobei die einzelnen Ebenen durch ein Zeichen wie ">" getrennt werden. Es handelt sich hierbei um eine Konvention und keine Anforderung.
Da es sich um ein Navigationsbereich handelt, sollte die Pfadangabe überspringbar gemacht werden, um eine strukturelle Navigation zu erlauben. Die erforderliche Auszeichnung kann im HTML mit einem ARIA-Orientierungspunkt oder mit Überschriften erfolgen, wobei Überschriften selbstverständlich nutzerfreundlicher sind.
Oft wird die aktuelle Seite, d.h. der letzte Eintrag im Pfad, optisch so gestaltet, dass er sich von den anderen Einträgen unterscheidet. Das muss natürlich auch strukturell oder textlich im HTML berücksichtigt werden; am einfachsten ist der Verzicht auf die Verlinkung.

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

<div id="breadcrumb"> <h6>Sie sind hier: </h6> <ul> <li><a href="#">Startseite</a> ></li> <li><a href="#"> Wissen</a> ></li> <li><a href="#"> Nutzerführung</a> ></li> <li><strong>Breadcrumbs</strong></li> </ul> </div>

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

Die Verwendung von H6 impliziert hier, dass die strukturelle Navigation auf der Seite mit diesem Element vorgesehen ist.

Optionale Erweiterungen im HTML

Um die Barrierefreiheit zu optimieren, kann das Grundgerüst der Brotkrumen-Navigation erweitert werden:

Die aktuelle Seite kann mit (unsichtbarem) Text erweitert werden. Der Text dient vor allem Screenreadernutzern dazu, den Eintrag eindeutig als die aktuelle Seite zu identifizieren.
Ein ARIA-Orientierungspunkt kann berücksichtigt werden, um die Brotkrumennavigation als Navigationsbereich zu kennzeichnen. Der Einsatz von Orientierungspunkten (landmark roles) dient dazu, Informationsblöcke direkt anspringen bzw. überspringen zu können. Aber: ARIA-Orientierungspunkte sind in den Web Content Accessibility Guidelines 2.0 eine "advisory technique", sie sollten nur ergänzend zu "sufficient techniques" eingesetzt werden. Der Grund dafür ist, dass ARIA derzeit (Herbst 2011) nur in wenigen Screenreadern unterstützt wird. Landmark roles sollten — wenn sie eingesetzt werden — konsequent für alle Bereiche einer Seite eingesetzt werden.

Das HTML-Grundgerüst kann dann wie folgt erweitert werden:

<div id="breadcrumb" role="navigation"> <h6>Sie sind hier: </h6> <ul> <li><a href="#">Startseite</a> ></li> <li><a href="#"> Wissen</a> ></li> <li><a href="#"> Nutzerführung</a> ></li> <li><strong><span class="unsichtbar">Aktuelle Seite: </span>Breadcrumbs</strong></li> </ul> </div>

CSS-Eigenschaften

Die Gestaltung einer Brotkrumen-Navigation hängt natürlich vom Design der Seite ab. Nachstehend einige Hinweise zur Barrierefreiheit mit einfachen beispielhaften CSS-Regeln.

Für die horizontale Anordnung der Links könnte das CSS wie folgt aussehen:

#pfad { min-height: 3em; padding: 0 0 0 2em; max-width: 45em; } #pfad h6 { float: left; margin: 0; font-size: 1em; font-weight: 400; } #pfad ul, #pfad li { float: left; display: inline; line-height: 1.4em; } #pfad li a, #pfad li strong { float: left; color: #555; display: block; }

Breadcrumb mit CSS
Damit die Links sich visuell von der aktuellen Position eindeutig unterscheiden:

#pfad a { text-decoration: underline; }
Wenn Hover-Effekte eingesetzt werden, darf der Fokus-Effekt nicht vergessen werden:

#pfad a:hover, #pfad a:focus, #pfad a:active { text-decoration: none; }
Um die aktuelle Position visuell und bei benutzerdefinierten Farben besser hervorzuheben, kann mit der border-Technik gearbeitet werden:

#pfad strong { border-right: 4px solid #ffff; padding-right: 4px; }

Visuelle Hervorhebung der aktuellen Seite
Um zusätzlichen Text nur für Screenreader "sichtbar" zu machen, sollte display:none; unbedingt vermieden werden. Vielmehr sollte die Klasse "unsichtbar" die Zugänglichkeit für Screenreader garantieren:

.unsichtbar { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }