Was ist eine Website-QA-Checkliste?
Eine Website-QA-Checkliste ist eine systematische Liste von Checks, die sicherstellt, dass eine Website korrekt funktioniert, bevor sie live geht. Sie deckt alles ab — von kaputten Links und Browser-Kompatibilität über Performance und Barrierefreiheit bis hin zur inhaltlichen Genauigkeit.
Betrachte sie als das letzte Qualitäts-Gate zwischen „fertig" und „live". Eine gute Website-QA-Checkliste fängt Probleme, die einzelne Entwickler und Designer übersehen — weil sie dieselbe Seite wochenlang angeschaut haben und die Probleme nicht mehr sehen können.
Dieser Artikel bietet eine kostenlose, herunterladbare Website-QA-Checkliste, sortiert nach Kategorien, sodass du sie so verwenden oder an dein Projekt anpassen kannst.
Website-QA-Checkliste (Kostenlos, herunterladbar)
1. Funktionstests
- Alle internen Links funktionieren (keine kaputten Links)
- Alle externen Links öffnen korrekt (Verhalten von target="_blank" prüfen)
- Alle Formulare übermitteln korrekt (Kontaktformular, Registrierung, Suche)
- Formularvalidierung funktioniert (Pflichtfelder, E-Mail-Format, Passwortregeln)
- Fehlermeldungen der Formulare sind hilfreich und sichtbar
- Call-to-Action-Buttons verlinken auf die richtigen Seiten
- Die Suchfunktion liefert relevante Ergebnisse
- Paginierung funktioniert korrekt (zurück/weiter, Seitennummern)
- Datei-Downloads werden korrekt ausgelöst (PDFs, Bilder, Dokumente)
- Video- und Audio-Player laden und spielen
- Lightbox-/Modal-Fenster öffnen und schließen korrekt
- Die 404-Seite wird korrekt angezeigt (nicht die Standard-Serverseite)
- Die 500-Fehlerseite ist gestaltet und benutzerfreundlich
- Die Logout-Funktion beendet die Sitzung korrekt
- Die Session-Timeouts-Verarbeitung funktioniert wie erwartet
2. Cross-Browser- & Cross-Device-Testing
- Chrome (letzte 2 Versionen)
- Firefox (letzte 2 Versionen)
- Safari (letzte 2 Versionen, einschließlich macOS und iOS)
- Edge (letzte 2 Versionen)
- Mobile Safari (iPhone, iPad — mehrere Bildschirmgrößen)
- Chrome für Android (mehrere Bildschirmgrößen)
- Samsung Internet (bei Region mit hoher Nutzung)
- Responsives Layout bei 320px, 768px, 1024px, 1440px, 1920px
- Keine horizontale Scrollbar bei gängiger Breite
- Touch-Ziele sind mindestens 48x48px (Mobile-Usability)
- Schriftgrößen sind auf kleinen Bildschirmen lesbar
- Bilder skalieren korrekt und laufen nicht über
3. Performance-Testing
- Ladezeit der Seite unter 3 Sekunden (oder Ziel-Schwellenwert)
- Lighthouse-Performance-Score ≥ 80 (mobil)
- Bilder sind optimiert (komprimiert, korrektes Format, Lazy Loading)
- CSS und JavaScript sind minifiziert
- Render-blockierende Ressourcen sind minimiert
- Core Web Vitals bestehen (LCP < 2,5 s, FID < 100 ms, CLS < 0,1)
- Server-Antwortzeit (TTFB) unter 600 ms
- Cache-Header sind korrekt konfiguriert
- CDN ist konfiguriert (falls zutreffend)
- Keine Speicherlecks auf lang laufenden Seiten (SPA)
4. SEO- & Metadaten-Testing
- Seitentitel (title-Tag) ist gesetzt und pro Seite eindeutig
- Meta-Description ist gesetzt und überzeugend
- Open-Graph-Tags (og:title, og:description, og:image) sind vorhanden
- Twitter-Card-Tags sind vorhanden
- Canonical-URL ist korrekt gesetzt
- h1-Tag ist vorhanden und enthält das primäre Keyword
- Überschriftenhierarchie ist logisch (h1 → h2 → h3)
- Alt-Text ist allen Bildern hinzugefügt
- XML-Sitemap ist an Suchmaschinen übermittelt
- Robots.txt ist korrekt konfiguriert
- Noindex-Tags sind auf Staging-/Dev-Seiten angewendet
- Strukturierte Daten / Schema-Markup sind gültig (mit Google Rich Results testen)
- URLs sind sauber und lesbar (kein Unterstrich, kein Parameter-Rauschen)
- 301-Redirects sind für geänderte URLs eingerichtet
- 404s von alten URLs leiten auf relevante Seiten weiter
5. Barrierefreiheits-Testing
- Tastaturnavigation funktioniert (Tab, Enter, Escape, Pfeiltasten)
- Fokus-Indikatoren sind sichtbar (nicht über outline: none entfernt)
- Skip-to-content-Link ist vorhanden und funktional
- Farbkontrast erfüllt WCAG AA (4,5:1 für normalen Text, 3:1 für großen Text)
- Screenreader kann die Seite logisch navigieren
- ARIA-Labels werden dort verwendet, wo nötig (dynamische Inhalte, benutzerdefinierte Controls)
- Formularfelder haben zugehörige Labels
- Fehlermeldungen werden von Screenreadern angesagt
- Videoinhalte haben Untertitel oder Transkripte
- Interaktive Elemente sind per Tastatur zugänglich
- Vergrößerung der Seite bis 200 % bricht das Layout nicht
- Reduce-Motion-Präferenz wird respektiert (prefers-reduced-motion)
6. Inhalts- & Design-Testing
- Keine Rechtschreib- oder Grammatikfehler
- Markenstimme ist auf allen Seiten konsistent
- Logo verlinkt auf die Homepage (nicht nur ein statisches Bild)
- Kontaktinformationen sind korrekt (E-Mail, Telefon, Adresse)
- Rechtliche Seiten sind aktuell (Datenschutzerklärung, AGB)
- Copyright-Jahr im Footer ist aktuell
- Bilder sind nicht verpixelt oder gestreckt
- Schriftdarstellung ist über Browser hinweg konsistent
- Abstände und Ausrichtung sind konsistent (keine visuellen Fehler)
- Animationen sind flüssig (60 fps) und verursachen keine Übelkeit
- Print-Stylesheet funktioniert (oder Inhalte drucken sauber)
7. Sicherheits-Testing
- HTTPS ist erzwungen (HTTP zu HTTPS redirecten)
- SSL-Zertifikat ist gültig (nicht abgelaufen)
- Formularübermittlungen verwenden POST (nicht GET)
- Eingabevalidierung verhindert XSS und SQL-Injection
- Authentifizierungsseiten verwenden ausschließlich HTTPS
- Session-Cookies sind sicher und HttpOnly
- Keine sensiblen Daten im Quellcode (API-Schlüssel, Passwörter, Token)
- Sicherheitsheader (CSP, HSTS, X-Frame-Options) sind konfiguriert
- Admin-URLs sind nicht öffentlich zugänglich
- Datei-Uploads sind eingeschränkt (Typ, Größe) und werden gescannt
Website-QA-Testing: Wie du die Checkliste durcharbeitest
Schritt 1: Wähle deine Tools
- Manuelles Testing — die Checkliste Seite für Seite durchgehen
- Automatisierte Tools — Lighthouse, axe DevTools, WAVE, Screaming Frog
- Visuelle Feedback-Tools — BugCapturer zum Markieren von Problemen direkt auf der Seite
Schritt 2: Gehe Seite für Seite vor
Versuche nicht, die gesamte Website auf einmal zu testen. Wähle eine Seite, arbeite alle zutreffenden Kategorien durch, dann weiter zur nächsten Seite. Beginne mit Seiten mit hohem Traffic und kritischen Workflows (Homepage, Checkout, Login, Suche).Schritt 3: Erfasse Probleme, sobald du sie findest
Wenn du einen Bug findest, erfasse ihn sofort. Nutze ein Tool wie BugCapturer, um:- Einen kommentierten Screenshot mit Pfeilen und Text, die auf das Problem zeigen, zu machen
- URL, Browser, OS und Bildschirmauflösung automatisch zu erfassen
- Ein kurzes Video aufzunehmen, wenn der Bug Animationen oder Interaktionen betrifft
- Konsolenfehler und Netzwerkfehler automatisch zu erfassen
Schritt 4: Beheben und erneut testen
Weise Probleme den richtigen Teammitgliedern zu, setze Prioritäten und teste nach der Behebung erneut. Jeder Bug sollte verifiziert werden, bevor die Website live geht.Web-Qualitätssicherungs-Checkliste: Profi-Tipps
Wie BugCapturer bei Website-QA hilft
BugCapturer, eine kostenlose Chrome-Extension für Bug-Meldungen und visuelles Feedback, integriert sich direkt in den QA-Workflow:
- Screenshot-Anmerkung: Ziehe, um den Problembereich auszuwählen, füge Pfeile, Rechtecke und Text hinzu. Kein separates Screenshot-Tool nötig.
- Bildschirmaufnahme: Nimm den aktuellen Tab als WebM-Video auf, trimm dann und extrahiere Schlüsselframes. Perfekt für Bugs mit Animationen, Hover-Zuständen oder Interaktionen.
- Automatische Technik-Metadaten: URL, Browser, OS, Bildschirmauflösung und Viewport werden automatisch gesammelt — kein manuelles Eintippen.
- Erfassung von Diagnosedaten: Erfasst Konsolenlogs auf Fehlerebene und fehlgeschlagene Netzwerk-Requests (HTTP-Status ≥ 400). Netzwerk-URLs werden automatisch um sensible Parameter geschwärzt.
- Ein-Klick-E-Mail: Alles wird in eine strukturierte E-Mail gepackt, bereit zum Senden an den Entwickler.
- Excel/TSV-Export: Kopiere eine strukturierte Bug-Meldungszeile mit 12 Spalten per Ein-Klick in deine Zwischenablage, um sie teamweit zu verfolgen.
Mit BugCapturer wird das Durchgehen einer Website-QA-Checkliste dramatisch schneller. Jeder Bug braucht 30 Sekunden zum Melden statt 5 Minuten.
Download: Website-QA-Checkliste
Kopiere die obige Checkliste in dein bevorzugtes Format:
- Google Sheets / Excel — eine Tabelle mit Spalten für jede Kategorie und Checkboxen erstellen
- Notion / Trello — für jede Kategorie eine Checklisten-Karte erstellen
- Markdown — den Rohtext in deinem Repo oder Wiki halten
- Druck — als physische Checkliste für manuelle Test-Sessions nutzen
Das beste Format ist das, das dein QA-Team tatsächlich nutzt. Passe die Checkliste an dein Projekt an — füge projektspezifische Punkte hinzu, entferne irrelevante und aktualisiere sie nach jedem Release.