# Testen Sie den Trefferbereich, nicht nur die Schaltflächengrafik

> Machen Sie die Spielsteuerung einfacher zu bedienen, indem Sie visuelle Grafiken von interaktiven Grenzen trennen und Größe, Abstand und Überlappung auf Touch-Geräten überprüfen.

- URL: https://oneshotgems.ai/de/topics/game-touch-targets
- Kategorie: Für Spieleentwickler
- Typ: Ratgeber
- Aktualisiert: 5. Oktober 2026

Ein Steuerelement kann groß aussehen, während sein tatsächlicher Trefferbereich nur einen winzigen Teil des Bildmaterials darstellt. Definieren Sie in einem Browserspiel die interaktiven Grenzen bewusst und testen Sie sie mit dem Finger, nicht nur mit einem präzisen Mauszeiger. Welches Ziel das richtige ist, hängt von seiner Rolle, seinem Abstand und der Bewegung in der Umgebung ab. Klare Trefferbereiche reduzieren jedoch versehentliche Fehlschüsse und erleichtern die Überlegung bei Eingaben.

## 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

**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.

## Folge deiner Neugier

- [Touch-Steuerung für Webspiele gestalten](https://oneshotgems.ai/de/topics/touch-controls-for-web-games): Plane die Touch-Bedienung mit Blick auf Browsergesten, gut erkennbare Rückmeldungen und einen klar verwalteten Zeigerzustand, damit das Spiel auf Smartphones vorhersehbar reagiert.
- [Responsive Layouts für Browserspiele erstellen](https://oneshotgems.ai/de/topics/responsive-game-layouts): Passen Sie eine Spieloberfläche an ihren Container an, ohne den Simulationsstatus an die Bildschirmabmessungen zu binden, und testen Sie das Layout in wechselnden Ansichtsfenstern.
- [Entwerfen Sie ein Handyspiel zum Spielen mit einem Daumen](https://oneshotgems.ai/de/topics/one-thumb-mobile-game-design): Reduzieren Sie das Ein-Daumen-Spiel auf einen praktikablen Aktionssatz, berücksichtigen Sie die Handposition und die Bildschirmverdeckung und testen Sie dann die Mechanik in realistischen Griffen.

## Weiterlesen

- [W3C: Zielgröße (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN: Zeigerereignisse](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
Kanonische Seite: https://oneshotgems.ai/de/topics/game-touch-targets