Movimenti di trascinamento
Qualsiasi funzione che utilizza un movimento di trascinamento deve essere utilizzabile anche con un'azione a singolo puntatore che non richieda trascinamento — di norma un tap o un clic. Introdotto in WCAG 2.2.
Cosa richiede
Se una funzionalità può essere eseguita trascinando — riordinare elementi, regolare uno slider, spostare una mappa, firmare su un pad di firma, scorrere un selettore — deve esistere anche un modo per eseguire la stessa funzione con un’azione a singolo puntatore che non sia un trascinamento. Un pulsante da toccare, una freccia su cui cliccare, un valore da digitare, una selezione da un menu: qualsiasi di queste opzioni soddisfa il criterio di successo.
La regola si applica sia ai trascinamenti orizzontali, sia a quelli verticali, sia a quelli a forma libera. L’esenzione riguarda i casi in cui il trascinamento è essenziale alla funzione — disegnare in un’app di pittura, trascinare la levetta analogica di un joystick virtuale.
Come soddisfarlo
- Liste ordinabili: aggiungere pulsanti su/giù accanto a ogni elemento oppure un menu «Sposta alla posizione…». Il trascinamento funziona ancora per gli utenti mouse; i pulsanti coprono tutti gli altri.
- Slider: fornire un
<input type="range">(orole="slider"con supporto ai tasti freccia) in modo che i valori possano essere impostati tramite tastiera o digitando un numero in un campo affiancato. - Pan/zoom su mappa: aggiungere controlli visibili di zoom in/zoom out e direzione di spostamento, oppure accettare un campo di ricerca per la navigazione diretta.
- Caroselli: fornire pulsanti Precedente / Successivo in aggiunta allo swipe.
- Filtri di intervallo/prezzo con slider a doppia maniglia: affiancarli con due campi numerici.
- Banner e modali da trascinare per chiudere: aggiungere un pulsante Chiudi visibile.
- Acquisizione della firma: offrire un’alternativa «digita il tuo nome».
Errori comuni
- Bacheche kanban in stile Trello in cui l’unico modo per spostare una scheda tra le colonne è trascinarla.
- Maniglie di riordinamento in impostazioni o playlist prive di alternativa da tastiera o tramite pulsante.
- Slider a doppia maniglia per intervalli che richiedono il trascinamento di entrambe le estremità e non offrono campi min/max.
- Slider per il confronto immagini (prima/dopo) privi di pulsanti per spostare il divisore.
- Selettori colore in cui l’unico modo per regolare tonalità/saturazione è trascinare all’interno del selettore.
- Controlli «scorri per confermare» o «scorri per sbloccare» privi di alternativa a tocco singolo.
- Selettori di intervallo di date personalizzati che richiedono la selezione per trascinamento tra celle del calendario.
Perché è importante
Il trascinamento è difficile o impossibile per gli utenti con limitato controllo motorio fine, tremore, uso del telefono con una mano sola, utenti con puntatore bocca o puntatore testa, e chiunque usi un trackpad con la mano che si affatica dopo pochi trascinamenti. È un problema anche per molti utenti con switch-control e voice-control — non esiste un comando vocale ovvio per «trascina la terza scheda nella seconda colonna». Il criterio 2.5.7, nuovo in WCAG 2.2, ha ridisegnato il modo in cui i team di prodotto progettano l’interfaccia di riordinamento: la maggior parte dei design system moderni fornisce ora pulsanti freccia come alternativa predefinita. Ci si aspetta che questo criterio di successo sia riscontrato di frequente in audit di dashboard, strumenti di gestione dei progetti e qualsiasi interfaccia costruita intorno a liste ordinabili.