WCAG 2.1 - 1.3.2
Meaningful Sequence
Wenn die Reihenfolge, in der Inhalte präsentiert werden, deren Bedeutung beeinflusst, kann eine korrekte Lesereihenfolge programmatisch bestimmt werden.
Inhalt
Was Bedeutet das Success Criterium 1.3.2 - Meaningful Sequence?Warum ist es so wichtig, das Success Criterium 1.3.2 - Meaningful Sequence zu beachten?Was hat das Success Criterium 1.3.2 - Meaningful Sequence mit dem BFSG zu tun?Lösungen für 1.3.2 - Meaningful Sequence anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.3.2 - Meaningful Sequence?Was Bedeutet das Success Criterium 1.3.2 - Meaningful Sequence?
Das Success Criterion 1.3.2 – Meaningful Sequence sagt aus, dass der Inhalt einer Webseite in einer sinnvollen logischen Reihenfolge bereitgestellt werden muss, damit Screenreader und andere assistive Technologien die Inhalte korrekt und verständlich wiedergeben können. Die Reihenfolge des Inhalts im HTML-Code sollte mit der visuellen Reihenfolge übereinstimmen, sodass Nutzende beim Navigieren keine verwirrenden oder unlogischen Sprünge erleben.
Woran erkenne ich eine nicht-sinnvolle Sequenz?
Wenn zum Beispiel in einer Antwort, einem Formular oder einem komplexen Layout die Reihenfolge der Bedienelemente oder Inhalte nicht dem entspricht, was visuell dargestellt wird, entsteht für Tastatur- und Screenreadernutzende eine Barriere.
Technische Anforderungen (Kurzfassung)
- Die Reihenfolge der Elemente im DOM (HTML-Code) soll mit der visuellen Darstellung übereinstimmen.
- CSS darf nicht die logische Reihenfolge so verändern, dass sie von der visuellen abweicht.
- Die Inhalte sollen auch dann verständlich bleiben, wenn das Layout angepasst oder CSS deaktiviert wird.
Warum ist es so wichtig, das Success Criterium 1.3.2 - Meaningful Sequence zu beachten?
Eine sinnvolle Reihenfolge ist entscheidend, damit alle Nutzer*innen – insbesondere blinde oder sehbehinderte Menschen, die Screenreader verwenden – den Inhalt logisch konsumieren und Webseiten effektiv bedienen können. Falsche oder verwirrende Reihenfolgen führen zu Orientierungslosigkeit und erschweren das Verstehen des Inhalts sowie das Ausführen von Aktionen (z. B. bei Formularen). Auch für Menschen mit eingeschränkter Motorik, die per Tastatur navigieren, ergeben sich sonst Probleme im Ablauf.
Was hat das Success Criterium 1.3.2 - Meaningful Sequence mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen zur Einhaltung der WCAG-Kriterien. Ohne die Umsetzung von Success Criterion 1.3.2 können wichtige digitale Angebote für Menschen mit Behinderungen unbenutzbar werden. Eine Website, deren Inhalte nicht in sinnvoller Reihenfolge zugänglich sind, kann daher keine BFSG-Konformität erlangen und riskiert rechtliche Konsequenzen und den Ausschluss von Nutzergruppen.
Lösungen für 1.3.2 - Meaningful Sequence anhand von Codebeispielen
Falscher Code
<!-- Visuell sieht es so aus, als ob Überschrift, Text und Button zusammengehören, aber im Code steht der Button zuerst: -->
<button>Mehr erfahren</button>
<h2>Unser Produkt</h2>
<p>Mit unserem Produkt erreichen Sie ...</p>Korrekter Code
<h2>Unser Produkt</h2>
<p>Mit unserem Produkt erreichen Sie ...</p>
<button>Mehr erfahren</button>Im schlechten Beispiel liest der Screenreader zuerst den Button vor und danach erst die Überschrift und den erklärenden Text. Das verwirrt Nutzer*innen, da ihnen der Kontext fehlt. Im guten Beispiel folgt der Code der logischen Reihenfolge: Überschrift → Text → Button.
Falscher Code
<!-- Layout mit CSS-Grid, aber die Reihenfolge im Code entspricht nicht der visuellen Reihenfolge: -->
<div style="display:grid; grid-template-columns: 1fr 1fr;">
<div>B</div>
<div>A</div>
</div>Korrekter Code
<!-- Reihenfolge im Code und visuell identisch: -->
<div style="display:grid; grid-template-columns: 1fr 1fr;">
<div>A</div>
<div>B</div>
</div>Wenn A visuell links (also zuerst) angezeigt werden soll, muss es auch im Code zuerst stehen. Bei Abweichungen navigieren Screenreader- oder Tastaturnutzende nicht in der erwarteten Abfolge.
Wie löse ich Verstöße gegen das Success Criterium 1.3.2 - Meaningful Sequence?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.