NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Lesereihenfolge und Digitale Barrierefreiheit

Was ist die Lesereihenfolge?

Die Lesereihenfolge ist die Reihenfolge, in der Screenreader und andere Hilfsmittel die Inhalte einer Seite ausgeben. Sie folgt dem Quelltext, nicht dem Layout auf dem Bildschirm. Steht im HTML etwas an einer anderen Stelle, als es optisch erscheint, hören blinde Nutzer eine andere Geschichte, als sehende Nutzer lesen.

Die WCAG 2.2 regeln das im Kriterium 1.3.2 Bedeutungstragende Reihenfolge auf Stufe A. Wo die Reihenfolge den Sinn beeinflusst, muss sie sich programmatisch ermitteln lassen.

Das betrifft Websites genauso wie PDFs, digitale Bücher und Apps. Überall dort, wo Inhalte linear vorgelesen werden, entscheidet die Lesereihenfolge über das Verständnis.

Inhalt

Quelltext und Layout in Einklang bringen: NCA unterstützt

Probleme mit der Lesereihenfolge entstehen fast immer im CSS, nicht im Inhalt. Ein Grid, das Karten umsortiert, ein order für die mobile Ansicht, ein Dialog, der am Ende des Body hängt. Genau diese Stellen suchen wir bei NCA gezielt, weil wir selbst täglich mit Grid und Flexbox in Astro, React und Vue arbeiten.

Wir lesen eure wichtigsten Seiten linear mit dem Screenreader und vergleichen das Ergebnis mit dem sichtbaren Layout. Wo beides auseinanderläuft, ordnen wir den Quelltext neu, statt das Layout mit CSS zu verbiegen. Das gehört zu unserem Accessibility Audit und hängt eng mit semantischem HTML und einem sauberen Responsive Design zusammen. Für Downloads prüfen wir die Tag Struktur von barrierefreien PDFs. Umgesetzt wird das im Rahmen unserer Arbeit im barrierefreien Webdesign, abgesichert durch automatisiertes Accessibility Testing.

Lass uns sprechen
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Starten Sie Ihre Anfrage
Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Lesereihenfolge, Fokusreihenfolge, visuelle Reihenfolge

Drei Reihenfolgen werden oft verwechselt. Für die Barrierefreiheit müssen alle drei zueinander passen:

  • Visuelle Reihenfolge: So sieht die Seite aus. Sehende Menschen lesen in westlichen Sprachen von links oben nach rechts unten.
  • Lesereihenfolge: So steht der Inhalt im DOM. Screenreader, Vorlesefunktionen, Reader Modi und Suchmaschinen gehen ihn von oben nach unten durch.
  • Fokusreihenfolge: So springt der Fokus mit der Tab Taste durch Links, Buttons und Formularfelder. Sie folgt ebenfalls dem DOM, solange niemand mit tabindex eingreift.

Die Fokusreihenfolge regelt das Kriterium 2.4.3, mehr dazu auf der Seite zur logischen Reihenfolge. Hier geht es um die Lesereihenfolge, also um alles, was nicht nur angeklickt, sondern verstanden werden muss: Text, Überschriften, Preise, Hinweise und deren Zusammenhang.

Wenn CSS die Reihenfolge verdreht

Modernes CSS kann Elemente frei auf dem Bildschirm verteilen, ohne den Quelltext anzufassen. Genau das macht es für die Lesereihenfolge gefährlich. Typische Auslöser:

  • order in Flexbox und Grid: Ein Teaser rutscht auf dem Desktop nach links, steht im HTML aber ganz am Ende.
  • flex-direction: row-reverse und column-reverse: Die Darstellung wird gespiegelt, die Lesereihenfolge nicht.
  • Grid Platzierung: Mit grid-area oder grid-row lassen sich Bereiche beliebig anordnen. grid-auto-flow: dense füllt Lücken mit später folgenden Elementen auf.
  • Absolute Positionierung: Ein Preis oder Badge wird optisch an die Produktkarte geheftet, steht im Code aber weit entfernt.
  • Mehrspaltiger Text: Mit columns wirkt Text wie Zeitungsspalten, im DOM bleibt er ein Fluss. Das ist unkritisch. Problematisch wird es, wenn einzelne Kästen per CSS in andere Spalten geschoben werden.

Seit 2025 gibt es mit der CSS Eigenschaft reading-flow einen Ansatz, Lese und Fokusreihenfolge an die visuelle Anordnung in Grid und Flexbox zu koppeln. Sie ist noch nicht in allen Browsern verfügbar. Die sichere Lösung bleibt ein Quelltext in der richtigen Reihenfolge.

Vom stimmigen Quelltext bis zum geprüften Export

Eine stimmige Lesereihenfolge entsteht auf mehreren Ebenen. Die Grundlage ist der Quelltext, die Kür sind Komponenten und Dokumente, die außerhalb des normalen Seitenflusses landen.

Lesereihenfolge auf vier Ebenen

Ebene Was stimmen muss So prüft ihr es
1 Quelltext Überschrift, Text, Bild und Aktion stehen im HTML in der Reihenfolge, in der sie gelesen werden sollen CSS abschalten, Seite von oben lesen
2 Layout Grid, Flexbox und Positionierung sortieren nichts um, was den Sinn verändert Screenreader linear lesen lassen
3 Komponenten Dialoge, Tooltips und Aufklappbereiche stehen im DOM direkt hinter ihrem Auslöser oder werden korrekt angekündigt NVDA oder VoiceOver, Accessibility Tree
4 Dokumente und Tests PDFs haben eine korrekte Tag Reihenfolge, Webseiten eine automatisierte Prüfung der Anordnung PAC für PDFs, Cypress für Webseiten

Grid und Flexbox ohne Bruch in der Reihenfolge

Nicht mit order umsortieren. Hier wird der Hinweiskasten auf dem Desktop optisch nach oben geholt. Screenreader lesen ihn trotzdem erst ganz am Ende, nach allen Produkten.

Code: 
          
/* Problematisch: Optik und Lesereihenfolge laufen auseinander */
.shop {
  display: flex;
  flex-direction: column;
}
.shop .notice {
  order: -1; /* steht im HTML am Ende, erscheint oben */
}

Quelltext zuerst richtig ordnen, dann platzieren. Mit grid-template-areas beschreibt ihr das Layout, ohne die Reihenfolge der Inhalte zu verändern. Der Hinweis steht im HTML dort, wo er gelesen werden soll.

Code: 
          
<div class="shop">
  <p class="notice">Versandkostenfrei ab 50 Euro</p>
  <aside class="filter">…</aside>
  <section class="products">…</section>
</div>

<style>
  .shop {
    display: grid;
    grid-template-columns: 16rem 1fr;
    grid-template-areas:
      "notice notice"
      "filter products";
  }
  .notice   { grid-area: notice; }
  .filter   { grid-area: filter; }
  .products { grid-area: products; }
</style>

Ausblick mit reading-flow. In Browsern, die es unterstützen, folgt die Reihenfolge für Fokus und Hilfsmittel damit der Anordnung im Grid. Als alleinige Lösung reicht das noch nicht.

Code: 
          
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-auto-flow: dense;
  reading-flow: grid-rows; /* folgt der sichtbaren Zeilenreihenfolge */
}

Abweichungen automatisch finden. Dieser Cypress Test prüft, ob Karten im DOM in derselben Reihenfolge stehen, in der sie sichtbar angeordnet sind: zuerst nach Zeile, dann von links nach rechts.

Code: 
          
describe('Lesereihenfolge Produktliste', () => {
  it('DOM Reihenfolge entspricht der sichtbaren Anordnung', () => {
    cy.visit('/produkte')
    cy.get('.cards > *').then(($cards) => {
      const boxes = [...$cards].map((el, index) => {
        const r = el.getBoundingClientRect()
        return { index, top: Math.round(r.top), left: Math.round(r.left) }
      })
      const visual = [...boxes].sort((a, b) => a.top - b.top || a.left - b.left)
      expect(visual.map((b) => b.index)).to.deep.equal(boxes.map((b) => b.index))
    })
  })
})

Wo die vorgelesene Geschichte durcheinandergerät

  1. Preis vor dem Produkt. Der Screenreader liest „49,90 Euro“ und erst danach, wofür. Ursache ist meist ein absolut positionierter Preis, der im Code vor dem Titel steht.
  2. Dialog am Seitenende. Ein Modal wird ans Ende des Body gehängt, ohne dass der Fokus hineinspringt. Wer linear liest, findet es nie.
  3. Tabellen als Layout. Alte Templates, die Inhalte in Tabellenzellen anordnen, werden Zelle für Zelle und Zeile für Zeile vorgelesen.
  4. Mobil umsortiert. Ein order nur für kleine Breakpoints, das auf dem Desktop niemand bemerkt.
  5. Bildunterschrift getrennt vom Bild. Die Unterschrift steht optisch unter dem Foto, im Code aber in einer anderen Spalte.
  6. PDF ohne Tags. Ein aus dem Grafikprogramm exportiertes PDF wird in der Reihenfolge vorgelesen, in der die Textrahmen angelegt wurden.

you risk making a very odd and disconnected experience

Rachel Andrew, CSS Expertin und ehemaliges Mitglied der CSS Working Group – Grid, content re-ordering and accessibility, rachelandrew.co.uk

CSS aus, Augen zu: Der schnellste Reihenfolge Check

Zwei Handgriffe reichen für einen ersten Befund. Erstens: Stylesheets im Browser abschalten und die Seite von oben nach unten lesen. Ergibt der Text in dieser Reihenfolge Sinn, ist die Basis da. Zweitens: Screenreader starten und die Seite ohne Hinsehen durchlesen lassen. Was dabei überrascht, ist ein Kandidat für eine Korrektur im Quelltext.

Die Lesereihenfolge hängt mit vielen anderen Themen zusammen. Eine klare Gliederung mit barrierefreien Headlines hilft beim Springen, gute Alternativtexte stehen an der Stelle, an der das Bild gemeint ist. Bei starker Vergrößerung mit der Bildschirmlupe wird die Reihenfolge ebenfalls sichtbar, weil Inhalte untereinander umbrechen.

Technisch liegen die Grundlagen beim Document Object Model und bei CSS und Barrierefreiheit. Wie Inhalte vorgelesen werden, zeigt die Seite zu Text to Speech. Prüfwerkzeuge findet ihr bei den Accessibility Testing Tools.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zur Lesereihenfolge

DOM Reihenfolge, CSS Umsortierung, Dialoge und PDFs: was Entwicklung und Redaktion zur Lesereihenfolge wissen sollten.

Was ist die Lesereihenfolge in der Barrierefreiheit 2026?

Die Lesereihenfolge ist die Reihenfolge, in der Screenreader und Vorlesefunktionen die Inhalte einer Seite ausgeben. Sie richtet sich nach dem Quelltext, nicht nach der optischen Anordnung. 2026 ist sie über das WCAG 2.2 Kriterium 1.3.2 geregelt: Wo die Reihenfolge den Sinn beeinflusst, muss sie programmatisch korrekt sein.

Welches WCAG Kriterium regelt 2026 die Lesereihenfolge?

Zuständig ist das Kriterium 1.3.2 Bedeutungstragende Reihenfolge auf Stufe A. Es verlangt, dass sich eine sinnvolle Lesereihenfolge programmatisch ermitteln lässt, wenn die Reihenfolge die Bedeutung beeinflusst. Eng verwandt sind 1.3.1 Info und Beziehungen sowie 2.4.3 Fokusreihenfolge. Alle drei gelten 2026 unverändert in WCAG 2.2.

Ist eine falsche Lesereihenfolge 2026 ein BFSG Problem?

Ja, sobald sie den Sinn verändert. Als Kriterium der Stufe A gehört 1.3.2 zu den Grundanforderungen. Ein Shop, in dem Versandkosten, Lieferhinweise oder Pflichtangaben erst weit nach dem Produkt vorgelesen werden, verfehlt 2026 genau diese Grundanforderung. Ob euer Angebot unter das BFSG fällt, beantwortet eine Rechtsberatung, die Korrektur im Quelltext ist meist schnell erledigt.

Was ist die CSS Eigenschaft reading-flow und kann ich sie 2026 nutzen?

Mit reading-flow lässt sich die Reihenfolge für Fokus und Hilfsmittel an die visuelle Anordnung in Grid oder Flexbox koppeln. Die Eigenschaft kam 2025 in Chromium Browsern an, ist aber noch nicht überall verfügbar. 2026 eignet sie sich als zusätzliche Absicherung. Die verlässliche Lösung bleibt ein Quelltext in der richtigen Reihenfolge.

Wie prüfe ich die Lesereihenfolge 2026 am schnellsten?

Schaltet im Browser die Stylesheets ab und lest die Seite von oben nach unten. Ergibt der Inhalt Sinn, passt die Basis. Danach lasst ihr einen Screenreader wie NVDA oder VoiceOver die Seite linear vorlesen. Für Listen und Karten hilft 2026 ein automatisierter Cypress Test, der DOM Reihenfolge und sichtbare Position vergleicht.

Darf ich CSS order überhaupt verwenden?

Ja, solange die Umsortierung den Sinn nicht verändert. Dekorative Elemente oder gleichwertige Karten ohne inhaltliche Abfolge dürfen verschoben werden. Kritisch wird es, wenn Überschriften, Preise, Hinweise oder Schritte dadurch in eine andere Reihenfolge geraten. Im Zweifel ist es besser, das HTML umzustellen, statt mit order zu korrigieren.

Was ist der Unterschied zwischen Lesereihenfolge und Fokusreihenfolge?

Die Lesereihenfolge betrifft alle Inhalte, also auch Text und Bilder, die ein Screenreader linear vorliest. Die Fokusreihenfolge betrifft nur interaktive Elemente, die per Tab erreicht werden. Beide folgen normalerweise dem DOM. Sie können aber auseinanderlaufen, wenn tabindex mit positiven Werten oder JavaScript den Fokus umlenkt.

Warum sollte ich keinen positiven tabindex verwenden?

Ein tabindex größer als null zieht ein Element in der Fokusreihenfolge nach vorne, unabhängig von seiner Position im DOM. Dadurch entstehen Sprünge, die Tastatur Nutzer verwirren, und Fokus und Lesereihenfolge passen nicht mehr zusammen. Besser ist es, das Element im HTML an die richtige Stelle zu setzen und tabindex nur mit 0 oder minus 1 zu nutzen.

Wie gehe ich mit Dialogen und Modals um?

Ein Dialog sollte entweder im DOM direkt nach seinem Auslöser stehen oder beim Öffnen den Fokus erhalten. Das native dialog Element mit showModal erledigt das zuverlässig und macht den Rest der Seite inaktiv. Nach dem Schließen muss der Fokus zum Auslöser zurückkehren, damit Nutzer an derselben Stelle weiterlesen.

Wie stelle ich die Lesereihenfolge in PDFs sicher?

In PDFs bestimmt der Tag Baum die Lesereihenfolge. Er sollte schon beim Export aus Word oder InDesign sauber entstehen, etwa durch korrekte Formatvorlagen und eine durchdachte Anordnung der Textrahmen. Prüfen lässt sich das mit dem kostenlosen PDF Accessibility Checker PAC oder in Adobe Acrobat über das Tag Bedienfeld.

Spielt die Lesereihenfolge auch für SEO eine Rolle?

Indirekt ja. Suchmaschinen und KI Systeme lesen den Quelltext ebenfalls von oben nach unten. Eine logische Abfolge aus Überschrift, Einleitung und Details erleichtert es, den Inhalt richtig zu erfassen und Zusammenhänge zu verstehen. Eine gute Lesereihenfolge hilft also Screenreadern und Crawlern gleichermaßen.

Was ist mit Sprachen, die von rechts nach links laufen?

Bei Arabisch oder Hebräisch verläuft die visuelle Leserichtung von rechts nach links. Mit dem Attribut dir rtl und logischen CSS Eigenschaften wie margin-inline-start passt sich das Layout an, ohne dass ihr den Quelltext umsortieren müsst. Die Lesereihenfolge im DOM bleibt dabei inhaltlich korrekt.