← Zurück zum Überblick

Qualitätssicherung & Checkliste

28 Prüfpunkte, die jede generierte Seite bestehen muss

Auf dieser Seite
01Die 28-Punkte-Checkliste 02Pipeline-Prüfungen 03Navigation & Links 04Kontrast & Barrierefreiheit 05Inhaltsqualität
01

Die 28-Punkte-Checkliste

Jede generierte Seite durchläuft 28 Quality Gates, gruppiert in fünf Kategorien. Ein einziger Fehler reicht, um die Seite zurückzuweisen.

6 Punkte Pipeline-Vollständigkeit
✓ Jede Pipeline hat alle geplanten Levels erzeugt
✓ Keine überflüssigen Levels (Entscheider max L1, Anwender max L2)
✓ DE- und EN-Version für jede Seite vorhanden
✓ Dateinamen folgen der Konvention: thema_audience_lang.html
✓ Keine Cross-Pipeline-Abhängigkeiten während des Builds
✓ Tiefenkarte enthält alle gebauten und übersprungenen Themen
5 Punkte Zielgruppen-Trennung
✓ Entscheider-Inhalte enthalten keinen Quellcode
✓ Entwickler-Inhalte zeigen echten Code aus der Codebase
✓ Anwender-Inhalte fokussieren auf Workflows und UI
✓ Tonfall passt zur Zielgruppe (formell/technisch/praktisch)
✓ Keine Inhalte einer Pipeline tauchen in einer anderen auf
6 Punkte Navigation & Links
✓ Alle Deep-Dive-Links zeigen auf existierende Dateien
✓ Breadcrumbs korrekt (L0 → L1 → L2 → ...)
✓ Relative Pfade korrekt (L0→L1: „l1/...“, L1→L2: „../l2/...“)
✓ Keine toten Links
✓ Sprachlinks zeigen auf korrekte Sprachversion
✓ Audience-Switch nur auf L0-Seiten
5 Punkte Kontrast & Barrierefreiheit
✓ WCAG AA Minimum (4.5:1 für Normaltext, 3:1 für großen Text)
✓ Kein weißer Text auf hellem Hintergrund
✓ Mindestens rgba(255,255,255,.85) auf dunklem Hintergrund
✓ Tooltips lesbar (heller Text auf dunklem Code-Hintergrund)
✓ Kein #9995A0 oder ähnlich auf hellen Hintergründen
6 Punkte Inhaltsqualität
✓ Max. 2–3 Sätze pro Textblock
✓ Mindestens 50% visuelle Elemente pro Screen
✓ Jeder Fachbegriff hat einen Tooltip
✓ Quizzes testen Anwendung, nicht Auswendiglernen
✓ Code stammt aus der echten Codebase
✓ Keine recycelten Metaphern
02

Pipeline-Prüfungen

Jede Pipeline muss exakt die geplanten Levels erzeugen — nicht mehr und nicht weniger. Cross-Pipeline-Abhängigkeiten während des Builds sind verboten.

📊 Entscheider max L1
Strategische Übersicht ohne technische Details. Keine Code-Blöcke, keine L2/L3-Seiten.
L0 ✓ L1 ✓ L2 ✗ L3 ✗
👤 Anwender max L2
Workflow-orientierte Anleitungen mit Screenshots und Schritt-für-Schritt-Erklärungen. Keine L3-Seiten.
L0 ✓ L1 ✓ L2 ✓ L3 ✗
🔧 Entwickler max L3
Technische Tiefe mit echtem Code, Architekturdiagrammen und API-Referenzen. Alle vier Levels verfügbar.
L0 ✓ L1 ✓ L2 ✓ L3 ✓

Verboten: Eine Pipeline darf während des Builds keine Dateien einer anderen Pipeline referenzieren oder voraussetzen. Erst in Phase 5 (Polish) werden Cross-Pipeline-Elemente wie der Audience-Switch auf L0-Seiten eingefügt.

03

Navigation & Links

Die korrekte Verlinkung ist das fragile Rückgrat des gesamten Outputs. Jeder fehlerhafte Pfad führt zu einem toten Link — und es gibt keinen Webserver, der 404-Fehler abfängt.

Relative Pfad-Konventionen

// Von L0 (root/output/) zu L1: href="l1/orchestrator_dev_de.html" // relativ zum L0-Verzeichnis // Von L1 (root/output/l1/) zu L2: href="../l2/phasen-detail_dev_de.html" // eine Ebene hoch, dann in l2/ // Von L2 (root/output/l2/) zu L3: href="../l3/state-machine_dev_de.html" // eine Ebene hoch, dann in l3/ // Von L1 zurück zu L0: href="../index_dev_de.html" // eine Ebene hoch // Sprachlink (gleiche Ebene): href="orchestrator_dev_en.html" // nur Dateiname, gleiches Verzeichnis
✅
Korrekt
• Breadcrumbs zeigen die tatsächliche Hierarchie • Deep-Dive-Links nur wenn HS ≥ 7 • Sprachlinks zeigen auf die exakte Entsprechung • Audience-Switch nur auf L0
❌
Häufige Fehler
• Deep-Dive-Link auf nicht existierende L2-Seite • Relative Pfade mit führendem / (absolut statt relativ) • Audience-Switch auf L1-Seite eingebaut • Sprachlink zeigt auf DE statt EN (oder umgekehrt)
04

Kontrast & Barrierefreiheit

WCAG AA ist das Minimum. Kein generierter Output darf diese Schwelle unterschreiten. Die häufigsten Fehler betreffen helle Textfarben auf hellen Hintergründen.

Verbotene Farbkombinationen

Textfarbe Hintergrund Kontrast Bewertung
#FFFFFF #F3EFEB 1.2:1 Verboten
#FFFFFF #FFFFFF 1.0:1 Verboten
#9995A0 #F3EFEB 2.8:1 Verboten
#9995A0 #FFFFFF 3.3:1 Verboten
#1A1A2E #F3EFEB 10.2:1 OK (AAA)
#5C5A6B #FFFFFF 6.4:1 OK (AA)
rgba(255,255,255,.85) #000066 11.8:1 OK (AAA)

Faustregel auf dunklem Hintergrund: Text auf dem Deep-Blue-Gradient oder Code-Hintergrund (#000066) muss mindestens rgba(255,255,255,.85) verwenden. Die Tooltip-Farbe #D0D0E8 auf #000066 erreicht 9.1:1 — ausreichend. Orangetexte (var(--color-impulse-orange)) auf Dark erreichen 6.2:1 — nur für Labels und Badges verwenden.

05

Inhaltsqualität

Guter generierter Content folgt strengen Regeln: kurze Textblöcke, hoher visueller Anteil, Tooltips für Fachbegriffe und Quizzes, die Verständnis prüfen — nicht Fakten abfragen.

✍️
Textlänge
Maximal 2–3 Sätze pro Textblock. Jeder Absatz muss eine klare Aussage transportieren. Keine Fülltext-Passagen.
max 3 Sätze
🎨
Visueller Anteil
Mindestens 50% jedes Screens sollte visuell sein: Karten, Diagramme, Code-Blöcke, File-Trees oder Tabellen.
≥ 50% visuell
💬
Tooltips
Jeder technische Fachbegriff erhält einen Tooltip. Keine Annahme, dass der Leser den Begriff kennt.
100% Abdeckung
🧠
Quiz-Design
Quizzes testen Anwendung: „Was würde passieren, wenn...“ statt „Welcher Wert ist X?“. Die falsche Antwort muss plausibel sein, um echtes Verständnis zu testen.
♻️
Anti-Patterns
Keine recycelten Metaphern („Wie ein Eisberg...“). Kein generischer Platzhalter-Code. Keine Screenshots aus Stockfoto-Datenbanken. Jedes Beispiel muss aus der echten Codebase stammen.
✏️ Kurz getestet

Was ist das minimale Kontrastverhältnis für normalen Text nach WCAG AA?

3:1 — das reicht für die meisten Fälle
7:1 — das ist der AAA-Standard
4.5:1 — der AA-Standard für Normaltext
Weitere Vertiefungsseiten für Entwickler
01 Orchestrator 02 Helpfulness-Scoring 03 Pipelines 04 Design-System 05 Navigation 06 Templates 07 Qualitätssicherung