ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Kompliziert
- Dauer:Kann dauern
Wichtig für Rolle:
Entwicklung
Worum geht's?
Inhalte auf Webseiten können visuell auf alle möglichen Arten und Weisen angeordnet werden. Das geht zum Beispiel über CSS-Grids, Flexboxen und Leerzeichen. Die Reihenfolge der Inhalte muss allerdings nicht nur visuell Sinn ergeben, sondern auch für den Screenreader sinnvoll auslesbar sein.
Die visuelle Anordnung darf also die lineare, logische Reihenfolge der Elemente nicht so beeinflussen, dass sie beim Auslesen mit einem Screenreader keinen Sinn mehr ergibt.
Wenn die Reihenfolge der Elemente nicht für das Verstehen der Inhalte wichtig ist, dann ist es in Ordnung, wenn die visuelle Darstellung von der linearen Reihenfolge abweicht.
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
Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.
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: Wir machen eine Gegenüberstellung unserer Maskottchen in Spaltenform und zeigen das in einem Grid an. 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 den Namen jedes einzelnen Maskottchens vorlesen, dann jedes Bild des Maskottchens und dann die Beschreibung. Wir hätten also eine Spalte geschaffen, die visuell von oben nach unten Sinn ergibt, im Code aber so angeordnet wäre, dass sie von links nach rechts einzelnen Elementen der Spalte lesen würde. Wir müssen unser Grid also im Code richtig strukturieren, damit es so vorgelesen wird, wie wir uns das visuell auch vorstellen.
Teste dein Ergebnis am besten mit einem Screenreader!
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!
