WCAG 2.5.7: Movimenti di trascinamento

Cosa Significa Questa Regola

WCAG 2.5.7 — Dragging Movements (Livello AA, introdotto in WCAG 2.2) stabilisce che tutte le funzionalità che utilizzano un movimento di trascinamento per l’operazione devono poter essere eseguite tramite un’azione a singolo puntatore senza trascinamento, tranne nei casi in cui il movimento di trascinamento sia essenziale per la funzionalità e non esista alcun meccanismo alternativo.

Un movimento di trascinamento è definito come un’interazione in cui il puntatore viene premuto, mantenuto premuto e spostato in una nuova posizione prima di essere rilasciato. Esempi comuni includono: ordinare elementi di un elenco tramite drag-and-drop, ridimensionare pannelli trascinando una maniglia di divisione, usare uno slider afferrando e tirando il cursore, disegnare su una canvas e riordinare schede kanban. Tutti questi pattern devono avere un’alternativa equivalente a singolo puntatore — un meccanismo che l’utente può attivare senza dover tenere premuto il pulsante del puntatore mentre si muove.

Il vincolo del singolo puntatore è importante. L’alternativa non deve necessariamente essere una scorciatoia da tastiera; può essere un clic del mouse, un tap o qualsiasi altra azione che coinvolga un solo punto di contatto e non richieda un movimento prolungato mentre è premuto. Per esempio, uno slider che consente agli utenti di cliccare direttamente sulla traccia per saltare a un valore soddisfa il criterio perché il clic sulla traccia è un’azione a singolo puntatore senza trascinamento.

Cosa è considerato conforme: Un elenco trascinabile che offre anche pulsanti freccia su/giù o una finestra di dialogo “sposta in posizione”; uno slider di intervallo che accetta clic in qualsiasi punto della traccia; un pannello ridimensionabile che ha anche un input numerico o una funzione di doppio clic per comprimere; una mappa che può essere spostata sia cliccando frecce di navigazione sia trascinando.

Cosa è considerato non conforme: Un elenco ordinabile in cui l’unico modo per riordinare gli elementi è trascinarli; un ridimensionatore di pannelli divisi senza alcuna alternativa; un caricamento di file che accetta solo drag-and-drop senza un pulsante di fallback; un selettore di colore in cui l’unico modo per selezionare una tonalità è trascinare su una striscia sfumata senza alcuna alternativa tramite input numerico o testuale.

Eccezione ufficiale: Il criterio consente esplicitamente interfacce basate solo sul trascinamento quando il trascinamento è essenziale, cioè quando rimuoverlo cambierebbe o invaliderebbe in modo sostanziale l’attività. Un’applicazione di disegno gestuale o un widget per la cattura della firma sono esempi canonici. Tuttavia, questa eccezione è intenzionalmente ristretta; la maggior parte dei pattern di UI quotidiani (slider, elenchi ordinabili, colonne ridimensionabili) non è considerata uno scenario di trascinamento essenziale.

Perché È Importante

Le disabilità motorie interessano una parte significativa della popolazione mondiale. Secondo l’Organizzazione Mondiale della Sanità, oltre 1,3 miliardi di persone nel mondo — circa il 16% della popolazione globale — vivono con qualche forma di disabilità, e le menomazioni motorie o fisiche sono tra le categorie più comuni. Condizioni come tremore essenziale, morbo di Parkinson, lesioni da sforzo ripetitivo, emiplegia, lesioni al midollo spinale e differenze agli arti rendono difficile o impossibile tenere premuto un pulsante del puntatore mentre si sposta contemporaneamente il puntatore con precisione.

Per un utente con tremori alle mani, trascinare il cursore di uno slider da un’estremità della traccia all’altra non è solo scomodo — può essere del tutto inaffidabile. Il puntatore può scivolare, il trascinamento può essere annullato a metà operazione, oppure la precisione richiesta può semplicemente superare ciò che mani affette da tremore possono garantire. Questi utenti spesso si affidano ad alternative basate sul clic, alla navigazione da tastiera o a dispositivi di accesso a interruttore. Se l’unico modo per accedere a una funzionalità è un gesto di trascinamento, l’intera funzionalità è di fatto inaccessibile per loro.

Scenario concreto: Si consideri una pagina prodotto di e-commerce con un filtro di fascia di prezzo implementato come slider di intervallo a doppia maniglia. Un utente con limitato controllo motorio fine cerca di restringere la fascia di prezzo ma non riesce a trascinare in modo affidabile nessuna delle maniglie alla posizione desiderata — il puntatore devia, la maniglia scatta su valori errati e la frustrazione lo porta ad abbandonare il compito. Se lo stesso filtro esponesse una coppia di campi di testo numerici accanto allo slider, quell’utente potrebbe semplicemente digitare i prezzi minimo e massimo desiderati e inviare. Questa sola aggiunta trasforma una funzionalità inaccessibile in una pienamente accessibile con un costo di sviluppo minimo.

Oltre alle disabilità motorie, anche gli utenti su touchscreen in ambienti difficili — che tengono un corrimano sui mezzi pubblici, indossano guanti o usano uno stilo — traggono beneficio da alternative a singolo puntatore. Anche l’accessibilità cognitiva gioca un ruolo: interazioni più semplici basate sul clic riducono il carico cognitivo rispetto alle operazioni di drag-and-drop, che richiedono di comprendere una metafora spaziale mantenendo al contempo la precisione fisica.

Dal punto di vista dell’usabilità e della SEO, garantire che i controlli interattivi siano raggiungibili tramite semplici azioni del puntatore tende a produrre un’architettura dei componenti più pulita con un markup semantico migliore, il che a sua volta migliora la rilevabilità da parte delle tecnologie assistive e dei crawler dei motori di ricerca.

Regole Axe-core Correlate

WCAG 2.5.7 è un criterio di test manuale. Al momento della stesura, axe-core non include una regola automatizzata che possa segnalare in modo definitivo le violazioni di questo criterio. Il motivo è fondamentale per il funzionamento del criterio: gli strumenti automatici possono rilevare che esiste un listener di eventi di trascinamento su un elemento, ma non possono determinare con certezza se è disponibile un’alternativa senza trascinamento, se tale alternativa copre la stessa funzionalità o se il trascinamento è essenziale. Questo giudizio richiede una valutazione umana del design dell’interazione.

• Verifica manuale — affordance di drag-and-drop: I tester devono identificare ogni componente nella pagina che risponde a sequenze mousedown/mousemove/mouseup o agli equivalenti touch (touchstart/touchmove/touchend) e verificare che ciascuno esponga un meccanismo alternativo azionabile tramite una singola pressione del puntatore senza trascinamento. I tester dovrebbero anche controllare la presenza dell’attributo HTML5 draggable e dei relativi listener di eventi dragstart/drop come segnali di funzionalità dipendenti dal trascinamento.
• Verifica manuale — ispezione degli eventi del puntatore: Utilizzando l’ispezione dei listener di eventi degli strumenti di sviluppo del browser o strumenti di audit dell’accessibilità come Accessibility Insights for Web (che include una checklist manuale per il 2.5.7), i tester dovrebbero ispezionare i componenti alla ricerca di gestori di eventi del puntatore e confermare che l’intero intervallo di valori del componente o la sua capacità di riposizionamento sia raggiungibile senza un movimento prolungato del puntatore.
• Perché l’automazione non può rilevarlo: Uno scanner automatico può segnalare che un <div> ha un listener dragstart, ma non può sapere se il clic su un pulsante vicino etichettato “Sposta su” fornisce un’alternativa conforme. Questo richiede la comprensione della relazione tra gli elementi dell’interfaccia utente e la loro equivalenza funzionale — un compito che attualmente va oltre le capacità degli strumenti di analisi del DOM statici o runtime.

Come Testare

1. Baseline di scansione automatizzata: Esegui axe DevTools o Lighthouse sulla pagina per far emergere eventuali problemi correlati al puntatore o alle modalità di input. Sebbene nessuna regola axe mappi direttamente al 2.5.7, la revisione dei problemi segnalati sotto le regole 2.5.x fornisce un contesto utile. Prendi nota di eventuali componenti che axe segnala come aventi supporto da tastiera insufficiente, poiché spesso si sovrappongono a pattern basati solo sul trascinamento.
2. Identifica tutti i componenti trascinabili: Apri Chrome DevTools, vai al pannello Elements e usa la scheda Event Listeners per cercare i gestori dragstart, drag, drop, pointermove, mousemove e touchmove. In alternativa, cerca nel sorgente della pagina l’attributo draggable e pattern JavaScript come .addEventListener('dragstart'. Elenca ogni componente che richiede il trascinamento.
3. Testa ogni componente trascinabile per le alternative: Per ciascun componente identificato, prova a ottenere lo stesso risultato usando solo clic o tap a singolo puntatore — senza trascinamento. Per uno slider, clicca direttamente sulla traccia nella posizione desiderata. Per un elenco ordinabile, cerca pulsanti di spostamento o opzioni nel menu contestuale. Per un pannello ridimensionabile, cerca controlli basati sul clic o sul doppio clic. Se non esiste alcuna alternativa, il criterio non è soddisfatto.
4. Verifica della navigazione da tastiera (segnale secondario): Prova tutti i componenti trascinabili usando solo la tastiera (Tab per portare il focus, tasti freccia, Invio/Barra spaziatrice). Sebbene il supporto da tastiera sia coperto da WCAG 2.1.1, la presenza di un solido supporto da tastiera spesso correla con l’esistenza di alternative senza trascinamento, rendendo questo un utile passo di conferma. Usa NVDA + Firefox, VoiceOver + Safari (macOS/iOS) o JAWS + Chrome e verifica che l’intera funzionalità del componente sia azionabile senza un dispositivo di puntamento.
5. Verifica su dispositivi touch: Su un dispositivo mobile o utilizzando l’emulazione di dispositivo in modalità touch di Chrome DevTools, prova a completare gli stessi compiti usando gesti di tap (nessun swipe-and-hold). Conferma che tap singoli o interazioni tap-on-target siano sufficienti per tutte le funzionalità.
6. Documenta i risultati: Per ciascun componente testato, registra se esiste un’alternativa conforme a singolo puntatore, se copre l’intera gamma di funzionalità e se l’operazione di trascinamento potrebbe essere considerata essenziale. Usa la checklist di test manuale per WCAG 2.5.7 di Accessibility Insights for Web come guida strutturata.

Come Correggere

Slider di Intervallo senza Supporto di Clic sulla Traccia — Non Corretto

<!-- Slider che risponde solo al trascinamento del cursore;
     il clic sulla traccia non ha alcun effetto -->
<div class='slider-container'>
  <div class='slider-track'>
    <div class='slider-thumb'
         id='priceSlider'
         onmousedown='startDrag(event)'>
    </div>
  </div>
</div>

Slider di Intervallo con Clic sulla Traccia e Input Numerico — Corretto

<!-- Il <input type='range'> nativo fornisce nativamente
     trascinamento, clic sulla traccia e supporto da tastiera.
     Un input numerico offre un’ulteriore alternativa
     a singolo puntatore. -->
<label for='priceRange'>Prezzo massimo: <span id='priceValue'>500</span> TL</label>
<input type='range'
       id='priceRange'
       name='priceRange'
       min='0'
       max='1000'
       value='500'
       step='10'
       aria-valuemin='0'
       aria-valuemax='1000'
       aria-valuenow='500'
       oninput='document.getElementById("priceValue").textContent = this.value;
                document.getElementById("priceNumber").value = this.value;'>
<label for='priceNumber'>Oppure inserisci un valore:</label>
<input type='number'
       id='priceNumber'
       name='priceNumber'
       min='0'
       max='1000'
       value='500'>

Elenco Ordinabile Drag-and-Drop senza Alternativa — Non Corretto

<!-- Gli elementi possono essere riordinati solo tramite trascinamento.
     Non esistono pulsanti di spostamento o riordino da tastiera. -->
<ul id='taskList'>
  <li draggable='true' ondragstart='handleDrag(event)' id='item1'>Task One</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item2'>Task Two</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item3'>Task Three</li>
</ul>

Elenco Ordinabile Drag-and-Drop con Pulsanti di Spostamento — Corretto

<!-- Il drag-and-drop è mantenuto per gli utenti che possono usarlo.
     I pulsanti Move Up / Move Down forniscono un’alternativa
     a singolo puntatore (e accessibile da tastiera) per ogni elemento. -->
<ul id='taskList' aria-label='Sortable task list'>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item1'>
    <span>Task One</span>
    <button type='button'
            onclick='moveItem("item1", -1)'
            aria-label='Move Task One up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item1", 1)'
            aria-label='Move Task One down'>
      &darr; Move Down
    </button>
  </li>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item2'>
    <span>Task Two</span>
    <button type='button'
            onclick='moveItem("item2", -1)'
            aria-label='Move Task Two up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item2", 1)'
            aria-label='Move Task Two down'>
      &darr; Move Down
    </button>
  </li>
</ul>

Split Pane Ridimensionabile senza Alternativa — Non Corretto

<!-- Il divisore può essere riposizionato solo tramite trascinamento.
     Non esistono input percentuali o pulsanti di dimensione preimpostata. -->
<div class='split-pane'>
  <div class='pane pane-left' id='leftPane'>Content A</div>
  <div class='divider'
       onmousedown='startResize(event)'
       aria-hidden='true'></div>
  <div class='pane pane-right' id='rightPane'>Content B</div>
</div>

Split Pane Ridimensionabile con Pulsanti di Dimensione Preimpostata — Corretto

<!-- Il divisore supporta ancora il trascinamento, ma i pulsanti
     di layout preimpostato consentono il riposizionamento
     a singolo puntatore. Il divisore è anche focalizzabile
     da tastiera con supporto per i tasti freccia. -->
<div class='split-pane-wrapper'>
  <div class='split-controls' role='group' aria-label='Panel size presets'>
    <button type='button' onclick='setSplit(25)'>25 / 75</button>
    <button type='button' onclick='setsplit(50)'>50 / 50</button>
    <button type='button' onclick='setSplit(75)'>75 / 25</button>
  </div>
  <div class='split-pane'>
    <div class='pane pane-left' id='leftPane'>Content A</div>
    <div class='divider'
         role='separator'
         tabindex='0'
         aria-label='Resize panels'
         aria-valuenow='50'
         aria-valuemin='10'
         aria-valuemax='90'
         onmousedown='startResize(event)'
         onkeydown='resizeWithKeys(event)'>
    </div>
    <div class='pane pane-right' id='rightPane'>Content B</div>
  </div>
</div>

Errori Comuni

• Implementare slider come componenti personalizzati basati su <div> senza supporto di clic sulla traccia, facendo affidamento esclusivamente sul trascinamento dell’elemento cursore e non gestendo gli eventi di click sull’elemento traccia stesso per portare il valore alla posizione cliccata.
• Dare per scontato che il caricamento file drag-and-drop sia l’unico meccanismo di upload necessario, senza fornire un pulsante di esplorazione file visibile e cliccabile (<input type='file'>) come fallback obbligatorio accanto all’area di rilascio.
• Applicare l’eccezione di essenzialità in modo troppo estensivo — per esempio, trattando un elenco di cose da fare ordinabile o una bacheca kanban come “drag essenziale” quando pulsanti Sposta su/Giù soddisferebbero pienamente le esigenze degli utenti senza alcuna perdita di funzionalità.
• Fornire alternative da tastiera ma non alternative a singolo puntatore, interpretando erroneamente WCAG 2.5.7 come soddisfatto dal solo supporto da tastiera. Il criterio richiede specificamente un percorso a singolo puntatore; le soluzioni solo da tastiera rispondono al 2.1.1, non al 2.5.7.
• Nascondere pulsanti di spostamento o input numerici dietro stati di hover o menu secondari che a loro volta richiedono interazioni di trascinamento o sequenze complesse del puntatore per essere rivelati, annullando di fatto l’accessibilità dell’alternativa.
• Trascurare i dispositivi touch testando le alternative al trascinamento solo con un mouse da desktop, per poi distribuire a utenti su touchscreen in cui il comportamento del gesto di trascinamento e delle sue alternative può differire in modo significativo dall’implementazione desktop.
• Usare pointer-events: none sulla traccia dello slider in CSS per prevenire clic accidentali durante il trascinamento, bloccando involontariamente l’alternativa di clic sulla traccia richiesta dal 2.5.7.
• Non fornire un’alternativa per le interazioni di pan/drag della mappa su mappe incorporate o visualizzazioni personalizzate basate su canvas, dove il clic su pulsanti freccia direzionali o l’inserimento di coordinate costituirebbero un’alternativa a singolo puntatore sufficiente.
• Implementare l’alternativa a singolo puntatore come un target di drag-and-drop a sua volta — per esempio, creando un’area “rilascia qui” che richiede comunque un trascinamento per essere usata — invece di un modello di interazione realmente diverso, come un pulsante o un input di testo.
• Dimenticare di testare le alternative sull’intero intervallo di valori di un componente trascinabile. Uno slider che consente agli utenti di cliccare solo alcune posizioni predefinite sulla traccia, ma non qualsiasi posizione arbitraria, non offre un’alternativa completa se la versione con trascinamento supporta valori continui.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025, stabilisce un quadro nazionale completo per l’accessibilità dei servizi digitali. La circolare richiede che i soggetti interessati si conformino alle Web Content Accessibility Guidelines e fa specifico riferimento alla conformità di Livello AA come standard per ottenere il Erişilebilirlik Logosu (Logo di Accessibilità), il marchio ufficiale di certificazione rilasciato dal Ministero della Famiglia e dei Servizi Sociali (Aile ve Sosyal Hizmetler Bakanlığı).

WCAG 2.5.7, in quanto criterio di Livello AA introdotto in WCAG 2.2, rientra nell’ambito dei requisiti necessari per ottenere e mantenere il Logo di Accessibilità. Per le organizzazioni che si affidano a interazioni drag-and-drop — come piattaforme di e-commerce con slider di filtraggio dei prodotti o liste dei desideri ordinabili, applicazioni bancarie con dashboard di gestione del portafoglio o strumenti di prenotazione di agenzie di viaggio con selettori di intervallo di date — la non conformità al 2.5.7 costituirebbe un ostacolo diretto alla certificazione.

I soggetti coperti dalla Circolare Presidenziale 2025/10 includono un’ampia sezione trasversale dell’economia digitale turca: istituzioni pubbliche e organismi governativi a livello centrale e locale; banche e fornitori di servizi finanziari regolati dall’Agenzia di Regolamentazione e Vigilanza Bancaria (BDDK); piattaforme di e-commerce operanti in Turchia; ospedali e fornitori privati di servizi sanitari; operatori di telecomunicazioni con 200.000 o più abbonati; agenzie di viaggio e società di trasporto privato; e scuole private autorizzate dal Ministero dell’Istruzione Nazionale (Milli Eğitim Bakanlığı — MoNE).

Per queste organizzazioni, non fornire alternative a singolo puntatore alle interazioni di trascinamento non è semplicemente una carenza tecnica — è un gap di conformità che può impedire la certificazione, esporre l’organizzazione a controlli regolatori ed escludere una parte significativa di utenti con disabilità motorie. Le statistiche sulla disabilità in Turchia rispecchiano le tendenze globali: milioni di residenti vivono con condizioni che influiscono sul controllo motorio fine, e i servizi digitali che si basano esclusivamente su gesti di trascinamento erigono barriere inutili per questa popolazione.

In pratica, le organizzazioni che perseguono l’Erişilebilirlik Logosu dovrebbero includere WCAG 2.5.7 nelle proprie checklist di audit di accessibilità, assicurarsi che tutti i componenti interattivi costruiti con funzionalità di trascinamento siano esaminati per verificare la presenza di alternative conformi e documentare le proprie decisioni di conformità — incluse eventuali affermazioni relative all’eccezione di essenzialità — come parte della propria Dichiarazione di Accessibilità (Erişilebilirlik Beyanı), che la circolare richiede ai soggetti interessati di pubblicare e mantenere aggiornata.