Die Lesereihenfolge im Web spielt eine entscheidende Rolle für die Barrierefreiheit und Benutzerfreundlichkeit einer Webseite. Sie bestimmt, wie Screenreader, Tastaturbenutzer und andere assistive Technologien den Inhalt einer Seite erfassen und navigieren. Bislang konnten Entwickler die visuelle Reihenfolge ihrer Layouts mit CSS verändern, insbesondere durch Flexbox oder Grid, doch die tatsächliche Fokusreihenfolge und die semantische Reihenfolge im DOM blieben häufig unverändert und führten zu Inkonsistenzen, die vor allem Nutzer mit Behinderungen benachteiligten. Dies ändert sich mit den neuen CSS-Proprietäten reading-flow und reading-order, die seit Version 137 von Chrome experimentell Unterstützung finden und zukunftsweisend für die barrierefreie Webentwicklung sind.
Diese Eigenschaften erlauben es Entwicklern, die Lesereihenfolge von Elementen zu steuern, sodass die Fokusreihenfolge mit der optischen Anordnung übereinstimmt – eine wichtige Vorgabe in den Web Content Accessibility Guidelines (WCAG 2. 2). Die Kernidee hinter reading-flow besteht darin, eine sogenannte Reading Flow Container zu definieren, deren Hierarchie den Lesefluss und die Navigationsreihenfolge bestimmt. Der Default-Wert reading-flow: normal entspricht dem natürlichen DOM-Quellcode, doch weitere Werte wie flex-visual, flex-flow sowie grid-rows, grid-columns und grid-order erlauben eine Anpassung der Lesereihenfolge je nach Layouttyp. Bei flexiblen Layouts kommt häufig das Problem vor, dass durch flex-direction: row-reverse die optische Reihenfolge umgedreht wird, etwa bei enthaltenen Links oder interaktiven Elementen. Ohne Anpassung bleibt die Fokusreihenfolge jedoch im ursprünglichen Quellcode, was für Nutzer mit Tastatur oder Screenreader verwirrend sein kann.
Die Einstellung reading-flow: flex-visual bewirkt, dass die Fokusreihenfolge der umgedrehten visuellen Darstellung entspricht, sodass die Tab-Reihenfolge sinnvoll ist und sich an der Erscheinung entlanghangelt. Für CSS Grid ist die Situation ähnlich komplex, da Grid-Bereiche nicht automatisch eine lineare Lesereihenfolge aufweisen. Hier können Werte wie grid-rows und grid-columns genutzt werden, um die Fokus-Reihenfolge entweder zeilenweise oder spaltenweise zu definieren. So können auch durch komplexe Grid-Positionierungen entstandene Sprünge in der Reihenfolge vermieden werden. Der Wert grid-order stellt die Standardverhaltensweise wieder her und ordnet die Lesereihenfolge nach dem ursprünglichen DOM-Code, was häufig unübersichtlich ist. Besonders spannend ist der Wert source-order, der für Flex-, Grid- und Block-Container gilt und die definierte Containerstruktur als Reading Flow Container festlegt.
Er ermöglicht den Einsatz von reading-order, einer Eigenschaft, die die Lesereihenfolge einzelner Elemente innerhalb des Containers beeinflusst. reading-order funktioniert ähnlich wie die bekannte CSS order-Eigenschaft, die visuelle Reihenfolge in Flexbox und Grid festlegt, steuert jedoch den Fokus und die für assistive Technologien relevante Reihenfolge. Anders als order wirkt reading-order unabhängig von der visuellen Darstellung und legt den Fokusort fest. Wichtig dabei: reading-order überschreibt reading-flow, das heißt, wenn beide Eigenschaften gleichzeitig angewendet werden, hat reading-order Vorrang und definiert die finale Tabulatorreihenfolge. Diese neue Eigenschaft ermöglicht ein feingranulares und situationsabhängiges Anpassen der Lesereihenfolge, was besonders für komplexe Layouts mit multiplen Fokuszielen hilfreich ist. Ein weiterer Aspekt stellt die Beziehung von reading-order zu tabindex dar.
Während tabindex traditionell zur Modifikation von Fokussierbarkeit ebenso wie zur Reihenfolge verwendet wird, gibt es wichtige Unterschiede. Negative tabindex-Werte machen Elemente unfokussierbar, und positive Werte werden nicht empfohlen, da sie unvorhersehbare Tastatur-Navigation zur Folge haben können. reading-order hingegen verwendet Zahlenwerte ohne Beschränkung, die lediglich innerhalb des jeweiligen Reading Flow Containers relevant sind und somit ein natürlicheres und sichereres Handling erlauben. Tests zeigen sogar, dass reading-order den tabindex-Wert überlagert, wodurch die neue Eigenschaft eine leistungsfähige Alternative im Management der Fokusreihenfolge darstellt. Selbst wenn das Layout nicht auf Flexbox oder Grid basiert, kann reading-flow: source-order in Kombination mit reading-order eingesetzt werden, um die Lesereihenfolge zu steuern.
Dies bietet Mehrwert bei Block-Layouts und nicht-modernen CSS-Layouts, auch wenn die Flex- und Grid-spezifischen Werte nicht anwendbar sind. Zusammenfassend eröffnet die Einführung von reading-flow und reading-order enorme Möglichkeiten, die Barrierefreiheit von Webseiten auf ein neues Niveau zu heben. Die Arbeit mit diesen CSS-Eigenschaften ermöglicht eine bessere Synchronisation von visueller Darstellung und Fokusreihenfolge, was die Navigation für alle Nutzer – insbesondere für Menschen mit Behinderungen – deutlich verbessert. Trotz der aktuellen Beschränkung auf Chrome 137 und neuere Versionen ist die Unterstützung ein wichtiger Meilenstein, der das Potential hat, bald auch in anderen Browsern Einzug zu halten. Für Entwickler stellt sich nun die spannende Aufgabe, diese Techniken in bestehende und neue Projekte zu integrieren, um die Herausforderungen moderner, komplexer Web-Layouts zu meistern und barrierefreie digitale Erlebnisse zu schaffen.
Die Zeiten, in denen die CSS order-Eigenschaft visuelle Verschiebungen ermöglichte, ohne die Zugänglichkeit zu gewährleisten, gehören damit hoffentlich der Vergangenheit an. Künftige Webstandards könnten reading-flow und reading-order als Standardwerkzeuge etablieren, um die Balance zwischen Designflexibilität und Nutzerfreundlichkeit sicherzustellen. Dies bedeutet eine große Verbesserung in der Webentwicklung und legt den Grundstein für inklusivere digitale Umgebungen.
