Infinite Scrolling barrierefrei umsetzen – geht das überhaupt?

Endloses Scrollen, oder auch Infinite Scrolling, ist aus dem Web kaum noch wegzudenken. Neue Inhalte laden automatisch nach, Listen werden länger, Seitenwechsel entfallen. Ob im Social-Media-Feed, im Onlineshop oder auf einem Nachrichtenportal: Man scrollt einfach weiter. Das fühlt sich schnell, flüssig und bequem an.

Aus UX-Sicht spricht zunächst einiges dafür. Das Verhalten vermeidet Unterbrechungen und macht es leicht, immer neue Inhalte zu entdecken. So leicht, dass man oft länger hängen bleibt als geplant – ein Effekt, den vor allem soziale Netzwerke aber auch viele Onlineshops gezielt nutzen.

Aber ist Infinite Scroll deshalb wirklich die bessere Lösung? Und gilt das für alle Menschen – auch für diejenigen, die eine Tastatur, einen Screenreader oder andere Hilfsmittel verwenden? Welche Vorteile bietet das Muster gegenüber der klassischen Pagination? Und worauf kommt es an, damit es barrierefrei funktioniert?

Was ist Infinite Scrolling eigentlich?

Beim Infinite Scrolling werden neue Inhalte automatisch geladen, sobald man sich dem Ende einer Liste oder eines Feeds nähert. Ein Klick auf „Weiter“ oder „Nächste Seite“ entfällt. Stattdessen wächst die Seite mit jedem Nachladen ein Stück weiter: Listen werden länger, Feeds füllen sich scheinbar endlos.

Technisch ist das weniger spektakulär, als es wirkt. Neue Inhalte werden per JavaScript nachgeladen, meist sobald ein bestimmter Scrollpunkt erreicht ist. Im Grunde wird einfach weiterer Content an die bestehende Liste angehängt. Für Nutzer wirkt das nahtlos, obwohl sich die Seite im Hintergrund kontinuierlich verändert. Das bringt Vor- und Nachteile mit sich, die wir uns einmal in Ruhe anschauen wollen.

Infinite Scrolling vs. Pagination: Zwei Muster, zwei Welten

Das Gegenmodell zum Infinite Scrolling ist die klassische Pagination oder auf Denglisch auch Paginierung genannt. Inhalte werden in klar abgegrenzte Seiten aufgeteilt. Statt automatisch nachzuladen, gibt es eine bewusste Entscheidungsmöglichkeit über Buttons mit „Seite 2“, „Weiter“ oder „Zurück“.

Klar, das wirkt im Vergleich erst einmal umständlicher, es braucht einen zusätzlichen Klick. Pagination schafft aber Struktur. Jede Seite ist ein klar definierter Abschnitt. Es gibt eine feste Reihenfolge, eine nachvollziehbare Position und die Möglichkeit, gezielt zu navigieren. „Ich bin auf Seite 3“ ist eine brauchbare Information – bei Infinite Scrolling existiert dieses Konzept schlicht nicht.

Endloses Scrollen und die Barrierefreiheit

Für den stolperfreien Blog ist vor allem eine Frage entscheidend: Welche Barrieren entstehen durch Infinite Scrolling?

Ein zentrales Problem ist die fehlende Orientierung. Bei einer Pagination ist die Position klar: Seite 2 von 10, mit einem festen Anfang und Ende. Beim Infinite Scrolling fehlen solche Bezugspunkte meist. Wer einen bestimmten Inhalt später wiederfinden möchte, hat weder eine Seitenzahl noch eine andere verlässliche Referenz. Auch beim Zurückkehren auf die Seite ist nicht immer sichergestellt, dass man wieder an derselben Stelle landet.

Für Menschen, die einen Screenreader nutzen, kommen weitere Hürden hinzu. Neue Inhalte werden zwar in den DOM eingefügt, aber nicht automatisch angekündigt. Wer die Seite nicht visuell verfolgt, erfährt unter Umständen gar nicht, dass weitere Einträge hinzugekommen sind. Auch Angaben zur Länge einer Liste oder zur aktuellen Position können widersprüchlich werden, wenn sie nicht korrekt aktualisiert werden. Je länger die Liste wird, desto mühsamer wird außerdem die Navigation über Überschriften oder einzelne Listenelemente.

Oft bleibt auch unklar, was gerade passiert: Lädt die Seite noch? Ist das Ende erreicht? Gibt es weitere Inhalte? Ein visueller Ladeindikator beantwortet diese Fragen nur für Menschen, die ihn sehen können. Wird der Ladezustand nicht zusätzlich programmatisch vermittelt, fehlt er für Screenreader.

Schließlich gibt es kein verlässliches Seitenende. Werden kurz vor dem Seitenende immer wieder neue Inhalte geladen, rutscht dieses ständig weiter nach unten. Wichtige Links zum Impressum, zur Datenschutzerklärung oder zum Kontakt können dadurch praktisch unerreichbar werden. Das ist mehr als nur ein kleines Ärgernis bei der Bedienung.

Infinite Scrolling barriereärmer umsetzen

Die unbequeme Wahrheit zuerst: es gibt keine einfache Lösung. Infinite Scrolling lässt sich technisch verbessern, aber viele der grundlegenden Probleme verschwinden nicht komplett. Man kann sie nur abmildern.

Ein guter erster Schritt ist, das automatische Nachladen zu hinterfragen. Statt Inhalte ungefragt anzuhängen, funktioniert ein „Mehr laden“-Button oft deutlich besser. Er schafft einen klaren Interaktionspunkt, ist per Tastatur erreichbar und macht deutlich, dass jetzt etwas passiert. Gleichzeitig bleibt die Kontrolle beim Nutzer. Es funktioniert dann also ein wenig wie eine Paginierung aber ohne, dass die Daten unbedingt ein festes Ende haben müssen.

Wenn Inhalte dynamisch nachgeladen werden, braucht es außerdem eine Rückmeldung. Neue Inhalte erscheinen sonst einfach im Hintergrund. Für Screenreader-Nutzer bleibt das unsichtbar. Hier kommen ARIA Live-Regions ins Spiel.

<div aria-live="polite" id="feed-status"></div>

Beim Nachladen kann dort eine kurze Information ergänzt werden:

status.textContent = "10 neue Einträge geladen";

Das sorgt zumindest dafür, dass Änderungen angekündigt werden, ohne den aktuellen Fokus zu stören.

Und was passiert mit dem Fokus? Nun, der bleibt meistens einfach dort wo er ist. Hat der Nutzer das Nachladen selbst ausgelöst, kann er auch zum ersten nachgeladenen Element verschoben werden.

Das ARIA Feed Pattern im Detail

ARIA Patterns sind vordefinierte Muster und Beispiele aus den WAI-ARIA Authoring Practices, die beschreiben, wie komplexe Komponenten semantisch und für Assistive Technologien verständlich umgesetzt werden.

Für unseren Anwendungsfall gibt es mit dem Feed Pattern einen praktikablen Ansatz. Inhalte werden dabei als eine Art dynamische Liste strukturiert, die speziell für kontinuierlich nachgeladene Inhalte gedacht ist.

Typischerweise sieht das so aus:

<div role="feed">
  <article>
    <h2>Beitrag 1</h2>
    <p>Inhalt …</p>
  </article>
  <article>
    <h2>Beitrag 2</h2>
    <p>Inhalt …</p>
  </article>
</div>

Ergänzt wird das Ganze durch Attribute wie aria-setsize, aria-posinset oder aria-busy, um den aktuellen Zustand besser zu beschreiben. Mit geeignetem JavaScript können einige angenehme Tastatur-Shortcuts umgesetzt werden.

In der Theorie klingt das sauber. In der Praxis ist es aufwendig. Die Logik muss sauber implementiert werden, Zustände müssen korrekt gepflegt werden, und nicht alle Screenreader interpretieren das Pattern gleich zuverlässig. Das Feed Pattern kann helfen – es macht Infinite Scrolling aber nicht automatisch barrierefrei. Es ist eher ein Werkzeug, um die größten Probleme etwas besser in den Griff zu bekommen.

Infinite Scrolling – möglich, aber selten die bessere Wahl

Infinite Scrolling wirkt modern, flüssig und bequem. Für bestimmte Anwendungsfälle kann das auch funktionieren. Vor allem dort, wo Inhalte eher beiläufig konsumiert werden.

Sobald Orientierung, gezielte Navigation oder Wiederauffindbarkeit eine Rolle spielen, kippt das Bild schnell. Genau die Eigenschaften, die Infinite Scrolling so angenehm machen, stehen der Barrierefreiheit oft im Weg.

Technisch lässt sich vieles verbessern. Mit sinnvoll eingesetzten ARIA-Attributen können die größten Hürden reduziert werden. Das ARIA Feed Pattern liefert dafür einen Rahmen – nimmt einem die eigentliche Arbeit aber nicht ab. Am Ende muss man aber abwägen. Infinite Scrolling ist kein grundsätzlich falsches Pattern. Aber eines, das bewusst eingesetzt werden sollte und selten die einfachste oder robusteste Lösung ist.