ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Kompliziert
- Dauer:Kann dauern
Wichtig für Rolle:
Entwicklung
Worum gehts?
Die visuelle Anordnung (z. B. mit CSS-Grids) darf die logische Reihenfolge von Inhalten nicht beeinflussen. Zusammengehörende Elemente, wie eine Überschrift und ein Text, müssen auch so von Screenreadern gelesen werden können.
Manchmal spielt die Reihenfolge der Elemente keine Rolle. In diesem Fall ist es in Ordnung, wenn die visuelle Darstellung nicht mit der Lese-Reihenfolge von Screenreadern übereinstimmt.
Beispiele für Inhalte, deren Bedeutung sich aus ihrer Reihenfolge ergibt:
- Nummerierte Listen
- Tabellen
- Zusammenhängende Überschriften und Absätze
Beispiele für Inhalte, deren Bedeutung nicht von der Reihenfolge abhängt:
- Unnummerierte Listen
- Listen-Ansicht von Produkten
Umsetzung
Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.
Sicherstellen dass alle Inhalte in einer sinnvollen Reihenfolge angeordnet sind
Achte beim Bauen einer Webseite darauf, dass beim Stylen durch CSS oder beim Anordnen der Elemente alle Inhalte auch in linearer Reihenfolge Sinn ergeben.
Beispiel: Gehen wir davon aus, wir machen eine Gegenüberstellung unserer Maskottchen in Spaltenform und zeigen das in einem Grid an. Ein Grid wird normalerweise von links nach rechts ausgelesen. Wenn wir jetzt die Informationen in unserem Grid einfach nebeneinander platzieren würden, dann würde das Grid von links nach rechts gelesen keinen Sinn ergeben. Es würde die Namen jedes einzelnen Maskottchens vorlesen, dann jedes Bild des Maskottchens und dann die Beschreibung. Wir hätten also eine visuell logische Spalte im Code so angeordnet, dass sie keinen Sinn ergibt.
Du kannst das Layout immer testen, indem du mit einem Plug-in im Browser das CSS deaktivierst und so die Webseite in linearer Reihenfolge siehst. Ein gutes Tool dafür ist die »Web Developer Toolbar«.
WCAG-Technik(en) in Englisch:
DAs Accessbility-Center
Teste selbstständig auf digitale Barrierefreiheit!
Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!
- Alle Prüfschritte leicht erklärt
- Teile und exportiere Prüfberichte
- Teste direkt auf der Live-Webseite!
