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 <h1> pro Seite.
  • Keine übersprungenen Heading-Ebenen.
  • <main>, <nav>, <header>, <footer> als Landmarks.
  • Buttons sind <button>, Links sind <a>.
  • Formularfelder haben Labels, nicht nur Platzhalter.
  • Bilder haben Alt-Text; dekorative Bilder alt="".

Der schnellste Test: Heading-Liste in den DevTools ansehen. Wenn sie wie ein Inhaltsverzeichnis aussieht, ist sie gut. Wenn sie wie ein Zufallsgenerator aussieht, ist sie es auch für Screenreader.

Bewegung und Reduced Motion

  • Keine Animation, die länger als 5 Sekunden läuft.
  • Kein Autoplay mit Ton.
  • prefers-reduced-motion respektieren.
  • Kein Parallax, das den Text verschiebt.

Test: Betriebssystem-Einstellung „Bewegung reduzieren“ aktivieren und die Seite neu laden. Wenn sich nichts ändert, hast du die Einstellung nicht implementiert.

Performance-Schnelltest

  • Lighthouse mobil ausführen.
  • LCP-Bild prüfen: zu groß? zu spät geladen?
  • Schriften: nur die Schnitte, die gebraucht werden?
  • JavaScript: blockiert etwas den ersten Render?
  • Bilder: richtige Größe, modernes Format?

Ein Wert unter 90 ist kein Weltuntergang, aber ein Hinweis. Ein Wert unter 70 ist ein Problem.

Die Checkliste

  • 320, 375, 768, 1440 und dazwischen geprüft.
  • Kein horizontaler Scroll.
  • Lange Texte und leere Zustände getestet.
  • Tastatur: alles erreichbar, Fokus sichtbar.
  • Kontrast geprüft, nicht geschätzt.
  • Eine H1, logische Heading-Reihenfolge.
  • Labels für Formularfelder.
  • Alt-Texte vorhanden.
  • Reduced Motion respektiert.
  • Lighthouse mobil gelaufen.

Häufige Fehler

Fehler Symptom Fix
Nur Desktop getestet Mobile bricht Drei Breiten prüfen
Fokus entfernt Tastatur unbedienbar Eigenen Fokus-Stil definieren
Platzhalter als Label Screenreader ohne Kontext Sichtbares Label
Kontrast geschätzt Text zu blass Messen, Token ändern
overflow-x: hidden Problem versteckt, nicht gelöst Ursache finden

Checkpoint: Du kannst die Seite ohne Maus bedienen und bei 375 px ohne horizontalen Scroll lesen. Dann – und erst dann – ist sie bereit für den Launch.

Weiterlesen