Ab Chrome 137: CSS `reading-flow` eingeführt – Tastaturnavigation folgt der visuellen Reihenfolge

• Ab Chrome 137 beheben die neu eingeführten CSS-Eigenschaften reading-flow und reading-order das Problem, dass visuelles Layout und Tastatur-Fokusreihenfolge nicht übereinstimmen
• Bisher konnten bei Flex-/Grid-Layouts DOM-Reihenfolge und visuelle Reihenfolge auseinanderfallen, was bei Accessibility-Tools oder der Tastaturnavigation zu Verwirrung führt
• reading-flow steuert die Fokusbewegung anhand der visuellen Layout-Reihenfolge, mit reading-order lässt sich die Reihenfolge pro Element manuell festlegen
• Intuitiver und besser für die Accessibility als der bisherige tabindex-Ansatz, da die Navigation innerhalb des Layouts lokal begrenzt wird
• Verschiedene Beispiele und Demos gibt es auf chrome.dev

---

Was ist reading-flow?

• Legt in einem Layout fest, in welcher Reihenfolge Elemente entsprechend der Navigationsreihenfolge den Fokus erhalten
• Standardwert: normal → unveränderte bisherige DOM-Reihenfolge
• Anwendungsbeispiele:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

  .box {  
    reading-flow: flex-visual;  
  }  
  

• Ermöglicht Fokusbewegung auf Basis der visuellen Position statt der DOM-Reihenfolge

reading-order: Reihenfolge manuell festlegen

• Mit reading-flow: source-order kann jedem Element eine numerische Reihenfolge zugewiesen werden

  .wrapper {  
    reading-flow: source-order;  
  }  
  .top {  
    reading-order: -1;  
  }  
  

• Über die festgelegten Reihenfolgenwerte lässt sich die Priorität der Navigationsreihenfolge steuern

Vergleich mit dem bisherigen tabindex-Ansatz

• Bei tabindex besteht das Risiko von Inkonsistenzen mit Accessibility-Tools
• Auch Fokussprünge durch doppelte Werte oder zwischen externen Elementen können auftreten
• reading-flow definiert einen Fokusbereich, begrenzt die interne Navigation und macht bidirektionale Navigation klarer
• Positive tabindex-Werte werden ignoriert; für interne Elemente kann tabindex weiterhin individuell gesetzt werden

Zusammenfassung

• reading-flow ist ein neuer Ansatz zur layoutbasierten Festlegung der Fokusreihenfolge
• Die Übereinstimmung von visueller Ordnung und Tastaturnavigation verbessert die Accessibility und verhindert Verwirrung bei Nutzern
• Im praktischen Einsatz bietet es gegenüber tabindex eine vorhersehbarere und konsistentere Erfahrung