Multi-Touch Gesten sind Gesten, bei denen zwei oder mehr Finger gleichzeitig auf dem Display liegen und gemeinsam einen Befehl ergeben. Das Auf- und Zuziehen zum Vergrößern ist die einzige davon, die jeder Besucher mitbringt. Technisch meldet der Browser jeden Berührpunkt einzeln; dass aus zwei Punkten mit wachsendem Abstand ein Zoom wird, entscheidet entweder das Betriebssystem oder dein eigener Code.
- Multi-Touch Gesten
Gesten, bei denen zwei oder mehr Finger gleichzeitig auf dem Display liegen und zusammen einen Befehl ergeben.
Beispiel: „Die Karte reagiert auf das Auf- und Zuziehen mit zwei Fingern, daneben liegen ein Plus- und ein Minus-Knopf.“Auch: Mehrfingergesten. Die WCAG sprechen von „multipoint gestures“.
Abgrenzung: Der Eintrag Touch Gesten gibt den Überblick über alle Gesten, Gestensteuerung behandelt das Bedienkonzept. Hier geht es nur um die Fälle mit mehr als einem Finger.
Im Browser kommt davon wenig an
Verlässlich funktioniert eine einzige Mehrfingergeste: das Auf- und Zuziehen, das die Seite oder eine Karte vergrößert. Drehen mit zwei Fingern kennt das Web nur in Kartenbibliotheken und auf Canvas-Flächen, und ein Tippen mit zwei Fingern ist im Browser ohne Bedeutung.
Die Screenreader auf Telefonen belegen mehrfingrige Gesten für ihre eigene Steuerung. Wer sie auf einer Website gegenläufig verwendet, nimmt Besuchern mit VoiceOver oder TalkBack genau die Bedienung weg, auf die sie angewiesen sind. Eingebettete Karten nutzen den Umstand umgekehrt: Sie verlangen zwei Finger zum Verschieben, damit die Seite beim Scrollen nicht in der Karte hängen bleibt.
Wie der Browser mehrere Finger meldet
Pointer Events bilden Maus, Stift und Finger auf dieselbe Schnittstelle ab. Jeder Finger löst ein eigenes pointerdown-Ereignis mit eigener pointerId aus, und deine Auswertung muss die aktiven Punkte selbst mitführen. Der Abstand zwischen zwei Punkten ergibt den Zoomfaktor, der Winkel zwischen ihnen die Drehung.
Was der Browser behält, steuerst du über die CSS-Eigenschaft touch-action. Der Wert none gibt dir die volle Auswertung und nimmt dem Besucher das Zoomen weg. Feiner arbeitet die Kombination einzelner Werte:
.karussell {
/* waagerechtes Wischen wertet das Skript aus, Zoomen behält der Browser */
touch-action: pan-y pinch-zoom;
}Ohne Ein-Finger-Weg wird es eine Barriere
Erfolgskriterium 2.5.1 Pointer Gestures der WCAG steht auf Stufe A und nennt mehrfingrige Gesten ausdrücklich. Jede Funktion, die zwei Finger verlangt, braucht einen zweiten Weg mit einem einzigen Zeiger. Bei einer Karte sind das zwei Knöpfe für Plus und Minus, bei einer Bildansicht ein Regler oder ein Doppeltipp.
Unsere Empfehlung geht einen Schritt weiter: Baue Mehrfingergesten nur als Beschleuniger für Leute, die sie ohnehin kennen. Als einziger Zugang zu einer Funktion sind sie im Web zu unsicher, weil du weder das Gerät noch die Hilfstechnik des Besuchers kennst.