{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "reading-flow-reihenfolge",
 "name": "Lesereihenfolge im Raster",
 "name_en": "Reading order for bento and broken grids (CSS reading-flow)",
 "kurz": "Ein Broken Grid, bei dem Tab und Screenreader dank reading-flow so wandern, wie das Auge liest; ohne Unterstützung bleibt das Raster in HTML-Reihenfolge.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "laut"
 ],
 "stimmung_roh": [
  "laut",
  "präzise",
  "robust"
 ],
 "technik": [
  "css",
  "css-grid",
  "reading-flow",
  "vanilla-js",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bento- und Broken-Grids setzen Kacheln frei ins Raster. Das Auge liest dann Zeile für Zeile, die Tab-Taste und der Screenreader aber folgen weiter dem HTML. Der Fokus springt kreuz und quer. Die CSS-Eigenschaft reading-flow ordnet Tab-Reihenfolge und Vorlesereihenfolge nach dem Layout: grid-rows folgt den Zeilen, grid-columns den Spalten. Mit reading-flow: source-order und reading-order an einzelnen Kacheln zieht man ein Element nach vorn oder hinten, der Rest bleibt in HTML-Reihenfolge. Die freie Anordnung steht in @supports (reading-flow: grid-rows). Browser ohne reading-flow zeigen das Raster in HTML-Reihenfolge, damit Bild und Fokus nie auseinanderlaufen.",
  "warum_es_wirkt": "Die Komposition darf mutig sein, ohne Tastatur- und Screenreader-Nutzer abzuhängen. Der Fokus wandert so, wie das Auge liest. Und die Absicherung über @supports macht aus einer neuen Eigenschaft keinen Bruch in älteren Browsern.",
  "wann_einsetzen": "Bento-Raster mit Kacheln unterschiedlicher Größe, Broken Grids in Portfolios, Projekt-Übersichten mit hervorgehobenem Projekt, Layouts, die sich je Breite umsortieren (Telefon in HTML-Reihenfolge, Desktop frei).",
  "wann_nicht": "Nicht, um falsch sortiertes HTML zu reparieren: Wenn die Reihenfolge überall gleich sein soll, das HTML umstellen. Keine positiven tabindex-Werte als Ersatz. Nicht bei Inhalten, deren Reihenfolge Bedeutung trägt (Schritte, Ranglisten), wenn das Layout sie optisch anders zeigt.",
  "varianten": [
   "Broken Grid mit reading-flow: grid-rows",
   "Hervorgehobene Kachel vorn: reading-flow: source-order und reading-order: -1",
   "Spaltenweise lesen mit reading-flow: grid-columns (Masonry-artige Spalten)",
   "Flex mit order oder row-reverse: reading-flow: flex-visual"
  ],
  "umsetzung": "Grundzustand: .raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) } mit Spannweiten, die Kacheln fließen in HTML-Reihenfolge. Freie Platzierung als Variable je Kachel (--zeilen: 1 / 3 / 3 / 7) und nur angewandt in @media (min-width: 761px) { @supports (reading-flow: grid-rows) { .raster { reading-flow: grid-rows } .raster > .k { grid-area: var(--zeilen) } } }. Hervorhebung: @supports (reading-order: 1) { .raster { reading-flow: source-order } .k { grid-area: auto / span 3 } .k-highlight { grid-area: 1 / 1 / 3 / 4; reading-order: -1 } }. Jede Kachel ist ein <a> mit h3 als Titel; keine Rollen überschreiben, kein positiver tabindex. Prüfen: mit Tab durchgehen und den Accessibility-Baum in den DevTools ansehen. Die Demo zeigt im Zustand „Vorher“ absichtlich das Anti-Muster (freie Platzierung ohne reading-flow) und liest die tatsächliche Reihenfolge aus getComputedStyle (readingFlow, readingOrder) und den Kachel-Positionen; „Rücksprünge“ zählt Schritte gegen die Leserichtung.",
  "mobil": "Auf schmalen Bildschirmen eine Spalte in HTML-Reihenfolge, reading-flow ist dort nicht nötig. Deshalb gehört die freie Platzierung in eine min-width-Media-Query.",
  "reduzierte_bewegung": "Das Muster selbst bewegt nichts. In der Hilfsansicht erscheinen Pfad und Nummern ohne Zeichnen.",
  "barrierefreiheit": "WCAG 1.3.2 Bedeutungstragende Reihenfolge: Vorlesereihenfolge folgt dem Layout. 2.4.3 Fokusreihenfolge: Tab folgt dem Lesefluss statt quer durchs Raster. 2.4.7 Fokus sichtbar: deutlicher Rahmen um die ganze Kachel. 2.4.11 Fokus nicht verdeckt. 2.4.4 Linkzweck: jede Kachel ist ein Link mit Projektname als Namen. Ohne reading-flow fällt das Layout auf HTML-Reihenfolge zurück, statt die Reihenfolge zu brechen. Kein positiver tabindex."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
  "dauer_ms": "Pfad der Reihenfolge 1200, Nummern 400 mit 60 Versatz, Fokus-Rahmen 300",
  "stagger_ms": "60",
  "distanz": "Nummern scale 0.6 → 1",
  "sonstiges": "Nur die Hilfsansicht der Demo ist bewegt; das Muster selbst hat keine Bewegung.",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kreativstudio-buehne, bewegung (Expo-Out, 750–1200 ms)"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Chrome for Developers: Use CSS reading-flow for logical sequential focus navigation",
   "url": "https://developer.chrome.com/blog/reading-flow",
   "auszeichnung": "",
   "beobachtung": "Ab Chrome 137. reading-flow steuert die Reihenfolge für Tab und Hilfstechnik: normal (DOM), flex-visual, flex-flow, grid-rows, grid-columns, grid-order, source-order. reading-order (Ganzzahl) braucht einen Container mit reading-flow: source-order; Gleichstand entscheidet die Reihenfolge des Containers. Der Container wird zum Fokus-Bereich: erst alle Kinder, dann weiter. Positive tabindex-Werte an direkten Kindern werden ignoriert.",
   "art": "artikel"
  },
  {
   "seite": "Rachel Andrew: A solution for the visual and source order disconnect (Vortrag)",
   "url": "https://noti.st/rachelandrew/Aj6atb/present",
   "auszeichnung": "",
   "beobachtung": "Grid-Platzierung ändert nur die Darstellung, Sprache und Tastatur folgen dem Quelltext. reading-flow ist für Flex und Grid gedacht. Kernsatz: „Never use reading-flow to avoid the work of updating your HTML.“ Erst eine sinnvolle Quelle bauen, dann pro Breakpoint kleine Umstellungen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome for Developers: CSS reading-flow",
   "url": "https://developer.chrome.com/blog/reading-flow"
  }
 ],
 "kombinierbar_mit": [
  "bento-grid-interaktiv",
  "broken-grid-asymmetrisch",
  "projektindex-hover-vorschau",
  "case-study-geruest",
  "editorial-magazin-layout",
  "fokus-stil-system"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Chrome-Artikel (01.05.2025) und Vortrag am 01.11.2026 per WebFetch gelesen. Web Features Explorer (02.11.2026): Chrome/Edge 137+, Firefox und Safari ohne Unterstützung („Limited availability“); deshalb Absicherung über @supports.",
   "Headless-Prüfung lief mit Chromium 153 (reading-flow vorhanden); die Demo zeigt an, ob reading-flow greift."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Broken Grid, bei dem Tab und Screenreader dank reading-flow so wandern, wie das Auge liest; ohne Unterstützung bleibt das Raster in HTML-Reihenfolge.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (Expo-Out, Rezept kreativstudio-buehne)",
   "pfad_ms": 1200,
   "nummern_ms": 400,
   "nummern_stagger_ms": 60,
   "nummern_distanz": "scale 0.6 → 1, aktive Nummer scale 1.28",
   "rahmen_ms": 300,
   "fokus": "outline 3px #FF5A1F, Abstand 5px (6,3 : 1 auf #0B0B0B)",
   "raster": "6 Spalten, Zeilen minmax(clamp(118px, 12.5vw, 176px), auto), Abstand 12px; unter 761px 2 Spalten in HTML-Reihenfolge",
   "zeilen_platzierung": "c 1/1/2/3, a 1/3/3/7, e 2/1/4/3, g 3/3/4/5, b 3/5/5/7, f 4/1/5/3, d 4/3/5/5",
   "reihenfolge_platzierung": "Highlight 1/1/3/4, alle anderen auto / span 3",
   "absicherung": "@supports (reading-flow: grid-rows) bzw. @supports (reading-order: 1) innerhalb @media (min-width: 761px)"
  },
  "ausloeser": "klick",
  "touch": "Unter 761 px zwei Spalten in HTML-Reihenfolge, unter 360 px eine; nichts läuft auseinander, die Demo sagt das auch. Schalter mit größeren Zielen, Hover-Zoom der Grafiken aus.",
  "reduziert": "Pfad und Nummern erscheinen ohne Zeichnen und ohne Skalieren, Hover-Zoom aus. Das Muster selbst hat keine Bewegung.",
  "korrekturen": {
   "umsetzung": "Grundzustand: .raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) } mit Spannweiten, die Kacheln fließen in HTML-Reihenfolge. Freie Platzierung als Variable je Kachel (--zeilen: 1 / 3 / 3 / 7) und nur angewandt in @media (min-width: 761px) { @supports (reading-flow: grid-rows) { .raster { reading-flow: grid-rows } .raster > .k { grid-area: var(--zeilen) } } }. Hervorhebung: @supports (reading-order: 1) { .raster { reading-flow: source-order } .k { grid-area: auto / span 3 } .k-highlight { grid-area: 1 / 1 / 3 / 4; reading-order: -1 } }. Jede Kachel ist ein <a> mit h3 als Titel; keine Rollen überschreiben, kein positiver tabindex. Prüfen: mit Tab durchgehen und den Accessibility-Baum in den DevTools ansehen. Die Demo zeigt im Zustand „Vorher“ absichtlich das Anti-Muster (freie Platzierung ohne reading-flow) und liest die tatsächliche Reihenfolge aus getComputedStyle (readingFlow, readingOrder) und den Kachel-Positionen; „Rücksprünge“ zählt Schritte gegen die Leserichtung."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Arbeiten-Übersicht des erfundenen Studios Paulsstadt aus Schwerin nach Rezept kreativstudio-buehne: Schwarz #0B0B0B und Hellgrau #F2F2F2 im Wechsel, eine Signalfarbe #FF5A1F (Kontakt-Kachel, Fokus, Pfad), TikTok Sans in 75 % Breite und 800 für Titel, DM Mono für Labels; kein Beige. Projekt-Grafiken als eigene SVG. Schalter „Reihenfolge anzeigen“ legt nummerierte Kreise und den Tab-Pfad über das Raster, „Vorher/Nachher“ schaltet echtes reading-flow um (mit Tab nachprüfbar). Chromium 153 im Test: reading-flow und reading-order aktiv. Vorführung: vorher Pfad zeichnen und durchwandern (3 Rücksprünge), nachher (0). Referenzen: developer.chrome.com, noti.st/rachelandrew. AD-Review 02.11.2026: Note 5. Nachgebessert: Rasterzeilen minmax statt fest (Titel wurden mit Textabständen 1.4.12 abgeschnitten), unter 360 px eine Spalte, Navigation auf dem Telefon sichtbar, Schalter mit Kante im Kontrastmodus.",
  "varianten": [
   {
    "id": "zeilen",
    "name": "Broken Grid mit grid-rows",
    "wann": "Bento- und Broken-Grids in Portfolios, Agentur- und Kulturseiten, bei denen jede Kachel frei sitzt.",
    "werte": {
     "reading_flow": "grid-rows",
     "platzierung": "alle Kacheln explizit (--zeilen)"
    }
   },
   {
    "id": "reihenfolge",
    "name": "Highlight mit reading-order",
    "wann": "Listen aus dem CMS in fester Reihenfolge (Datum), bei denen ein hervorgehobenes Projekt groß oben links steht: Projektübersicht, News, Programm.",
    "werte": {
     "reading_flow": "source-order",
     "reading_order": "-1 am Highlight",
     "platzierung": "Highlight 1/1/3/4, Rest auto / span 3"
    }
   }
  ]
 }
}