Accessible Breadcrumbs
Der Pfad, der als Liste vorgelesen wird
Liste, Einträge, Linktext: ohne sie ist der Pfad nur lose Wörter.
Struktur sichtbar machen
Vom Seitenbaum zum Brotkrümelpfad
Ein guter Pfad ist die kürzeste lesbare Karte zur aktuellen Seite. Die gleiche Hierarchie muss visuell, im HTML und für assistive Technik erkennbar bleiben.
Auf schmalen Ansichten bleibt jede Stufe lesbar
- Startseite
- Produkte
- Werkzeuge
- Fräsenaktuelle Seite
Das vollständige HTML
Der Navigationsbereich bekommt einen eigenen Namen. Die geordnete Liste hält die Stufen zusammen; nur die aktuelle Seite trägt aria-current="page".
<nav class="brotkruemel" aria-label="Sie sind hier">
<ol>
<li><a href="/">Startseite</a></li>
<li><a href="/produkte">Produkte</a></li>
<li><a href="/produkte/werkzeuge">Werkzeuge</a></li>
<li>
<a href="/produkte/werkzeuge/fraesen" aria-current="page">
Fräsen
</a>
</li>
</ol>
</nav>Das CSS für Trenner und Umbruch
Der Trenner ist reine Darstellung und wird deshalb per CSS erzeugt. Auf kleinen Ansichten wird aus der Zeile ein eingerückter Pfad.
.brotkruemel ol {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0;
margin: 0;
padding: 0;
list-style: none;
}
.brotkruemel li {
display: flex;
align-items: center;
}
.brotkruemel li + li::before {
content: '›';
margin-inline: 0.65rem;
}
.brotkruemel a {
display: inline-block;
padding-block: 0.4rem;
}
.brotkruemel [aria-current='page'] {
color: inherit;
font-weight: 700;
text-decoration-thickness: 0.18em;
}
@media (max-width: 36rem) {
.brotkruemel ol {
display: grid;
}
.brotkruemel li + li {
padding-inline-start: 1.25rem;
}
}Vertiefen und gegenprüfen
Das Breadcrumb-Muster der WAI-ARIA Authoring Practices beschreibt Landmarke und aktuellen Link. MDN erklärt die Werte und Regeln von aria-current. Der W3C-Hintergrund zu WCAG 2.4.8 „Position“ ordnet Breadcrumbs als Orientierungshilfe ein.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Der Pfad ist keine Liste Regel list
Ein div mit Text und Pfeilen hat keine Struktur. Als ol sagt ein Vorleseprogramm „Liste mit 4 Einträgen“.
Kritisch Einträge außerhalb ihrer Liste Regel listitem
Ein li gehört direkt in ul oder ol. Ein Wrapper dazwischen zerstört die Zählung „1 von 4“.
Kritisch Der Pfeil ist der Link Regel link-name
Die Pfeile sind verlinkt, die Namen sind Text. Der Name wird zum Link, der Pfeil zur Dekoration.
Zum Mitnehmen
Die Brotkrümel, korrigiert
Ein nav, eine Liste, vier Links. Der Pfeil kommt aus CSS.
Korrektur in 2 Schritten ansehen
Den Pfad als Liste in einem nav auszeichnen
nav benennt den Bereich, ol zählt die Stufen. Die aktuelle Seite bekommt aria-current.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="pfad"> Startseite <a href="/produkte">›</a> Produkte <a href="/produkte/fraesen">›</a> Fräsen </div>Nachher
<nav aria-label="Sie sind hier"> <ol class="pfad"> <li><a href="/">Startseite</a></li> <li><a href="/produkte">Produkte</a></li> <li><a href="/produkte/fraesen" aria-current="page">Fräsen</a></li> </ol> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Sie sind hier, Navigation, Liste mit 3 Einträgen“.
Den Pfeil aus CSS zeichnen
Ein Trennzeichen aus CSS wird nicht vorgelesen und ist kein Link.
KorrekturvergleichSchritt 2 · CSS Vorher
.pfad a { text-decoration: none; }Nachher
.pfad li + li::before { content: '›'; margin-inline: 0.5rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Markieren Sie den Pfad mit der Maus. Die Pfeile lassen sich nicht mehr als Text kopieren.