html-einfach.de

Barrierefreie Komponenten · Navigation & Bedienelemente

Pagination & „Mehr laden“

Von Zuletzt geändert am

Lange Trefferlisten müssen aufgeteilt werden – per klassischer Seitennavigation, „Mehr laden“-Button oder endlosem Nachladen. Alle drei lassen sich zugänglich bauen, und einer hat eine echte Schattenseite.

Klassische Pagination

Eine Seitennavigation ist eine Navigation mit einer geordneten Liste von Links. Die aktuelle Seite trägt aria-current="page":

<nav aria-label="Seitennavigation">
  <ul>
    <li><a href="?seite=1">Zurück</a></li>
    <li><a href="?seite=1">1</a></li>
    <li><a href="?seite=2" aria-current="page">2</a></li>
    <li><a href="?seite=3">3</a></li>
    <li><a href="?seite=3">Weiter</a></li>
  </ul>
</nav>
  • Echte Links mit href, keine Klick-<div>s – so funktioniert auch „in neuem Tab öffnen“.
  • aria-label an der <nav>, falls es mehrere Navigationen gibt.
  • „Zurück“/„Weiter“ brauchen einen aussagekräftigen Namen (nicht nur „‹“/„›”; ein verstecktes Label hilft).

„Mehr laden“-Button

Ein Button, der weitere Einträge anhängt, ist gut bedienbar – wenn der Fokus stimmt. Nach dem Laden weiß ein Screenreader sonst nicht, dass etwas dazukam.

  • Neue Einträge anhängen und die Anzahl per Live-Region ansagen („10 weitere geladen, 30 von 120“).
  • Den Fokus sinnvoll setzen – etwa auf den ersten neuen Eintrag –, damit man dort weiterliest, wo es weitergeht.
  • Den Button am Ende der Liste belassen, damit die Reihenfolge logisch bleibt.

Infinite Scroll – mit Vorsicht

Automatisches Nachladen beim Scrollen wirkt modern, hat aber handfeste Barriereprobleme:

  • Der Footer wird unerreichbar, weil ständig Neues nachrückt – inklusive wichtiger Links dort.
  • Tastatur und Screenreader kommen mit ständig wachsenden Listen schlecht klar.
  • Die Position geht verloren: Zurück-Button und Wiederfinden eines Eintrags werden zur Geduldsprobe.

Randnotiz – „Mehr laden“ schlägt Infinite Scroll. Wenn du die Wahl hast, ist ein Button die zugänglichere Variante: Sie ist bewusst ausgelöst, hält den Footer erreichbar und lässt sich sauber per Tastatur bedienen. Echtes Infinite Scroll würde ich nur dort einsetzen, wo es inhaltlich wirklich passt – und dann mit einer „Mehr laden“-Alternative absichern.

Häufige Fehler

  • Klick-<div>s statt echter Links in der Pagination.
  • Aktuelle Seite nur farblich markiert, ohne aria-current="page".
  • „Mehr laden“ ohne Ansage der neuen Einträge.
  • Fokus bleibt am Button statt zum neuen Inhalt zu führen.
  • Infinite Scroll ohne Alternative, das den Footer verschluckt.

Häufige Fragen

Pagination oder „Mehr laden“?

Pagination ist top, wenn man gezielt springen und URLs teilen können soll (gut auch fürs SEO). „Mehr laden“ passt für fortlaufendes Stöbern. Beide sind zugänglich.

Wohin gehört der Fokus nach „Mehr laden“?

Auf den ersten neu geladenen Eintrag oder eine kurze Statusmeldung. Hauptsache, der Sprung wird angekündigt und führt weiter, statt am Button zu verharren.

Ist Infinite Scroll grundsätzlich unzulässig?

Nein, aber riskant. Mit „Mehr laden“-Fallback, erreichbarem Footer und sauberer Tastaturbedienung lässt es sich vertreten – einfacher ist der Button.

Fazit

Pagination baust du als <nav> mit echten Links und aria-current="page". „Mehr laden“ braucht vor allem Fokus-Management und eine Ansage der neuen Einträge. Infinite Scroll ist der heikelste Weg – wenn überhaupt, dann mit Button-Alternative und erreichbarem Footer. Im Zweifel: der bewusst ausgelöste Button.