{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "formular-fehlerzusammenfassung",
 "name": "Fehlerzusammenfassung im Formular",
 "name_en": "Form error summary with links to fields",
 "kurz": "Nach dem Absenden steht oben, wie viele Angaben fehlen, mit Sprunglinks zu den Feldern; beim Korrigieren hakt sich die Liste live ab.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "ruhig",
  "vertrauenswürdig"
 ],
 "technik": [
  "vanilla-js",
  "css",
  "aria",
  "form"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Nach einem Absende-Versuch mit Fehlern erscheint über dem Formular ein Kasten: Überschrift mit der Zahl der offenen Angaben, darunter je Fehler ein Link zum Feld. Der Fokus springt auf diesen Kasten, Screenreader lesen Überschrift und Liste vor. Am Feld selbst steht derselbe Fehlertext, verknüpft über aria-describedby, das Feld trägt aria-invalid=\"true\". Wer korrigiert, sieht den Eintrag in der Liste sofort als erledigt; eine höfliche Live-Region meldet, wie viele Angaben noch fehlen. Ergänzt validierung-nach-interaktion: dort geht es um das einzelne Feld, hier um den Überblick.",
  "warum_es_wirkt": "Bei langen Formularen sieht man sonst nur den ersten Fehler oder gar keinen, weil er außerhalb des Bildschirms liegt. Die Liste sagt sofort, wie viel noch fehlt und wo. Ein Klick führt hin. Das hilft allen, besonders Menschen mit Screenreader, Bildschirmlupe oder wenig Konzentration.",
  "wann_einsetzen": "Formulare ab etwa fünf Feldern oder mit Feldern außerhalb des sichtbaren Bereichs: Kursanmeldung, Mitgliedsantrag, Bewerbung, Schadensmeldung, Checkout, Mehrschritt-Anfragen (je Schritt).",
  "wann_nicht": "Bei ein bis drei Feldern (Newsletter, Suche) reicht die Meldung am Feld plus Fokus auf das erste fehlerhafte Feld. Nicht als einzige Fehleranzeige: der Text am Feld bleibt Pflicht. Nicht schon beim Tippen anzeigen.",
  "varianten": [
   "Liste mit Sprunglinks über den Feldern, Fokus auf den Kasten (GOV.UK-Prinzip)",
   "Kompakt: ein Satz mit Links über dem Absende-Knopf, Fokus aufs erste fehlerhafte Feld",
   "Je Schritt einer Mehrschritt-Anfrage, oben im aktuellen Schritt",
   "Serverseitig gerendert ohne JS, Seitentitel beginnt mit „Fehler:“"
  ],
  "umsetzung": "Formular mit novalidate, Prüfung beim Absenden je Feld. Bei Fehlern den Kasten <div role=\"group\" tabindex=\"-1\" aria-labelledby=\"zf-titel\"> über den Feldern füllen (h3 „Noch 3 Angaben, dann bist du dabei.“, je Fehler <a href=\"#feld-id\"><small>Label</small><b>Fehlertext</b></a>), hidden entfernen und kasten.focus() aufrufen. Linkklick: preventDefault, Feldblock samt Label ins Bild scrollen (window.scrollTo mit 24 px Rand, Rücksicht auf feste Kopfzeilen), dann feld.focus({preventScroll:true}); bei Radios das gewählte oder erste Radio. Am Feld: <p id=\"f-email-fehler\"><span class=\"sr\">Fehler: </span>…</p>, input aria-describedby=\"f-email-fehler\" und aria-invalid. Radiogruppen: fieldset aria-describedby=\"hinweis fehler\" (aria-invalid gibt es für radio nicht). Nach dem ersten Absenden: input entlastet ein Feld sofort und hakt den Eintrag ab, change meldet neue Fehler und aktualisiert die Statuszeile role=\"status\" („Noch 2 Angaben offen.“). Fokus nur beim Absenden verschieben. Erfolg: Formular ersetzen und die Dankes-Überschrift (tabindex=-1) fokussieren. Variante Kompakt: statt Kasten ein Satz über dem Knopf („2 Angaben fehlen: E-Mail, Starttermin.“) und Fokus direkt auf das erste fehlerhafte Feld. In der Demo setzt die Vorführung keinen echten Fokus (sonst stiehlt sie der Galerie den Fokus), sondern zeigt ihn als Klasse.",
  "mobil": "Kasten volle Breite, Links mit mindestens 44 px Höhe. Beim Sprung zum Feld wird das Label mit sichtbar, damit klar ist, welches Feld gemeint ist. Eingaben mindestens 16 px, sonst zoomt iOS.",
  "reduzierte_bewegung": "Kasten und Einträge erscheinen ohne Weg und ohne Feder, nur Farbwechsel. Kein weiches Scrollen beim Sprung.",
  "barrierefreiheit": "WCAG 3.3.1 Fehlererkennung: Fehler werden als Text benannt, nicht nur rot. 3.3.3 Korrekturvorschlag: jeder Text sagt, wie es richtig geht. 3.3.2 Beschriftungen: sichtbare Labels, Pflicht im Label. 4.1.2 Name, Rolle, Wert: aria-invalid und aria-describedby synchron. 4.1.3 Statusmeldungen: Restzahl über role=\"status\" ohne Fokuswechsel. 2.4.3 Fokusreihenfolge: Fokus nach dem Absenden auf den Kasten, danach in DOM-Reihenfolge. 2.4.11 Fokus nicht verdeckt: scroll-margin-top. 2.4.7 Fokus sichtbar. 1.4.1 Farbe: Fehler und Erledigt immer mit Zeichen und Text. 1.4.3 und 1.4.11 Kontrast: Text 4,5 : 1, Feldrahmen 3 : 1. 3.2.2 Bei Eingabe: kein Fokussprung beim Korrigieren. 2.5.8 Zielgröße: Links und Radios mindestens 24 × 24 px."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
  "dauer_ms": "Kasten 300, Listeneintrag erledigt 200, Farbe 150; Erfolg 500 mit cubic-bezier(0.34, 1.56, 0.64, 1)",
  "stagger_ms": "40 je Listeneintrag beim Erscheinen",
  "distanz": "Kasten 8 px von oben, Einträge 4 px",
  "sonstiges": "Fokusrahmen 3 px, Versatz 3 px in Markenfarbe #4459D6 (5,8 : 1 auf Weiß); Fehlertext #B3261E (6,5 : 1)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kurs-coaching-lernweg, bewegung (easeOutQuint, Federn nur für Erfolgsmomente)"
 },
 "kurve": {
  "bezier": [
   0.22,
   1.0,
   0.36,
   1.0
  ],
  "css": "cubic-bezier(0.22, 1, 0.36, 1)",
  "name": "power4.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "GOV.UK Design System: Error summary",
   "url": "https://design-system.service.gov.uk/components/error-summary/",
   "auszeichnung": "",
   "beobachtung": "Kasten oben im main, über der h1. Titel „There is a problem“, je Fehler ein Link zum Feld (bei Radios zur ersten Option). Fokus wird auf die Zusammenfassung gesetzt. role=\"alert\" liegt seit 2022 auf einem inneren Element statt auf der Wurzel (JAWS las sonst nicht alles). Seitentitel bekommt „Error: “ vorangestellt. Texte in Liste und am Feld wortgleich.",
   "art": "artikel"
  },
  {
   "seite": "W3C WAI Tutorials: User Notification (Forms)",
   "url": "https://www.w3.org/WAI/tutorials/forms/notifications/",
   "auszeichnung": "",
   "beobachtung": "Fehler oben vor dem Formular auflisten, mit Bezug auf das Label, Beschreibung des Problems, Hinweis zur Lösung und Link zum Feld. Fehler am Feld über aria-describedby verknüpfen. Hauptüberschrift und <title> dürfen die Zahl der Fehler nennen.",
   "art": "tutorial"
  }
 ],
 "tutorials": [
  {
   "titel": "GOV.UK Design System: Error summary",
   "url": "https://design-system.service.gov.uk/components/error-summary/"
  },
  {
   "titel": "W3C WAI: User Notification",
   "url": "https://www.w3.org/WAI/tutorials/forms/notifications/"
  }
 ],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "mehrschritt-anfrage",
  "kontakt-anfrage-formular",
  "checkbox-radio-animiert",
  "button-zustaende",
  "fokus-stil-system"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Belege sind Design-System und W3C-Tutorial (01.11.2026 per WebFetch gelesen), keine Award-Website. Das Muster ist Standard bei Behörden-Formularen.",
   "Bewegungswerte eigene Festlegung nach Rezept kurs-coaching-lernweg."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Nach dem Absenden steht oben, wie viele Angaben fehlen, mit Sprunglinks zu den Feldern; beim Korrigieren hakt sich die Liste live ab.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint, Rezept kurs-coaching-lernweg)",
   "kasten_ms": 300,
   "kasten_distanz": "translateY -8px → 0, opacity 0 → 1",
   "eintrag_ms": 200,
   "eintrag_stagger_ms": 40,
   "eintrag_distanz": "translateY 4px → 0",
   "farbe_ms": 150,
   "erledigt": "Häkchen 500 ms cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.6 → 1 (einziger Federmoment)",
   "fokus": "Kasten: outline 3px #4459D6, Versatz 4px; Bedienelemente: box-shadow 0 0 0 3px #fff, 0 0 0 6px #4459D6",
   "farben": "Fehler #B3261E (6,5 : 1 auf Weiß) auf #FFF4F2, Erfolg #0B7A4E (5,4 : 1) auf #EAF7F0, Feldrahmen #7A8091 (3,9 : 1), Marke #4459D6 (5,8 : 1)",
   "ziele": "Listenlinks min-height 44px, Felder 52px, Knopf 54px",
   "scroll_margin_top": "24px",
   "aria": "Kasten role=group, tabindex=-1, aria-labelledby (benannter Container, kein role=alert, weil der Fokus die Ansage übernimmt); Feld aria-describedby → Fehlertext mit verstecktem „Fehler:“, aria-invalid; Radiogruppe: fieldset aria-describedby; Restzahl in role=status nur bei change",
   "seitentitel": "„Fehler: “ vorangestellt, solange etwas offen ist"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten. Ein Spalten-Layout, Links in der Liste mindestens 44 px hoch, Eingaben 17 px (kein iOS-Zoom), Radiokarten untereinander, Knopf volle Breite.",
  "reduziert": "Kasten, Einträge und Häkchen erscheinen ohne Weg und ohne Feder; Sprung zum Feld ohne weiches Scrollen. Farben, Zeichen und Texte bleiben.",
  "korrekturen": {
   "umsetzung": "Formular mit novalidate, Prüfung beim Absenden je Feld. Bei Fehlern den Kasten <div role=\"group\" tabindex=\"-1\" aria-labelledby=\"zf-titel\"> über den Feldern füllen (h3 „Noch 3 Angaben, dann bist du dabei.“, je Fehler <a href=\"#feld-id\"><small>Label</small><b>Fehlertext</b></a>), hidden entfernen und kasten.focus() aufrufen. Linkklick: preventDefault, Feldblock samt Label ins Bild scrollen (window.scrollTo mit 24 px Rand, Rücksicht auf feste Kopfzeilen), dann feld.focus({preventScroll:true}); bei Radios das gewählte oder erste Radio. Am Feld: <p id=\"f-email-fehler\"><span class=\"sr\">Fehler: </span>…</p>, input aria-describedby=\"f-email-fehler\" und aria-invalid. Radiogruppen: fieldset aria-describedby=\"hinweis fehler\" (aria-invalid gibt es für radio nicht). Nach dem ersten Absenden: input entlastet ein Feld sofort und hakt den Eintrag ab, change meldet neue Fehler und aktualisiert die Statuszeile role=\"status\" („Noch 2 Angaben offen.“). Fokus nur beim Absenden verschieben. Erfolg: Formular ersetzen und die Dankes-Überschrift (tabindex=-1) fokussieren. Variante Kompakt: statt Kasten ein Satz über dem Knopf („2 Angaben fehlen: E-Mail, Starttermin.“) und Fokus direkt auf das erste fehlerhafte Feld. In der Demo setzt die Vorführung keinen echten Fokus (sonst stiehlt sie der Galerie den Fokus), sondern zeigt ihn als Klasse.",
   "varianten": [
    "Liste mit Sprunglinks über den Feldern, Fokus auf den Kasten (GOV.UK-Prinzip)",
    "Kompakt: ein Satz mit Links über dem Absende-Knopf, Fokus aufs erste fehlerhafte Feld",
    "Je Schritt einer Mehrschritt-Anfrage, oben im aktuellen Schritt",
    "Serverseitig gerendert ohne JS, Seitentitel beginnt mit „Fehler:“"
   ]
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Kursanmeldung der erfundenen Online-Akademie Kontenklar aus Herford (Kurs „Buchhaltung, die du verstehst“, Trainerin Merle Tönsing) nach Rezept kurs-coaching-lernweg: Grund #F4F6FA, Tinte #141414, Markenton auf #4459D6 abgedunkelt (das Rezept-Blau #7491FF hätte mit weißer Schrift nur 2,9 : 1 und bleibt Fläche), Erfolg #0B7A4E statt #10BF7A für Text, Bricolage Grotesque, Onest, Shantell Sans nur für Modul-Labels und „erledigt“. Eigene SVG-Belege statt Bild. Vorführung: Jana tippt Vorname und eine unfertige E-Mail, schickt ab (4 Fehler, Fokus auf den Kasten), springt über die Liste zu E-Mail, Nachname, Starttermin und Bedingungen, jeder Eintrag hakt sich ab, dann Erfolg. Fokus wird in der Vorführung nur nachgestellt. Referenzen: design-system.service.gov.uk, w3.org/WAI/tutorials. AD-Review 02.11.2026: Note 5. Nachgebessert: Absende-Knopf und Varianten mit Kante im Kontrastmodus. Tastaturtest: Absenden ohne Angaben fokussiert die Zusammenfassung, Titel beginnt mit „Fehler:“, Link springt ins Feld mit aria-invalid und aria-describedby.",
  "varianten": [
   {
    "id": "liste",
    "name": "Liste mit Sprunglinks",
    "wann": "Lange Formulare ab etwa fünf Feldern: Kursanmeldung, Mitgliedsantrag, Bewerbung, Checkout.",
    "werte": {
     "anzeige": "Kasten über den Feldern, h3 mit Restzahl, ein Link je Fehler",
     "fokus": "Kasten (tabindex=-1)",
     "kasten_ms": 300,
     "eintrag_stagger_ms": 40
    }
   },
   {
    "id": "kompakt",
    "name": "Kompakt über dem Knopf",
    "wann": "Kurze Formulare mit drei bis fünf Feldern: Kontakt, Rückruf, Termin-Anfrage; die Felder passen auf einen Bildschirm.",
    "werte": {
     "anzeige": "ein Satz mit Links über dem Absende-Knopf, linke Kante 4px #B3261E",
     "fokus": "erstes fehlerhaftes Feld",
     "satz_ms": 300
    }
   }
  ]
 }
}