Trennen Sie die sichtbare Form vom Trefferbereich
Lassen Sie bei einem kleinen Symbol wie einer Pause-Schaltfläche den anklickbaren Container über das gemalte Symbol hinausragen. Halten Sie benachbarte Aktionen so weit voneinander entfernt, dass ein Finger nicht beide zweideutig aktiviert. Zeichnen Sie in einem Canvas-Spiel das Objekt und berechnen Sie seinen Trefferbereich anhand derselben Layoutdaten. Das Duplizieren von Koordinaten in separaten Codepfaden führt zu Abweichungen.
WCAG 2.2, Erfolgskriterium 2.5.8, legt eine Mindestgröße von 24 × 24 CSS-Pixeln fest und definiert Ausnahmen, unter anderem für ausreichenden Abstand und gleichwertige Bedienelemente. Behandle das als Barrierefreiheitsanforderung, nicht als Gestaltungsobergrenze: Ein bewegliches Ziel oder eine zentrale Aktion kann mehr Fläche benötigen. Verlasse dich nicht allein auf Farbe oder einen schwachen Rahmen, um den berührungsempfindlichen Bereich zu kennzeichnen.
Trefferbereiche auf echten Bildschirmgrößen prüfen
Teste Berührungen nahe jeder Kante und Ecke, zwischen benachbarten Bedienelementen und bei skalierter Spielfläche. Prüfe, ob das sichtbare Steuerelement, der interaktive DOM-Bereich und die Spielweltkoordinaten dieselbe Aktion bezeichnen. Bei kleinen bewegten Objekten kann der Trefferbereich größer als die Grafik sein, solange genügend Abstand zu Gefahren bleibt.
Teste unterschiedliche Viewportgrößen per Touch. Mit der Maus lässt sich ein Punkt präzise treffen, den ein Finger möglicherweise verfehlt. Wandle Zeigerpositionen in das Koordinatensystem der Spielfläche um und prüfe die Werte nach einer Größenänderung. Die Erläuterung des W3C beschreibt das Kriterium und seine Ausnahmen.
Fragen zu Game-Touch-Zielgröße
Muss jedes Spielziel mindestens 24 Pixel groß sein?
WCAG 2.2, Erfolgskriterium 2.5.8, verlangt für Zeigereingaben mindestens 24 × 24 CSS-Pixel, sieht aber Ausnahmen vor. Prüfe das Kriterium und wähle bei Bedarf größere Trefferbereiche.
Darf der interaktive Bereich größer sein als die Grafik?
Ja. Ein um die Grafik erweiterter Trefferbereich kann ein kleines Symbol leichter bedienbar machen, solange nahe Bedienelemente unterscheidbar bleiben und vorhersehbar reagieren.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden