--- title: "Tutorial — PageWeave Academy" --- # Responsive QA: 375, 768, 1440 Systematisch prüfen statt am Fenster ziehen: die Checkliste für Layout, Text, Tastatur und Kontrast. > Prüfe jede Seite bei 375, 768 und 1440 Pixeln, mit langen Texten und ohne Maus. Kontrolliere Fokus, Kontrast, Heading-Reihenfolge und Reduced Motion. Ein Screenshot allein ist kein Test. Responsive QA ist kein Screenshot bei 1440 px. Es ist eine Reihe von Tests, die du wiederholen kannst – nach jeder Section, nicht erst am Launch-Tag. Diese Checkliste ist für Seiten, die mit einem Agenten gebaut wurden. Sie setzt voraus, dass du die Vorschau im Browser öffnen kannst und Zugriff auf die Entwicklertools hast. ## Die drei Pflichtbreiten | Breite | Warum | | --- | --- | | 375 px | Kleine Phones, größte Einschränkung | | 768 px | Tablets, häufigster Umbruchpunkt | | 1440 px | Desktop, Referenz für das Design | Prüfe zusätzlich bei **320 px** und **zwischen** den Breakpoints. Der Umbruch passiert nicht bei 768, sondern oft bei 812. Was du bei jeder Breite kontrollierst: - kein horizontaler Scroll, - Text bricht sauber um, - Tap-Ziele sind mindestens 44 × 44 px, - Navigation bleibt erreichbar, - Bilder behalten ihr Seitenverhältnis, - Tabellen bleiben lesbar oder scrollen. > **Tipp:** Ziehe das Fenster langsam von 320 bis 1600 px. Ein Sprung bei 900 px ist ein fehlender Breakpoint, kein Zufall. ## Lange Texte und echte Daten Ein Layout, das mit drei Wörtern funktioniert, ist kein Layout. Teste: - die längste Überschrift, - den längsten Button-Text, - eine Karte mit zweizeiligem Titel, - eine leere Liste, - eine Liste mit 20 Einträgen, - ein fehlendes Bild. Wenn du keine echten Daten hast, erfinde realistische. „Lorem ipsum dolor sit amet“ ist zu kurz und zu gleichmäßig. ## Tastatur und Fokus Nimm die Maus weg. Tab dich durch die Seite. - Ist der Skip-Link das erste fokussierbare Element? - Ist jeder Link und Button erreichbar? - Ist der Fokus sichtbar? - Ist die Reihenfolge logisch? - Lässt sich ein Menü mit Escape schließen? - Funktioniert das TOC ohne Maus? Ein Fokus-Ring, der nur bei Hover erscheint, ist kein Fokus-Ring. > **Achtung:** `outline: none` ohne Ersatz ist ein Barrierefreiheitsfehler. Wenn dir der Standard-Ring nicht gefällt, gestalte einen eigenen – aber entferne ihn nicht. ## Kontrast und Farbe Prüfe Text gegen Hintergrund, nicht Farben im Vakuum. - Fließtext: mindestens 4,5:1. - Große Schrift (ab 24 px oder 19 px fett): mindestens 3:1. - Icons, die Information tragen: mindestens 3:1. - Fokus-Indikator: mindestens 3:1 gegen die Umgebung. Verlasse dich nicht auf Farbe allein. Ein roter Rahmen ohne Text sagt nichts, wenn jemand Rot nicht unterscheidet. ## Struktur und Semantik - Genau eine `

` pro Seite. - Keine übersprungenen Heading-Ebenen. - `
`, `