Barrierefreie Brotkrumennavigation

Eine Brotkrumennavigation zeigt, wo eine Seite im Shop liegt: Startseite › Damen › Schuhe › Stiefeletten. Sie ist einfach, wird aber oft als reiner Text mit Trennzeichen gebaut, die Screenreader mitlesen. Diese Seite zeigt das APG-Muster. Sie gehört zur Reihe barrierefreie UI-Muster.

Wann Sie eine Brotkrumennavigation einsetzen

Das APG definiert einen Breadcrumb-Pfad als „eine Liste von Links zu den übergeordneten Seiten der aktuellen Seite in hierarchischer Reihenfolge“. Setzen Sie Breadcrumbs auf Websites mit mehreren Ebenen ein – Kategorien, Unterkategorien, Produktseiten, Hilfeartikel. Sie stehen meist vor dem Hauptinhalt. Auf einer flachen Website mit zwei Ebenen bringen sie wenig.

Relevante WCAG-Kriterien

Die WCAG verlangen keine Brotkrumennavigation, aber wenn Sie eine haben, gelten diese Kriterien:

• 1.3.1 Info und Beziehungen (A): Der Pfad ist eine Liste in einem Navigations-Landmark, kein loser Text.
• 2.4.5 Verschiedene Methoden (AA): Breadcrumbs können einer der Wege sein, Seiten zu finden, zusammen mit Menüs, Suche und Sitemap.
• 2.4.4 Linkzweck (im Kontext) (A): Die Linktexte sind die Seitennamen.
• 4.1.2 Name, Rolle, Wert (A) und 1.4.1 Benutzung von Farbe (A): Die aktuelle Seite ist im Code gekennzeichnet und nicht nur durch Farbe.
• 3.2.3 Konsistente Navigation (AA): Der Pfad steht auf jeder Seite an derselben Stelle.
• 2.5.8 Zielgröße (Minimum) (AA): Kurze Breadcrumb-Links brauchen auf Mobilgeräten genug Größe oder Abstand.
• 1.4.10 Umfluss (Reflow) (AA): Lange Pfade brechen auf schmalen Bildschirmen um.

Codebeispiel

<nav aria-label="Brotkrumennavigation" class="breadcrumb">
  <ol>
    <li><a href="/de/">Startseite</a></li>
    <li><a href="/de/damen">Damen</a></li>
    <li><a href="/de/damen/schuhe">Schuhe</a></li>
    <li><a href="/de/damen/schuhe/stiefeletten" aria-current="page">Stiefeletten</a></li>
  </ol>
</nav>

<style>
  .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
  .breadcrumb li + li::before {
    content: "";
    display: inline-block;
    margin: 0 .5em;
    width: .4em; height: .4em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);   /* a chevron drawn with borders: nothing to read aloud */
  }
  .breadcrumb [aria-current="page"] { font-weight: 600; text-decoration: none; }
</style>

Was das APG festlegt:

• Der Pfad „liegt in einem Navigations-Landmark-Bereich“, beschriftet mit aria-label oder aria-labelledby.
• „Der Link zur aktuellen Seite hat aria-current mit dem Wert page.“ Ist die aktuelle Seite kein Link, sondern einfacher Text, ist aria-current optional.
• Das APG-Beispiel strukturiert die Links als geordnete Liste, die Screenreader-Nutzern sagt, wie viele Ebenen es gibt, und fügt die Trennzeichen per CSS hinzu – ein schräg gestellter Rahmen –, damit sie „nicht im Accessibility-Tree erscheinen“.

Mit nav erhalten Nutzer einen Landmark, zu dem sie springen können; die Beschriftung „Brotkrumennavigation“ trennt ihn von der Hauptnavigation und der Navigation im Footer.

Tastaturbedienung

Das APG führt die Tastaturbedienung für Breadcrumbs als „nicht zutreffend“ auf: Es sind gewöhnliche Links.

Typische Fehler in Online-Shops

• Trennzeichen im HTML („/“, „»“, „>“), die Screenreader zwischen jedem Link mitlesen.
• Ein div voller Links ohne nav und ohne Liste oder ein nav ohne Beschriftung neben zwei weiteren unbeschrifteten nav-Elementen.
• Die aktuelle Seite nur durch graue Farbe gekennzeichnet, ohne aria-current oder einen anderen optischen Unterschied.
• Breadcrumbs, die auf manchen Seiten den Browsing-Pfad („Zurück zu den Suchergebnissen“) und auf anderen den Kategoriebaum zeigen, was die Konsistenz zerstört.
• Gekürzte Pfade auf Mobilgeräten, die die übergeordneten Kategorien verbergen, ohne dass man sie einblenden kann.
• Winzige Links, die auf Mobilgeräten dicht aneinander stehen.
• Strukturierte Daten für Breadcrumbs, die nicht zum sichtbaren Pfad passen – für sich genommen kein Barrierefreiheitsproblem, aber ein Zeichen, dass beides getrennt gebaut wurde.

Was automatische Prüfungen finden und was manuell zu testen ist

Alle sind Karten in unserer Regelbibliothek. Manuelle Tests: Prüfen Sie mit einem Screenreader, dass der Pfad als Navigation namens „Brotkrumennavigation“ mit einer Liste der richtigen Anzahl von Einträgen angesagt wird, dass Trennzeichen stumm sind und dass die aktuelle Seite gekennzeichnet ist; prüfen Sie, dass der Pfad bei 320 CSS-Pixeln umbricht und auf jeder Seite gleich ist.

Starten Sie die kostenlose Prüfung einer Seite auf einer Kategorieseite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Verlangen die WCAG eine Brotkrumennavigation?

Nein. Eine Brotkrumennavigation ist ein Weg, Nutzern bei der Orientierung zu helfen. Das Kriterium 2.4.5 Verschiedene Methoden verlangt mehr als einen Weg, eine Seite innerhalb einer Gruppe von Seiten zu finden; Breadcrumbs können das zusammen mit Navigation und Suche unterstützen, sind aber nicht vorgeschrieben.

Wie zeichne ich eine barrierefreie Brotkrumennavigation aus?

Ein nav-Element mit der Beschriftung „Brotkrumennavigation“ per aria-label, eine geordnete Liste mit Links zu den übergeordneten Seiten und aria-current="page" am Link zur aktuellen Seite. Das ist das APG-Muster für Breadcrumbs.

Sollte die aktuelle Seite in der Brotkrumennavigation ein Link sein?

Beides ist in Ordnung. Ist sie ein Link, braucht sie aria-current="page". Ist sie einfacher Text, sagt das APG, dass aria-current optional ist.

Wie füge ich Trennzeichen hinzu?

Mit CSS, zum Beispiel über einen Rahmen oder ein Pseudoelement, damit Screenreader zwischen den Links nicht „Schrägstrich“ oder „größer als“ vorlesen. Steht das Trennzeichen im HTML, verbergen Sie es mit aria-hidden="true".

Kann eine automatische Prüfung Breadcrumbs testen?

Sie findet Links ohne Namen, eine kaputte Listenstruktur, ungültige aria-current-Werte und Navigations-Landmarks ohne eindeutige Namen. Ob der Pfad zur Struktur der Website passt, muss ein Mensch beurteilen.

Quellen

• W3C WAI, APG Breadcrumb pattern: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
• W3C WAI, APG Breadcrumb example: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/