Brotkrümelnavigation
Der Weg zurück nach oben
Liste, Einträge, Linktexte: drei Stellen im Pfad über der Seite.
Hierarchie sichtbar machen
Ein Pfad, drei verständliche Darstellungen
Eine Brotkrümelnavigation verbindet Seitenstruktur, Orientierung und Suchdaten.
Die wichtigsten Punkte vor dem Servicetermin.
Gleiche Reihenfolge
Was die drei Empfänger bekommen
Sichtbare Links führen zu den übergeordneten Ebenen.
Sinngemäß: „Brotkrümelnavigation, Navigation … Wärmepumpe warten, aktuelle Seite.“
BreadcrumbList beschreibt dieselbe Hierarchie als Daten.
Vier tragende Teile
Die Semantik hinter dem Pfad
- 1Navigation benennenDas Label unterscheidet den Pfad von Haupt- und Fußnavigation.
- 2Reihenfolge als ListeJede Hierarchiestufe ist ein direktes Listenelement.
- 3Elternseiten verlinkenDer Linktext nennt das Ziel auch ohne umgebenden Satz.
- 4Aktuelle Seite markieren
aria-current="page"steht genau einmal.
<nav aria-label="Brotkrümelnavigation">
<ol class="breadcrumb">
<li><a href="/">Startseite</a></li>
<li><a href="/ratgeber">Ratgeber</a></li>
<li><a href="/ratgeber/wohnen">Wohnen</a></li>
<li>
<a href="/ratgeber/wohnen/waermepumpe-warten"
aria-current="page">Wärmepumpe warten</a>
</li>
</ol>
</nav>Umbruch statt Abschneiden
Der Trenner gehört zur Darstellung
Die Links dürfen auf schmalen Anzeigen umbrechen. Ein gezeichneter Trenner bleibt dabei Dekoration und wird nicht Teil des Linknamens.
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb li + li::before {
content: "";
display: inline-block;
inline-size: 0.5rem;
block-size: 0.5rem;
margin-inline: 0.1rem 0.6rem;
border-block-start: 0.125rem solid currentColor;
border-inline-end: 0.125rem solid currentColor;
transform: rotate(45deg);
}So prüfen Sie es
Vier kurze Beweise statt eines Bauchgefühls
- 01Bereichsliste
Der Pfad erscheint als benannte Navigation.
- 02Aktuelle Seite
Genau ein Eintrag trägt
aria-current="page". - 03Schmale Ansicht
Bei 320 Pixeln bricht der Pfad um, ohne waagerechtes Rollen.
- 04Datenabgleich
Sichtbarer Pfad und
BreadcrumbListnennen dieselben Ebenen.
Aus dem Prüfbericht
Drei Stellen im Pfad
Kritisch Ein Absatz mitten im Pfad Regel list
Im ul der Brotkrümelnavigation steht ein p. Beschreibender Text gehört vor die Liste, nicht hinein.
Kritisch Die aktuelle Seite steht außerhalb der Liste Regel listitem
Der letzte Eintrag folgt hinter dem schließenden ul-Tag. Verschieben Sie ihn als li in dieselbe Liste.
Kritisch Das Haussymbol führt namenlos zur Startseite Regel link-name
Das erste Glied des Pfads ist oft nur ein Icon. Ein sichtbarer Text oder aria-label nennt die Startseite.
Zum Mitnehmen
Die Brotkrümelnavigation, korrigiert
Eine Liste, vollständige Einträge, sprechende Linktexte.
Korrektur in 2 Schritten ansehen
Alle Ebenen in die Liste holen
Der Pfad ist eine ul mit li-Einträgen. Die aktuelle Seite steht als letzter Eintrag in derselben Liste und trägt aria-current.
KorrekturvergleichSchritt 1 · HTML Vorher
<nav aria-label="Brotkrümelnavigation"> <ul> <p>Sie sind hier:</p> <li><a href="/">Start</a></li> </ul> <li aria-current="page">Dachziegel</li> </nav>Nachher
<nav aria-label="Brotkrümelnavigation"> <p>Sie sind hier:</p> <ul> <li><a href="/">Start</a></li> <li aria-current="page">Dachziegel</li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie den Pfad vorlesen. Das Programm sagt „Liste mit zwei Einträgen“.
Dem Startseiten-Link einen Namen geben
Das Haussymbol trägt keinen Text. aria-label benennt den Link, das Symbol wird für Vorleseprogramme ausgeblendet.
KorrekturvergleichSchritt 2 · HTML Vorher
<li> <a href="/"> <span class="icon-haus"></span> </a> </li>Nachher
<li> <a href="/" aria-label="Startseite"> <span class="icon-haus" aria-hidden="true"></span> </a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste auf das Haussymbol. Ein Vorleseprogramm sagt „Startseite, Link“.