Visuelle Prüfung: Spalten, Texte und Fotos auf allen Bildschirmen
Eine Seite ohne Überlauf kann trotzdem schwer lesbar sein. Prüfen Sie Proportionen, lange Inhalte und Interaktionen vor der Veröffentlichung.
Sechs wiederholbare Prüfungen
Typische Seiten auswählen
Prüfen Sie Startseite, Kategorie, Artikel, Leistung, Formular und Tabelle. Berücksichtigen Sie lange Titel, eine Sprache mit Schreibrichtung von rechts nach links und mehrere Fotos.
Spalten vergleichen
Prüfen Sie Breiten von 320, 390, 768, 1280, 1440 und 1920 px. Kontrollieren Sie Ausrichtung, Lesereihenfolge und Abstände. Verbergen Sie Fehler nicht durch ausgeblendeten Überlauf.
Text vergrößern
Prüfen Sie Text bei 200 % und den Umbruch bei 320 CSS-Pixeln. Inhalte und Bedienelemente müssen zugänglich bleiben; Tabellen dürfen separat scrollen.
Fotos kontrollieren
Prüfen Sie Ausschnitt, Motiv, Maße und Bildnachweis. Fotos dürfen sich nicht mit dem Nachbartext strecken. Beschreiben Sie sichtbare Inhalte und kennzeichnen Sie Stockfotos.
Interaktionen ausprobieren
Bedienen Sie Menüs, Filter, FAQs und Formulare per Tastatur. Prüfen Sie Fokus, Fehlermeldungen und erhaltene Eingaben, ohne eine echte Anfrage zu senden.
Nachweise aufbewahren
Dokumentieren Sie URL, Sprache, Breite, Browser, Fehler und Ergebnis nach der Korrektur. Ergänzen Sie Labormessungen bei ausreichendem Traffic um Nutzungsdaten.
Prüfprotokoll
- URL und Sprache
- Bildschirm und Zoom
- Fehler und Screenshot
- Korrektur und erneutes Prüfergebnis
Arbeitsmethode, keine Konformitätsbescheinigung. Passen Sie den Umfang an und dokumentieren Sie Ausnahmen.
Vor der Veröffentlichung: sechs Funktionsprüfungen
- Menüs, Links, Downloads und Sprachwechsel durchlaufen; das tatsächliche Ziel prüfen.
- Fiktive Eingaben verwenden: leere Felder, ungültige Adressen, Umlaute und lange Texte.
- Prüfen, ob Fehler das Feld nennen, per Tastatur zugänglich sind und nützliche Eingaben erhalten.
- Auch serverseitige Validierung testen: Browserprüfungen lassen sich umgehen.
- Bestätigung und tatsächliche Zustellung unterscheiden; ein erlaubtes Testziel verwenden.
- Zustände ohne JavaScript, Ablehnung und Wiederaufnahme prüfen; keine Geheimnisse in Nachweisen speichern.
Situationen und passende Prüfungen
Auf kleinen Bildschirmen die Tabelle horizontal scrollen. Mit der Tastatur die Tabelle fokussieren und die Pfeiltasten nutzen.
| Situation | Bedeutung | Sinnvolle Prüfung |
|---|---|---|
| Bei 200 % Textgröße verschwindet ein Bedienelement. | Die Aufgabe bleibt nach Vergrößerung nicht zugänglich. | Layout anpassen und mit Tastatur erneut testen. |
| Ein Foto wird verzerrt oder erzeugt große Lücken am Desktop. | Seine Proportionen stören benachbarte Inhalte. | Größenbegrenzungen und Lesereihenfolge prüfen. |
| overflow: hidden schneidet eine Tabelle ab. | Daten werden verdeckt. | Der Tabelle einen eigenen tastaturbedienbaren Scrollbereich und umbrechende Zellen geben. |
| Eine übersetzte Überschrift wird abgeschnitten. | Eine einzige Testsprache reicht nicht. | Lange Texte, RTL-Sprachen und den tatsächlichen Sprachwechsel testen. |
Fiktives Beispiel
Eine fiktive Leistungsseite sieht bei 1.440 Pixeln richtig aus. Bei 320 Pixeln ist ihre lange übersetzte Überschrift abgeschnitten; bei 200 % Textgröße ist ein FAQ-Bedienelement unzugänglich.
Fotogröße begrenzen, schmalere Spalten und Textumbruch ermöglichen. Die Aufgabe bei 320, 390, 768 und 1.440 Pixeln mit Textvergrößerung und Tastatur wiederholen. Verbleibende Fehler dokumentieren und nach Korrektur erneut prüfen.
Abnahmekriterien
- Informationen und Bedienelemente sind bei repräsentativen Breiten und Sprachen lesbar.
- Textvergrößerung und Tastatur erlauben weiterhin den Abschluss der Aufgabe.
- Version, Browser, Sprache und Ergebnisse der Wiederholungsprüfung sind dokumentiert.
Praktische Fragen
Reicht ein Screenshot?
Nein. Er zeigt einen Zustand. Prüfen Sie auch lange Inhalte, Tastaturbedienung sowie geöffnete, gefilterte und fehlerhafte Zustände.
Gibt es eine universelle Schriftgröße?
Nein. Prüfen Sie Lesbarkeit, Zeilenlänge, Zoom und Kontrast. Schriftgröße allein garantiert weder Zugänglichkeit noch visuelle Ausgewogenheit.
Wie sind Core Web Vitals zu lesen?
Die Schwellen für gute Erfahrungen sind LCP ≤ 2,5 s, INP ≤ 200 ms und CLS ≤ 0,1 am 75. Perzentil. Sie messen Laden, Interaktion und Stabilität, ersetzen aber keine visuelle Prüfung.
Braucht jedes mögliche Gerät einen Screenshot?
Wichtige Seitenfamilien, sinnvolle Aufgaben und Browser mit beobachteten Unterschieden auswählen. Grenzen der Abdeckung festhalten: Einige Screenshots belegen nicht alle Geräte.
Wie werden Darstellungsfehler priorisiert?
Zuerst blockierte Aufgaben, verborgene Daten und Lesbarkeit beheben. Danach Proportionen, Ausrichtung und Abstände verbessern und die Funktion anderer Seiten prüfen.