Come evitare che i controlli da tastiera interferiscano con lo scorrimento di un puzzle basato su mouse
Se stai creando un puzzle a scorrimento basato su browser come supporto per le tue avventure da tavolo, fai in modo che il trascinamento del mouse e i movimenti da tastiera agiscano sullo stesso stato del gioco, limitando al contempo le scorciatoie da tastiera all'area del puzzle. I controlli chiave riguardano il focus, la gestione degli eventi e il completamento del trascinamento: la pressione di un tasto in un campo di testo non deve spostare una tessera, e il trascinamento non deve essere interrotto o perso quando il puntatore oltrepassa il bordo di una tessera.
Inizia identificando cosa sta muovendo il puzzle in modo imprevisto
Quando un puzzle reagisce a un tasto freccia durante un'operazione con il mouse, la causa è spesso un listener da tastiera con un raggio d'azione troppo ampio. Un gestore collegato a document o window può intercettare i tasti freccia anche quando il giocatore sta scrivendo in un campo per gli indizi, navigando in un menu o interagendo con un altro controllo. Potrebbe inoltre attivare comportamenti predefiniti del browser, come lo scorrimento della pagina, nello stesso momento in cui modifica il puzzle.
Riproduci il problema con una breve checklist: fai clic su una tessera e trascinala; trascinala oltre il perimetro del puzzle; premi un tasto freccia mentre il puzzle ha il focus; quindi premine uno mentre il focus si trova su un campo di input per gli indizi, un pulsante o un menu. Prendi nota se la griglia cambia, se la pagina scorre, se il focus si sposta o se il trascinamento si interrompe. Queste osservazioni consentono di distinguere un problema nel gestore del puzzle dal tracciamento del puntatore o dal comportamento predefinito del browser.
Definisci un limite di focus esplicito per il puzzle
Tratta il tabellone come un controllo con un punto di accesso da tastiera ben definito. Utilizza un contenitore per il tabellone che possa ricevere il focus e gestisci i tasti del puzzle solo quando tale tabellone è attivo, oppure quando il focus è su una tessera appartenente al tabellone stesso. Mantieni i controlli non correlati, come i pulsanti per i suggerimenti e i campi di testo, all'esterno di questo perimetro di gestione dei tasti. Rendi visibile la posizione del focus affinché il giocatore possa capire quando il tabellone risponderà ai comandi.
Verifica l'elemento target dell'evento prima di interpretare la pressione di un tasto. Se il focus si trova in un campo di input, in un'area di testo, in un elemento modificabile o su un pulsante separato, non intervenire sul tasto. Per uno strumento di avventura cooperativo, questo aspetto è fondamentale quando un giocatore inserisce una runa, un nome o un indizio mentre un'altra persona manovra il puzzle: la digitazione non deve trasformarsi nello spostamento accidentale di una tessera.
I comandi da tastiera devono comunque continuare a funzionare. Le linee guida del W3C spiegano che le funzionalità dovrebbero essere accessibili tramite un'interfaccia a tastiera ove possibile, e indicano lo spostamento di oggetti verso una posizione specifica come un'azione gestibile da tastiera. Limita con attenzione l'ambito di validità dei tasti anziché rimuoverli del tutto. W3C: Comprendere il Criterio di Successo 2.1.1: Tastiera
Separa i comandi del puzzle dalle azioni predefinite del browser
Seleziona un set limitato e documentato di tasti per il tabellone, come i tasti freccia quando il tabellone ha il focus. Nel gestore, verifica innanzitutto che il tasto premuto sia effettivamente utilizzato dal puzzle e che il tabellone sia il target attivo. Solo a quel punto applica la mossa e, se necessario, annulla l'azione predefinita del browser per quel tasto. Evita di sopprimere indiscriminatamente qualsiasi tasto a livello globale: i giocatori potrebbero aver bisogno della digitazione normale, della navigazione del browser e di controlli esterni al puzzle.
Il metodo preventDefault() annulla l'azione predefinita del browser quando l'evento è annullabile, ma non impedisce la propagazione dell'evento ad altri gestori. Ciò significa che può bloccare lo scorrimento della pagina senza però risolvere il problema di un secondo listener che sposta a sua volta una tessera. Individua e circoscrivi il gestore che modifica lo stato del gioco; non utilizzare l'annullamento generalizzato come ripiego rispetto a una chiara attribuzione della proprietà degli eventi. MDN: Metodo Event: preventDefault()
Mantieni integro il trascinamento del puntatore lungo tutto il tabellone
Per un'interazione di trascinamento, traccia un singolo puntatore attivo dal momento della pressione che avvia il drag fino al suo rilascio o annullamento. I pointer event mettono a disposizione pointerdown, pointermove, pointerup e pointercancel; la cattura del puntatore (pointer capture) può mantenere i successivi eventi del puntatore indirizzati al tabellone anche quando il cursore esce dall'area di impatto iniziale. Cancella lo stato di trascinamento attivo sia su pointerup che su pointercancel, in modo che un gesto interrotto non lasci il puzzle bloccato in una condizione di trascinamento permanente. MDN: Pointer events
Evita di ricostruire o sostituire la tessera trascinata in un modo che provochi la perdita del tracciamento del puntatore. Se l'interfaccia sposta un elemento nel DOM durante un'operazione di trascinamento, MDN segnala che la cattura del puntatore dovrebbe essere reimpostata dopo tale spostamento. Stabilisci cosa accade quando il puntatore viene rilasciato sopra una posizione non valida: per un puzzle a scorrimento, ripristinare la tessera nella sua posizione precedente o agganciarla a una posizione valida risulta molto più comprensibile rispetto a una modifica silenziosa di tessere non correlate.
Rendi disponibile la stessa mossa senza richiedere il trascinamento
Un puzzle può supportare contemporaneamente input tramite mouse, tastiera e puntatore semplice. Ad esempio, fare clic o toccare una tessera adiacente allo spazio vuoto potrebbe spostarla; il trascinamento di tale tessera potrebbe rimanere un'interazione opzionale di manipolazione diretta; e i tasti freccia a tabellone focalizzato potrebbero offrire il controllo tramite tastiera. Tutti questi input dovrebbero invocare la medesima logica di convalida della mossa, garantendo che lo spostamento venga autorizzato o respinto in modo coerente a prescindere dalla modalità con cui è stato richiesto.
Ciò offre anche un utile parametro di verifica a livello di progettazione: un giocatore può completare il puzzle con un semplice clic o tocco, senza dover trascinare? Le linee guida WCAG 2.2 del W3C trattano l'accesso da tastiera e l'alternativa a puntatore singolo per le azioni di trascinamento come due requisiti distinti. Tra gli esempi figurano la sostituzione del trascinamento con clic su comandi direzionali. Una soluzione basata esclusivamente sulla tastiera non costituisce, di per sé, un'alternativa per puntatore singolo. W3C: Comprendere il Criterio di Successo 2.5.7: Movimenti di trascinamento
Nel caso di un puzzle a scorrimento, fare clic su una singola tessera adiacente alla volta rappresenta spesso un'alternativa naturale poiché preserva la regola del puzzle relativa agli spostamenti continui. Se tale interazione dovesse risultare poco intuitiva, pulsanti di movimento ben visibili possono indicare chiaramente la direzione consentita. La tecnica G219 del W3C fornisce esempi di controlli a puntatore singolo che eseguono la medesima azione di base senza richiedere il trascinamento. W3C: G219: Garantire la disponibilità di un'alternativa per i movimenti di trascinamento che operano sui contenuti
Esegui un test con una breve matrice di input
Prima di utilizzare il puzzle durante la sessione di gioco, collauda ciascuna modalità di input partendo dalla stessa disposizione del tabellone e dal medesimo stato iniziale. Verifica che una mossa valida aggiorni il tabellone una sola volta, che una mossa non valida lo lasci inalterato e che i controlli non pertinenti mantengano il loro consueto comportamento.
Mouse: trascina una tessera consentita, rilasciala al di fuori del tabellone e prova a effettuare una mossa non valida. Assicurati che il tabellone non perda il tracciamento del trascinamento né subisca variazioni inattese.
Tastiera: porta il focus sul tabellone, prova tutte le direzioni supportate, quindi sposta il focus su un campo di testo e inizia a digitare. Verifica che solo i tasti premuti con il focus sul tabellone spostino le tessere e che la digitazione non provochi lo scorrimento della pagina né alteri il gioco.
Puntatore senza trascinamento: fai clic o tocca una tessera adiacente valida. Accertati che generi la stessa mossa prodotta con gli altri metodi di input.
Interruzione: annulla o interrompi un trascinamento, quindi avviatene un altro. Assicurati che non rimangano selezioni residue orfane.
Se un test non va a buon fine, esamina per primo il livello più specifico interessato: l'elemento target dell'evento e lo stato del focus per i comportamenti della tastiera; la cattura del puntatore e la pulizia degli stati per i trascinamenti interrotti; e il validatore condiviso delle mosse in caso di incongruenze nelle regole. Questa sequenza permette a chi sviluppa di individuare la causa del problema in modo concreto, senza trasformare un elemento scenico per le avventure in un tutorial generale sui controlli di interfaccia.