Was ist das Ziel dieses Kriteriums?
Stell dir vor, du liest ein Buch, aber die Seiten sind völlig durcheinander: Erst das Ende, dann ein Kapitel aus der Mitte, dann der Anfang. Chaos, oder? Genauso chaotisch wird es für Menschen, die mit Hilfstechnologien arbeiten, wenn Webinhalte in einer verwirrenden Reihenfolge programmiert sind.
Menschen, die Screenreader verwenden, navigieren durch Inhalte in der Reihenfolge, wie sie im Code stehen – nicht wie sie visuell angeordnet sind. Wenn diese programmatische Reihenfolge keinen Sinn macht, wird aus einer logischen Website ein digitales Chaos.
Das Ziel von Erfolgskriterium 1.3.2 ist daher klar: Inhalte müssen so programmiert sein, dass ihre Reihenfolge auch dann Sinn macht, wenn man sie nicht sehen kann. Kurz gesagt: Was logisch ist, muss auch programmatisch logisch sein.
Was fordert das Erfolgskriterium genau?
Ganz konkret geht es darum, dass die Reihenfolge der Inhalte im Code einer sinnvollen Lesereihenfolge entspricht – immer dann, wenn diese Reihenfolge für das Verständnis wichtig ist.
Das bedeutet:
- Inhaltliche Abfolgen müssen programmatisch erkennbar sein: Wenn eine bestimmte Reihenfolge wichtig für das Verständnis ist, muss sie auch im Code abgebildet werden.
- Keine visuellen Tricks ohne Code-Logik: Du darfst nicht nur mit CSS die Reihenfolge ändern, wenn dadurch die Bedeutung verlorengeht.
- Flexibilität bei unabhängigen Inhalten: Wenn die Reihenfolge egal ist (z.B. bei unabhängigen Artikel-Teasern), muss auch keine bestimmte Ordnung eingehalten werden.
Ausnahmen gelten für Inhalte, deren Reihenfolge für die Bedeutung irrelevant ist – etwa bei einer Navigation und einem Hauptinhalt, die unabhängig voneinander funktionieren.
Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du rufst den Kundenservice an, und die Stimme am anderen Ende erklärt dir erst das Fazit, dann springt sie zum Schritt 3 einer Anleitung und endet mit der Begrüßung. Verwirrend? Genauso verwirrend ist es für Screenreader-Nutzer, wenn Inhalte in der falschen programmatischen Reihenfolge stehen.
Eine sinnvolle Reihenfolge schafft Barrierefreiheit, weil sie:
- Screenreader-Nutzern ermöglicht, Inhalte in einer logischen Abfolge zu verstehen.
- Menschen mit kognitiven Einschränkungen hilft, komplexe Informationen strukturiert zu erfassen.
- Nutzern von Sprachsteuerung erlaubt, sich vorhersagbar durch Inhalte zu navigieren.
- Mobile Nutzer unterstützt, die oft linear durch Inhalte wischen.
Und das Beste: Eine durchdachte Inhaltsstruktur macht Websites nicht nur für Menschen mit Einschränkungen besser – sie verbessert die User Experience für alle, die schnell und effizient Informationen finden wollen.
So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Sinnvolle Reihenfolgen zu schaffen ist meist einfacher als gedacht – und macht deine Website gleich viel nutzerfreundlicher. Hier ein paar bewährte Strategien:
HTML-Struktur durchdenken:
- Verwende die logische Dokumentenreihenfolge: Header, Navigation, Hauptinhalt, Footer.
- Baue Inhalte in der Reihenfolge auf, in der sie gelesen werden sollen.
- Nutze semantische HTML-Elemente (
<main>,<section>,<article>) für klare Strukturen.
CSS clever einsetzen:
- Wenn du die visuelle Reihenfolge änderst (z.B. mit Flexbox oder Grid), achte darauf, dass die Code-Reihenfolge trotzdem Sinn macht.
- Verwende
order-Properties nur, wenn die neue Reihenfolge auch inhaltlich logisch ist. - Teste deine Seite ohne CSS: Ist sie immer noch verständlich?
Häufige Fallstricke vermeiden:
- Verwende keine Leerzeichen oder Tabulatoren, um Tabellen zu formatieren.
- Setze CSS-Positionierung nicht ein, um wichtige Inhalte in eine andere Reihenfolge zu bringen.
- Teste mit Screenreadern oder nutze Entwicklertools, um die programmatische Reihenfolge zu prüfen.
Praktische Test-Tipps:
- Navigiere mit Tab durch deine Website – springt der Fokus wild umher?
- Lass dir die Seite vorlesen oder nutze einen Screenreader-Simulator.
- Frage dich: Würde die Reihenfolge auch in einem reinen Text-Dokument Sinn machen?
Warum dieses Erfolgskriterium für Unternehmen relevant ist
Auch bei Erfolgskriterium 1.3.2 gilt: Struktur ist nicht nur ein Nice-to-have – sie bringt handfeste Business-Vorteile und macht deine Website professioneller.
1. Zielgruppe erweitern
Eine logisch strukturierte Website ist für mehr Menschen nutzbar: für Screenreader-Nutzer, Menschen mit kognitiven Einschränkungen, mobile Nutzer und alle, die sich schnell orientieren wollen. Du schließt niemanden aus – und erreichst mehr potenzielle Kunden.
2. Suchmaschinenoptimierung verbessern
Suchmaschinen lieben klare Strukturen. Eine logische HTML-Reihenfolge hilft Crawlern dabei, deine Inhalte besser zu verstehen und zu indexieren. Das kann dein Ranking verbessern und macht deine Inhalte auffindbar.
3. Maintenance und Entwicklung vereinfachen
Saubere, logische Code-Strukturen sind nicht nur für Screenreader gut – sie machen auch die Wartung deiner Website einfacher. Neue Entwickler finden sich schneller zurecht, Bugs sind leichter zu finden, und Updates werden effizienter.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
Das Erfolgskriterium im Wortlaut der W3
Success Criterion 1.3.2 Meaningful Sequence
(Level A)
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.