So verhindern Sie, dass Tastatursteuerungen ein mausgesteuertes Schiebepuzzle stören
Wenn Sie ein browserbasiertes Schiebepuzzle als Hilfsmittel für ein Tabletop-Abenteuer entwickeln, sollten Mauszieh- und Tastaturbewegungen auf denselben Puzzle-Zustand wirken, während Tastaturkürzel auf das Puzzle beschränkt bleiben. Die wichtigsten Kontrollpunkte sind Fokus, Ereignisbehandlung und der Abschluss des Ziehvorgangs: Ein Tastendruck in einem Textfeld darf kein Puzzleteil verschieben, und ein Ziehvorgang darf weder unterbrochen werden noch verloren gehen, wenn der Zeiger eine Kachelkante überquert.
Beginnen Sie damit, die Ursache für unerwartete Puzzle-Bewegungen zu ermitteln
Wenn ein Puzzle während einer Mausaktion auf eine Pfeiltaste reagiert, liegt die Ursache oft in einem zu weit gefassten Tastatur-Listener. Ein an document oder window angehängter Handler kann Pfeiltasten auch dann abfangen, wenn die spielende Person gerade in ein Hinweisfeld tippt, ein Menü nutzt oder mit einem anderen Bedienelement interagiert. Er kann zudem zeitgleich mit der Puzzle-Änderung Standard-Browserverhalten auslösen, etwa das Scrollen.
Reproduzieren Sie das Problem anhand einer kurzen Checkliste: Klicken Sie auf eine Kachel und ziehen Sie sie; ziehen Sie über den Rand des Puzzles hinaus; drücken Sie eine Pfeiltaste, während das Puzzle fokussiert ist; drücken Sie sie dann, während ein Hinweisfeld, ein Button oder ein Menü fokussiert ist. Achten Sie darauf, ob sich das Spielfeld ändert, die Seite scrollt, der Fokus wechselt oder der Ziehvorgang abbricht. Anhand dieser Beobachtungen lässt sich feststellen, ob es sich um ein Problem mit dem Puzzle-Handler, dem Zeiger-Tracking oder dem Standardverhalten des Browsers handelt.
Geben Sie dem Puzzle einen eindeutigen Fokusbereich
Behandeln Sie das Spielfeld als Steuerelement mit einem klaren Einstiegspunkt für die Tastatur. Verwenden Sie einen fokussierbaren Spielfeld-Container und verarbeiten Sie Puzzle-Tasten nur dann, wenn dieses Spielfeld aktiv ist oder der Fokus auf einer zum Spielfeld gehörenden Kachel liegt. Platzieren Sie unabhängige Steuerelemente wie Hinweis-Buttons und Textfelder außerhalb dieses Tastenverarbeitungsbereichs. Machen Sie die Fokusposition sichtbar, damit Nutzende erkennen können, wann das Spielfeld reagieren wird.
Überprüfen Sie das Ereignisziel (Event-Target), bevor Sie eine Taste interpretieren. Befindet sich der Fokus in einem Eingabefeld, einem Textbereich, einem bearbeitbaren Element oder auf einem separaten Button, ignorieren Sie die Taste. Bei einem Tool für kooperative Abenteuerspiele ist dies besonders wichtig, wenn eine Person eine Rune, einen Namen oder einen Hinweis eingibt, während eine andere Person das Puzzle bedient: Das Eintippen darf nicht zu unbeabsichtigten Kachelbewegungen führen.
Die Bedienung per Tastatur muss weiterhin gewährleistet sein. Die W3C-Richtlinien besagen, dass Funktionen nach Möglichkeit über eine Tastaturschnittstelle zugänglich sein sollten, und nennen das Bewegen von Objekten an eine Position als eine Aktion, die per Tastatur bedient werden kann. Grenzen Sie die Tasten präzise ein, anstatt sie ganz zu entfernen. W3C: Understanding Success Criterion 2.1.1: Keyboard
Trennen Sie Puzzle-Befehle von Standardaktionen des Browsers
Wählen Sie für das Spielfeld eine kleine, dokumentierte Auswahl an Tasten aus, z. B. die Pfeiltasten, wenn das Spielfeld fokussiert ist. Stellen Sie im Handler zunächst sicher, dass die gedrückte Taste vom Puzzle verwendet wird und das Spielfeld das aktive Ziel ist. Führen Sie erst dann den Spielzug aus und unterdrücken Sie, falls erforderlich, die Standardaktion des Browsers für diese Taste. Vermeiden Sie es, Tasteneingaben global zu blockieren: Nutzende müssen möglicherweise normal tippen, im Browser navigieren und Steuerelemente außerhalb des Puzzles bedienen können.
preventDefault() hebt die Standardaktion des Browsers auf, sofern das Ereignis abbrechbar ist, verhindert jedoch nicht, dass das Ereignis an andere Handler weitergereicht wird. Das bedeutet, dass es zwar das Scrollen der Seite verhindern kann, aber einen zweiten Listener, der ebenfalls eine Kachel bewegt, nicht neutralisiert. Finden und beschränken Sie den Handler, der den Spielstatus ändert; verwenden Sie keine pauschale Unterdrückung als Ersatz für eine klare Ereigniszuständigkeit. MDN: Event: preventDefault() method
Gewährleisten Sie ein stabiles Ziehen per Zeiger über das gesamte Spielfeld
Verfolgen Sie bei einer Ziehinteraktion einen einzelnen aktiven Zeiger vom einleitenden Klick bzw. Druck bis zum Loslassen oder Abbruch. Zeigerereignisse bieten dafür pointerdown, pointermove, pointerup und pointercancel; die Zeigererfassung (Pointer Capture) sorgt dafür, dass nachfolgende Ereignisse an das Spielfeld gerichtet bleiben, selbst wenn der Zeiger dessen ursprünglichen Trefferbereich verlässt. Setzen Sie den aktiven Ziehvorgang sowohl bei pointerup als auch bei pointercancel zurück, damit eine unterbrochene Geste das Puzzle nicht in einem hängenden Ziehzustand hinterlässt. MDN: Pointer events
Vermeiden Sie es, die gezogene Kachel so neu aufzubauen oder zu ersetzen, dass ihr Zeiger-Tracking abreißt. Wenn die Benutzeroberfläche während eines Ziehvorgangs ein Element im DOM verschiebt, sollte die Zeigererfassung laut MDN nach dieser Verschiebung neu gesetzt werden. Legen Sie fest, was passiert, wenn der Zeiger über einer ungültigen Position losgelassen wird: Bei einem Schiebepuzzle ist es verständlicher, die Kachel an ihre vorherige Position zurückzusetzen oder sie auf einer gültigen Position einrasten zu lassen, anstatt unbemerkt andere Kacheln zu verschieben.
Ermöglichen Sie dieselbe Bewegung auch ohne Ziehen
Ein Puzzle kann Maus-, Tastatur- und einfache Zeigereingaben gleichzeitig unterstützen. Beispielsweise könnte das Klicken oder Antippen einer an das leere Feld angrenzenden Kachel diese verschieben; das Ziehen der Kachel könnte eine optionale Geste zur direkten Bearbeitung bleiben; und Pfeiltasten bei fokussiertem Spielfeld könnten die Tastaturbedienung übernehmen. Diese Eingaben sollten alle dieselbe Logik zur Zugvalidierung aufrufen, damit ein Zug unabhängig von der Art der Anforderung konsistent erlaubt oder abgelehnt wird.
Daraus ergibt sich auch eine nützliche Überprüfung für das Design: Kann eine Person das Puzzle nur durch Klicken oder Antippen ohne Ziehen lösen? Die WCAG 2.2-Richtlinien des W3C behandeln den Tastaturzugang und eine Einzeiger-Alternative zum Ziehen als getrennte Aspekte. Zu den Praxisbeispielen gehört das Ersetzen einer Ziehbewegung durch Klicks auf Richtungssteuerungen. Eine reine Tastaturalternative stellt für sich genommen noch keine zeigerbasierte Alternative dar. W3C: Understanding Success Criterion 2.5.7: Dragging Movements
Bei einem Schiebepuzzle ist das wiederholte Anklicken jeweils einer benachbarten Kachel oft eine naheliegende Lösung, da die Grundregel der angrenzenden Züge erhalten bleibt. Sollte diese Bedienung unklar sein, können sichtbare Richtungstasten die möglichen Bewegungen verdeutlichen. Die G219-Technik des W3C enthält Beispiele für Einzeiger-Bedienelemente, die dieselbe Aktion ohne Ziehen ausführen. W3C: G219: Ensuring that an alternative is available for dragging movements that operate on content
Mit einer kurzen Eingabematrix testen
Bevor Sie das Puzzle in einer Spielrunde einsetzen, sollten Sie jeden Eingabepfad mit demselben Spielfeld-Layout und Anfangszustand durchgehen. Stellen Sie sicher, dass ein gültiger Spielzug das Spielfeld genau einmal aktualisiert, ein ungültiger Spielzug es unverändert lässt und nicht beteiligte Steuerelemente ihr normales Verhalten beibehalten.
Maus: Ziehen Sie eine regelkonforme Kachel, lassen Sie sie außerhalb des Feldes los und versuchen Sie einen unzulässigen Spielzug. Stellen Sie sicher, dass das Spielfeld den Ziehvorgang nicht verliert und sich nicht unerwartet verändert.
Tastatur: Fokussieren Sie das Spielfeld, nutzen Sie jede unterstützte Pfeilrichtung, setzen Sie den Fokus dann auf ein Textfeld und tippen Sie etwas ein. Vergewissern Sie sich, dass nur bei fokussiertem Spielfeld Kacheln bewegt werden und die Texteingabe weder scrollt noch das Spielfeld verändert.
Zeiger ohne Ziehen: Klicken oder tippen Sie auf eine regelkonforme benachbarte Kachel. Vergewissern Sie sich, dass dies dieselbe Bewegung auslöst wie die anderen Eingabemethoden.
Unterbrechung: Brechen Sie einen Ziehvorgang ab, lassen Sie davon ab und beginnen Sie danach einen neuen. Überprüfen Sie, dass keine veraltete Auswahl zurückbleibt.
Wenn ein Test fehlschlägt, überprüfen Sie zuerst die spezifischste relevante Ebene: das Ereignisziel und den Fokusstatus für das Tastaturverhalten; Pointer Capture und Bereinigungslogik für abgebrochene Ziehvorgänge; sowie die gemeinsame Zugvalidierung bei inkonsistenten Spielregeln. Dieser Ablauf bietet Ihnen einen konkreten Weg, das Problem einzugrenzen, ohne das Abenteuer-Requisit in ein allgemeines Tutorial für Bedienelemente zu verwandeln.