Barrierefreie Breadcrumbs und Pagination

1. Warum Breadcrumbs und Pagination oft halbherzig ausgezeichnet sind

Sowohl Breadcrumbs als auch Pagination-Kontrollen sind visuell einfach umzusetzen, ein paar Links mit Trennzeichen oder eine Reihe von Zahlen-Buttons, weshalb sie in der Praxis häufig mit generischen div- und span-Elementen statt mit den dafür vorgesehenen semantischen HTML-Elementen gebaut werden. Für sehende Nutzer funktioniert eine solche rein visuelle Umsetzung meist einwandfrei, für Screenreader-Nutzer fehlt jedoch jede strukturelle Information darüber, dass es sich überhaupt um eine Navigationskomponente handelt.

Das Problem verschärft sich dadurch, dass beide Komponenten für die Orientierung innerhalb eines großen Magento-Katalogs mit tiefer Kategorie-Hierarchie und langen Produktlisten besonders wichtig sind. Gerade Screenreader-Nutzer, die eine Seite seriell statt auf einen Blick erfassen, profitieren überdurchschnittlich stark von einer klar ausgezeichneten Position in der Hierarchie und einer eindeutigen Ankündigung der aktuellen Seitenzahl.

2. nav mit aria-label Breadcrumb: die korrekte Grundstruktur

Eine Breadcrumb-Leiste gehört semantisch in ein eigenes nav-Element, da sie eine eigenständige Navigationsmöglichkeit innerhalb der Seite darstellt, unabhängig von der Hauptnavigation. Da eine Seite häufig mehrere nav-Elemente enthält, etwa Hauptnavigation, Breadcrumb und Fußzeilen-Navigation, ist ein eindeutiges aria-label wie Breadcrumb zwingend erforderlich, damit Screenreader-Nutzer beim Wechseln zwischen Landmarken die einzelnen Navigationsbereiche voneinander unterscheiden können.

Ohne dieses aria-label kündigen die meisten Screenreader jedes nav-Element lediglich als Navigation an, ohne erkennbaren Unterschied zwischen Hauptmenü und Breadcrumb, was die Landmarken-Navigation, eine der wichtigsten Orientierungshilfen erfahrener Screenreader-Nutzer, faktisch nutzlos macht.

3. aria-current page richtig einsetzen

Das letzte Element einer Breadcrumb-Leiste repräsentiert typischerweise die aktuell angezeigte Seite und sollte deshalb kein anklickbarer Link mehr sein, sondern reiner Text mit dem Attribut aria-current gleich page. Dieses Attribut teilt unterstützender Technologie mit, dass es sich um die aktuelle Position innerhalb einer Reihe zusammengehöriger Elemente handelt, und wird von den meisten Screenreadern zusätzlich zum Textinhalt akustisch als aktuell angekündigt.

Ein häufiger Fehler besteht darin, das letzte Breadcrumb-Element weiterhin als Link auf die eigene, aktuell angezeigte Seite zu setzen, was funktional redundant ist und ohne aria-current zusätzlich die Information verschenkt, dass es sich um die aktuelle Position handelt. Korrekt ist ein reines span- oder Text-Element für das letzte Segment, alle vorherigen Segmente bleiben normale, anklickbare Links zu den übergeordneten Kategorien.

4. Semantisch korrekte Listen-Struktur für Breadcrumbs

Innerhalb des nav-Elements sollten die einzelnen Breadcrumb-Segmente als geordnete Liste mit ol und li ausgezeichnet werden, nicht als lose Aneinanderreihung von Links mit Trennzeichen dazwischen. Eine Liste vermittelt Screenreader-Nutzern zusätzlich die Gesamtanzahl der Elemente sowie die Position des aktuell fokussierten Elements innerhalb der Liste, etwa Element 3 von 4, was bei einer reinen Link-Aneinanderreihung ohne Listenstruktur vollständig fehlt.

Visuelle Trennzeichen wie Schrägstriche oder Pfeile zwischen den Breadcrumb-Elementen sollten dabei ausschließlich über CSS-Pseudoelemente eingefügt werden, niemals als echter Textinhalt im DOM, da ein Screenreader sonst bei jedem Element zusätzlich das Trennzeichen selbst vorliest und die eigentliche Navigation akustisch unnötig aufbläht.

Ergänzend empfiehlt sich bei sehr tiefen Kategorie-Hierarchien, die Breadcrumb-Liste nicht beliebig lang wachsen zu lassen, sondern ab einer bestimmten Tiefe die mittleren Elemente hinter einem ausklappbaren Element zusammenzufassen, damit weder die visuelle Darstellung noch die für Screenreader-Nutzer vorgelesene Elementanzahl unübersichtlich wird. Wichtig bleibt dabei, dass auch das ausklappbare Element selbst als li innerhalb derselben ol-Struktur verbleibt, damit die Gesamtzählung der Liste weiterhin korrekt ist.

5. Barrierefreie Pagination-Kontrollen: die Grundstruktur

Ähnlich wie Breadcrumbs gehört auch eine Pagination-Komponente in ein eigenes nav-Element mit einem eindeutigen aria-label wie Seitennavigation, da sie eine eigenständige, wiederkehrende Navigationsmöglichkeit innerhalb der Seite darstellt. Die einzelnen Seitenzahlen sollten ebenfalls als Liste ausgezeichnet werden, wobei die aktuell angezeigte Seite dasselbe aria-current page Muster wie beim letzten Breadcrumb-Element erhält, kombiniert mit einer klaren visuellen Hervorhebung.

Jeder Link innerhalb der Pagination sollte zusätzlich ein eigenes, präzises aria-label tragen, das über die reine Zahl hinausgeht, etwa Zur Seite 4 statt lediglich 4, da eine isolierte Zahl ohne Kontext für Screenreader-Nutzer, die sich durch die Liste der Links bewegen, wenig aussagekräftig ist.

Bei einer großen Trefferanzahl mit vielen Seiten empfiehlt sich zusätzlich eine gekürzte Darstellung mit Auslassungspunkten zwischen den ersten, den letzten und den Seiten um die aktuelle Position herum, wobei die Auslassungspunkte selbst kein eigenes, fokussierbares Listenelement sein sollten, sondern rein dekorativer, per aria-hidden ausgeblendeter Text bleiben, damit die Tastatur- und Screenreader-Navigation nicht unnötig durch bedeutungslose Zwischenstopps verlängert wird.

6. Vorherige- und Nächste-Buttons: aria-label statt reiner Pfeil-Icons

Die Buttons für die vorherige und die nächste Seite bestehen häufig ausschließlich aus einem Pfeil-Icon, was ohne zusätzliche Textalternative genau dasselbe Problem erzeugt wie bei anderen Icon-only-Buttons: ein Screenreader kündigt lediglich Schaltfläche an, ohne Information über die Richtung. Ein eindeutiges aria-label wie Zur vorherigen Seite beziehungsweise Zur nächsten Seite behebt dieses Problem zuverlässig.

Zusätzlich sollte ein deaktivierter Vorherige-Button auf der ersten Seite oder ein deaktivierter Nächste-Button auf der letzten Seite über das disabled-Attribut oder aria-disabled true als nicht verfügbar markiert werden, statt den Button funktionslos, aber optisch weiterhin aktiv wirkend im DOM zu belassen, da ein scheinbar aktiver, aber wirkungsloser Button für Screenreader-Nutzer zu wiederholten, erfolglosen Aktivierungsversuchen führt.

7. Seitenzahl-Ankündigung für Screenreader

Bei einer Pagination, die per JavaScript ohne vollständigen Seitenneuladen aktualisiert wird, etwa in einer Kategorieseite mit clientseitig nachgeladenen Produktlisten, sollte der Seitenwechsel zusätzlich über eine aria-live-Region angekündigt werden, da ein reiner visueller Wechsel der aktiven Seitenzahl von Screenreader-Nutzern sonst unbemerkt bleibt. Eine höfliche aria-live-Region mit dem Text Seite 3 von 12 angezeigt reicht dafür bereits aus.

Wichtig ist, diese Ankündigung als separates, dauerhaft im DOM vorhandenes Element mit aria-live polite umzusetzen und ausschließlich den Textinhalt bei jedem Seitenwechsel zu aktualisieren, statt das gesamte Element neu einzufügen, da viele Screenreader eine neu eingefügte aria-live-Region nicht zuverlässig erkennen, während eine Textänderung innerhalb eines bestehenden Elements zuverlässig funktioniert.

8. Praxisbeispiel: die Breadcrumb-Komponente in Hyvä

In einem Hyvä-Theme lässt sich die Breadcrumb-Komponente als eigenständiges phtml-Template mit vollständiger nav-, ol- und aria-current-Struktur umsetzen, ohne dafür JavaScript zu benötigen, da Breadcrumbs in aller Regel serverseitig aus der Kategorie- und Produkthierarchie gerendert werden. Die Trennzeichen zwischen den Elementen werden dabei ausschließlich über eine CSS-Klasse mit content Slash als Pseudoelement erzeugt.

Der folgende Ausschnitt zeigt die vollständige, semantisch korrekte Struktur für eine dreistufige Breadcrumb-Leiste von Startseite über eine Kategorie bis zum aktuell angezeigten Produkt.

<nav aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-2 text-sm">
    <li>
      <a href="/" class="hover:underline">Startseite</a>
    </li>
    <li class="before:content-['/'] before:mx-2 before:text-gray-400">
      <a href="/sicherheitsschuhe" class="hover:underline">Sicherheitsschuhe</a>
    </li>
    <li class="before:content-['/'] before:mx-2 before:text-gray-400">
      <span aria-current="page" class="text-gray-600">
        Sicherheitsschuh S3, Größe 43
      </span>
    </li>
  </ol>
</nav>

9. Praxisbeispiel: die Pagination-Komponente in Hyvä

Für eine Pagination in einer Hyvä-Kategorieseite kombiniert die barrierefreie Umsetzung nav mit aria-label, eine ol-Liste für die Seitenzahlen, aria-current page für die aktive Seite sowie präzise beschriftete Vorherige- und Nächste-Buttons mit korrekt gesetztem disabled-Zustand an den Rändern der Seitenreihe.

Wird die Pagination zusätzlich clientseitig per Alpine.js aktualisiert, ergänzt eine versteckte aria-live-Region die Ankündigung des Seitenwechsels, wie im folgenden vollständigen Ausschnitt gezeigt. Die abschließende Tabelle vergleicht die wichtigsten Attribute für Breadcrumbs und Pagination im Überblick.

<nav aria-label="Seitennavigation" x-data="{ page: 3, total: 12 }">
  <div class="sr-only" role="status" aria-live="polite" x-text="'Seite ' + page + ' von ' + total + ' angezeigt'"></div>

  <ol class="flex items-center gap-1">
    <li>
      <button
        type="button"
        aria-label="Zur vorherigen Seite"
        :disabled="page === 1"
        :aria-disabled="page === 1"
        class="px-3 py-2 disabled:opacity-40"
      >
        <svg class="w-4 h-4" aria-hidden="true"><!-- Pfeil links --></svg>
      </button>
    </li>
    <li>
      <a href="?p=3" aria-current="page" aria-label="Zur Seite 3" class="px-3 py-2 font-bold">3</a>
    </li>
    <li>
      <a href="?p=4" aria-label="Zur Seite 4" class="px-3 py-2">4</a>
    </li>
    <li>
      <button
        type="button"
        aria-label="Zur nächsten Seite"
        :disabled="page === total"
        :aria-disabled="page === total"
        class="px-3 py-2 disabled:opacity-40"
      >
        <svg class="w-4 h-4" aria-hidden="true"><!-- Pfeil rechts --></svg>
      </button>
    </li>
  </ol>
</nav>

10. Zusammenfassung

11. FAQ: Barrierefreie Breadcrumbs und Pagination: Das Wichtigste auf einen Blick