Zum Inhalt springen

Touch Gesten

oder auch Touch Gestures

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 23.09.2026

Touch Gesten sind Fingerbewegungen auf einem Touchscreen, die der Browser als Bedienbefehl auswertet: Tippen, langes Drücken, Wischen, Ziehen und das Auf- und Zuziehen mit zwei Fingern. Einen Teil davon hat das Betriebssystem bereits für sich belegt, den Rest kann eine Website nutzen. Wer eine Geste belegt, übernimmt damit die Pflicht, dieselbe Funktion auch ohne sie anzubieten.

Touch Gesten

Fingerbewegungen auf einem Touchscreen, die der Browser als Bedienbefehl auswertet, vom einfachen Tippen bis zum Wischen mit zwei Fingern.
Beispiel: „Die Galerie lässt sich wischen, und daneben stehen zwei Pfeiltasten für alle, die das nicht tun.“

Auch: Touch Gestures. Im Code erscheinen sie als Pointer Events, die Maus, Stift und Finger über dieselbe Schnittstelle abbilden.

Abgrenzung: Der Hover-Zustand hat auf dem Touchscreen keine Entsprechung. Was am Rechner beim Überfahren mit der Maus erscheint, muss auf dem Telefon sichtbar sein oder beim ersten Antippen auftauchen.

Verlässlich bekannt sind nur wenige Gesten

Auf jedem Telefon funktionieren vier Gesten ohne Erklärung: Tippen als Ersatz für den Klick, Wischen zum Scrollen und Blättern, langes Drücken für ein Kontextmenü und das Auf- und Zuziehen mit zwei Fingern zum Vergrößern. Alles darüber hinaus stammt aus einzelnen Apps und wird auf einer Website niemand von allein ausprobieren.

Sechs Felder in zwei Reihen. Jedes zeigt eine Geste schematisch: Tippen als einzelner Punkt, langes Drücken als Punkt mit Ring, Wischen und Ziehen als Punkt mit Richtungspfeil, Spreizen und Zusammenführen als zwei Punkte mit gegenläufigen Pfeilen.
Wer eigene Gesten erfindet, muss sie erklären. Diese hier bringt der Besucher schon mit.

Dazu kommt, dass das Betriebssystem Teile der Fläche beansprucht. Ein Wischen vom linken Displayrand bedeutet unter iOS „zurück“, ein Zug vom unteren Rand schließt die App. Ein Karussell, dessen Griff dort liegt, konkurriert mit dem System und verliert.

Jede Geste braucht einen zweiten Weg

Die WCAG halten das als Anforderung fest. Erfolgskriterium 2.5.1 Pointer Gestures (Stufe A) verlangt, dass jede Funktion mit einer pfadbasierten oder mehrfingrigen Geste auch mit einem einzelnen Zeiger bedienbar ist. Pfadbasiert heißt, dass Richtung und Verlauf der Bewegung zählen, etwa beim Blättern durch eine Galerie; mehrfingrig sind das Auf- und Zuziehen und jedes Tippen mit zwei Fingern. Ausgenommen ist nur, wo die Geste selbst der Zweck ist, etwa bei einer Unterschrift.

In der Praxis heißt das: Neben das Wischkarussell gehören zwei Schaltflächen, neben die Karte mit Zwei-Finger-Zoom zwei Knöpfe für Plus und Minus. Wir bauen diese Alternativen gleich mit ein, weil sie sich nachträglich nur mit Umbau ergänzen lassen.

Sichtbarkeit und Trefferfläche entscheiden

Der häufigste Fehler ist die unsichtbare Geste. Ein Inhalt, der sich seitlich wischen lässt, muss das zeigen, etwa durch einen angeschnittenen nächsten Eintrag am Rand. Ohne diesen Hinweis bleibt der zweite Teil des Inhalts für die meisten Besucher unentdeckt.

Der andere Punkt ist die Trefferfläche. Die WCAG 2.2 setzen in Erfolgskriterium 2.5.8 Target Size (Minimum, Stufe AA) 24 mal 24 CSS-Pixel als Untergrenze an, Apple nennt in den Human Interface Guidelines 44 mal 44 Punkt. Wir arbeiten mit dem größeren Wert, weil ein Daumen ungenauer trifft als ein Mauszeiger.

Siehe auch:

Bottom Sheet

Bedienfläche, die vom unteren Bildschirmrand über den Seiteninhalt fährt und dort in Reichweite des Daumens stehen bleibt.

#Responsive Design

Off-Canvas-Navigation

Navigation, die außerhalb des sichtbaren Bereichs liegt und auf Knopfdruck von der Seite über den Inhalt geschoben wird.

#Responsive Design

Mobile Usability

Maß dafür, wie gut sich eine Website auf einem Telefon bedienen lässt, von der Lesbarkeit bis zur Größe der Schaltflächen.

#Responsive Design

Zoom-Verhalten auf Mobilgeräten

Frage, ob sich eine Seite auf dem Telefon mit zwei Fingern vergrößern lässt, und wie das Meta-Viewport-Tag darüber entscheidet.

#Responsive Design