Responsive Design ist der Standard jeder mobilen Casino-Website, aber es sagt nichts darüber aus, ob ein Formular bei starker Vergrößerung noch bedienbar bleibt. Wer die Winningz-Web-App bei 200 Prozent Zoom testet, merkt schnell: Erst wenn Ein- und Auszahlungsbuttons ohne horizontales Scrollen erreichbar bleiben, ist WCAG 1.4.10 Reflow erfüllt. Dieser Leitfaden zeigt, wie Redaktion, QA und Produktteam den Reflow-Test methodisch durchführen und typische Fehlerquellen in Kassenformularen erkennen.
Warum Reflow bei Ein- und Auszahlungen über die reine Lesbarkeit hinausgeht
WCAG 1.4.10 verlangt, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne horizontales Scrollen dargestellt werden können, was dem 400-Prozent-Zoom auf einem 1280 Pixel breiten Desktop entspricht. Für Casinos ist das kein akademisches Kriterium: Die Kasse ist der Punkt, an dem Nutzer Geld bewegen, und ein abgeschnittener “Einzahlen”-Button ist kein Schönheitsfehler, sondern ein Abbruchgrund. Ein Nutzer, der bei 200 Prozent Zoom den Bestätigungsbutton nicht findet, gibt auf oder wechselt das Gerät.
Der Unterschied zwischen Responsive Design und Reflow-Barrierefreiheit liegt in der Testtiefe. Responsive Design prüft das Layout bei Standard-Zoomstufen und gängigen Viewport-Breiten. Reflow prüft das Layout unter der Annahme, dass der Nutzer die Schrift deutlich vergrößert, weil er sonst nichts lesen kann. Ein zweispaltiges Kassenformular kann bei 100 Prozent Zoom tadellos aussehen und bei 200 Prozent die rechte Spalte außerhalb des Viewports schieben.
Die mobile Website von Winningz nutzt Responsive Design und SSL-Verschlüsselung mit 256 Bit, was die technische Grundlage bildet. Ob die Kasse bei Vergrößerung bedienbar bleibt, entscheidet sich jedoch erst in der Detailprüfung der Formularelemente, nicht im Framework.
Der Reflow-Test in fünf Schritten: So prüfen Redaktion und QA die Kasse
Der Test läuft am zuverlässigsten auf einem echten Smartphone, ergänzt durch eine Desktop-Prüfung im Browser. Die folgende Reihenfolge hat sich bewährt, weil sie zuerst den kritischen Pfad abdeckt und danach die Randfälle.
- Viewport auf 320 CSS-Pixel setzen: Im Chrome DevTools den Responsive-Modus aktivieren und die Breite auf 320 Pixel stellen. Das simuliert den kritischen Reflow-Fall nach WCAG 1.4.10 und entspricht dem 200-Prozent-Zoom auf einem typischen Smartphone-Display.
- Zoomstufe 200 Prozent erzwingen: Auf dem Desktop im Browser-Menü auf 200 Prozent zoomen, auf dem iPhone die Textgröße in den Bedienungshilfen erhöhen. Der Test zählt nur, wenn beide Wege zum gleichen Ergebnis führen.
- Kassenpfad vollständig durchlaufen: Einzahlungsformular öffnen, Betrag eingeben, Zahlungsmethode wählen, Bestätigungsbutton suchen. Danach das Auszahlungsformular mit denselben Schritten. Jeder Button muss ohne seitliches Wischen sichtbar und antippbar sein.
- Horizontales Scrollen protokollieren: Tritt an irgendeiner Stelle ein horizontaler Scrollbalken auf oder ragt ein Element über den Viewport hinaus, ist das ein Reflow-Verstoß. Screenshot mit sichtbarer Viewport-Breite und Elementname festhalten.
- Gegenprobe mit Endgerät erkannt: Prüfen, ob die Seite das Endgerät korrekt erkennt und die mobile Ansicht lädt. Ein falsch erkannter User-Agent kann eine Desktop-Ansicht auf ein schmales Display zwingen und den gesamten Test verfälschen.
Wer den Test nur einmal durchführt, übersieht Zustände. Fehlermeldungen im Formular, Ladeindikatoren nach dem Absenden und Bestätigungsdialoge ändern die Layoutbreite oft stärker als das Grundformular. Diese Zustände gehören in die Prüfliste, sonst bleibt der Reflow-Test unvollständig.
Typische Reflow-Fallen in mobilen Casino-Websites
Die häufigsten Verstöße entstehen nicht durch fehlendes Responsive Design, sondern durch Komponenten, die ihre Mindestbreite erzwingen. Dazu zählen Tabellen mit Zahlungsmethoden, breite Fortschrittsbalken und Buttons mit langen deutschen Labels wie “Auszahlung jetzt bestätigen”. Bei 320 Pixeln Breite bleibt für solche Elemente kein Raum, wenn sie nicht umbrechen dürfen.
Ein zweiter Klassiker sind feste Pixelbreiten in Eingabefeldern. Ein Betragsfeld mit 280 Pixel Breite plus Innenabstand und Rahmen sprengt den Viewport, sobald die Schrift größer wird. Moderne CSS-Lösungen setzen hier auf relative Einheiten und erlauben dem Button, über die volle Breite zu gehen. Der Button muss nicht schön aussehen, er muss erreichbar sein.
Ein dritter Fehler betrifft Overlays. Dialoge für Sofortzahlung oder Guthaben-Bestätigung werden häufig mit fester Breite zentriert und schneiden bei Vergrößerung den Schließen-Button ab. Wer den Dialog nicht schließen kann, sitzt fest. Ein Reflow-Test, der nur das Hauptformular prüft, übersieht genau diese Sackgassen.
Live-Tische und Spielansichten als Sonderfall
Live-Tische und Spielansichten folgen oft anderen Layoutregeln als die Kasse, weil der Spieltisch ein festes Seitenverhältnis braucht. WCAG 1.4.10 nimmt Inhalte aus, die ein bestimmtes Layout erfordern, etwa Karten oder Spielfelder. Für die Kasse gilt diese Ausnahme nicht. Der Test sollte deshalb klar trennen: Spielansichten dürfen scrollen, Ein- und Auszahlungsbuttons nicht.
Winningz mobil spielen ohne App: Was der Browser leistet und wo Grenzen liegen
Winningz bietet keine App im Google Play Store und keine App im Apple App Store. Das ist kein Nachteil, sondern eine bewusste Entscheidung, die den Reflow-Test überhaupt erst relevant macht. Die Winningz App läuft mobil als mobile Website im Browser, erreichbar über Safari auf dem iPhone, Chrome auf Android und Firefox auf beiden Plattformen. Nutzer können eine Homescreen-Verknüpfung anlegen, die das Casino im Vollbildmodus öffnet und damit die Adressleiste ausblendet.
Der Vollbildmodus verändert die Reflow-Rechnung. Ohne Adressleiste steht mehr Höhe zur Verfügung, die Breite bleibt jedoch identisch. Für den 320-Pixel-Test bedeutet das: Der Homescreen-Shortcut ist kein Freifahrtschein, er verschiebt nur das Verhältnis von Breite zu Höhe. Die Verknüpfung zum Startbildschirm ist trotzdem praktisch, weil sie den Zugriff beschleunigt und die Seite wie eine native App wirken lässt.
Winningz stellt keine APK-Datei bereit, was den Sicherheitsrisiko-Download umgeht, den viele Nutzer bei Casino-Apps aus unbekannten Quellen eingehen. Wer den Browser nutzt, bekommt Updates automatisch und muss keine Installationsrechte vergeben. Das Konto gilt plattformübergreifend für Desktop und Handy, Guthaben und Ein- und Auszahlungen sind synchron. Wer am Desktop beginnt und auf dem Handy weiterspielt, findet dasselbe Guthaben vor.
Bonus Codes lassen sich am Handy im Browser einlösen, ohne Umweg über eine App. Für den Reflow-Test heißt das: Das Bonusformular gehört in dieselbe Prüfung wie die Kasse, weil es dieselben Fehlerquellen hat. Ein abgeschnittener “Bonus einlösen”-Button ist genauso blockierend wie ein fehlender Einzahlungsbutton.
Wer den Reflow-Test für Winningz durchführt, sollte die Ergebnisse dokumentieren und mit den offiziellen Kanälen abgleichen. Winningz kommuniziert Updates über X (Twitter) unter dem Handle Winningz_DE, wo auch Hinweise zu Wartungsfenstern erscheinen. Ein Test während eines Wartungsfensters liefert falsche Ergebnisse, weil Formulare deaktiviert sein können.
Die Prüfung sollte außerdem auf mehreren Endgeräten laufen: ein älteres Android-Gerät mit kleiner Auflösung, ein aktuelles iPhone und ein Desktop-Browser im Zoom-Modus. Die Ergebnisse weichen häufig voneinander ab, weil Schriftgrößen und Standard-Zoomstufen unterschiedlich ausfallen. Wer nur auf einem Gerät testet, bekommt ein falsches Sicherheitsgefühl.
Zum Abschluss der Prüfung lohnt der Blick auf die Kontoübersicht: Bleiben Guthaben, Transaktionshistorie und Auszahlungsstatus bei 200 Prozent Zoom lesbar, ohne dass Zahlen abgeschnitten werden? Ein Guthaben von 1.234,56 Euro, das als “1.234,5” dargestellt wird, ist ein Reflow-Fehler mit finanzieller Konsequenz. Der Test endet nicht beim Button, sondern bei der Zahl, die der Nutzer bestätigen soll.
Für die praktische Umsetzung reicht ein festes Prüfprotokoll: Viewport auf 320 Pixel, Zoom auf 200 Prozent, Kassenpfad vollständig durchlaufen, horizontales Scrollen an jeder Stelle notieren, Fehler mit Screenshot und Elementname an das Entwicklungsteam geben. Wer diesen Zyklus nach jedem Release wiederholt, hält die Kasse dauerhaft bedienbar und erfüllt WCAG 1.4.10 nicht als einmalige Prüfung, sondern als laufende Anforderung.