WCAG 2.5.7: Sleepbewegingen

Wat Deze Regel Betekent

WCAG 2.5.7 — Sleepbewegingen (niveau AA, geïntroduceerd in WCAG 2.2) stelt dat alle functionaliteit die een sleepbeweging gebruikt voor de bediening, bereikbaar moet zijn via een enkele aanwijzeractie zonder slepen, behalve wanneer de sleepbeweging essentieel is voor de functionaliteit en er geen alternatieve mechanisme bestaat.

Een sleepbeweging wordt gedefinieerd als een interactie waarbij de aanwijzer wordt ingedrukt, vastgehouden en naar een nieuwe positie verplaatst voordat deze wordt losgelaten. Veelvoorkomende voorbeelden zijn: lijstitems sorteren via drag-and-drop, panelen vergroten of verkleinen door een scheidingshendel te slepen, een schuifregelaar gebruiken door de duim vast te pakken en te verslepen, tekenen op een canvas en kanban-kaarten herschikken. Al deze patronen moeten een gelijkwaardig alternatief met één aanwijzer hebben — een mechanisme dat de gebruiker kan activeren zonder de aanwijzerknop ingedrukt te hoeven houden tijdens het bewegen.

De beperking van de enkele aanwijzer is belangrijk. Het alternatief hoeft geen sneltoets op het toetsenbord te zijn; het kan een muisklik, een tik of een andere actie zijn die slechts één contactpunt omvat en geen voortdurende beweging vereist terwijl deze is ingedrukt. Een schuifregelaar waarmee gebruikers bijvoorbeeld rechtstreeks op de baan kunnen klikken om naar een waarde te springen, voldoet aan het criterium omdat het klikken op de baan een actie met één aanwijzer is zonder slepen.

Wat telt als een voldoende oplossing: Een versleepbare lijst die ook knoppen voor omhoog/omlaag of een dialoogvenster voor verplaatsen-naar-positie biedt; een bereikschuifregelaar die kliks overal op de baan accepteert; een aanpasbaar paneel dat ook een numerieke invoer of een dubbelklik-om-in-te-klappen mogelijkheid heeft; een kaart die kan worden verschoven door op navigatiepijlen te klikken, naast slepen.

Wat telt als een onvoldoende oplossing: Een sorteerbare lijst waarbij de enige manier om items te herschikken is door ze te slepen; een resizer voor een gesplitst paneel zonder alternatieve mogelijkheid; een bestandsupload die alleen drag-and-drop accepteert zonder terugvalknop; een kleurkiezer waarbij de enige manier om een tint te selecteren is door over een kleurverloopbalk te slepen zonder numeriek of tekstinvoeralternatief.

Officiële uitzondering: Het criterium staat expliciet interfaces toe die uitsluitend slepen gebruiken wanneer slepen essentieel is — wat betekent dat het verwijderen ervan de activiteit fundamenteel zou veranderen of ongeldig zou maken. Een gebaren-tekenapplicatie of een widget voor het vastleggen van een handtekening is een klassiek voorbeeld. Deze uitzondering is echter bewust smal; de meeste alledaagse UI-patronen (schuifregelaars, sorteerbare lijsten, aanpasbare kolommen) worden niet beschouwd als scenario’s waarin slepen essentieel is.

Waarom Het Belangrijk Is

Motorische beperkingen treffen een aanzienlijk deel van de wereldbevolking. Volgens de Wereldgezondheidsorganisatie leven wereldwijd meer dan 1,3 miljard mensen — ongeveer 16% van de wereldbevolking — met een of andere vorm van beperking, en motorische of fysieke beperkingen behoren tot de meest voorkomende categorieën. Aandoeningen zoals essentiële tremor, de ziekte van Parkinson, RSI, hemiplegie, ruggenmergletsels en verschillen in ledematen maken het allemaal moeilijk of onmogelijk om een aanwijzerknop ingedrukt te houden terwijl de aanwijzer tegelijkertijd nauwkeurig wordt bewogen.

Voor een gebruiker met handtremoren is het slepen van een schuifregelaar-duim van het ene uiteinde van de baan naar het andere niet alleen onhandig — het kan volledig onbetrouwbaar zijn. De aanwijzer kan wegglijden, de sleepactie kan halverwege worden geannuleerd, of de vereiste precisie overschrijdt simpelweg wat handen met tremor kunnen leveren. Deze gebruikers vertrouwen vaak op klikgebaseerde alternatieven, toetsenbordnavigatie of schakelapparaten. Als de enige weg naar een functie een sleepgebaar is, is de hele functie voor hen feitelijk ontoegankelijk.

Concreet scenario: Stel je een e-commerce productpagina voor met een prijsbereikfilter dat is geïmplementeerd als een bereikschuifregelaar met twee hendels. Een gebruiker met beperkte fijne motoriek probeert het prijsbereik te verkleinen, maar kan geen van beide hendels betrouwbaar naar de doelpositie slepen — de aanwijzer dwaalt af, de hendel springt naar verkeerde waarden en de frustratie zorgt ervoor dat de gebruiker de taak opgeeft. Als hetzelfde filter een paar numerieke tekstinvoervelden naast de schuifregelaar zou tonen, zou die gebruiker eenvoudig de gewenste minimum- en maximumprijzen kunnen typen en verzenden. Die ene toevoeging verandert een ontoegankelijke functie in een volledig toegankelijke, tegen minimale ontwikkelkosten.

Naast motorische beperkingen profiteren gebruikers op touchscreens in uitdagende omgevingen — een leuning vasthouden in het openbaar vervoer, handschoenen dragen of een stylus gebruiken — van alternatieven met één aanwijzer. Cognitieve toegankelijkheid speelt ook een rol: eenvoudigere, klikgebaseerde interacties verlagen de cognitieve belasting vergeleken met drag-and-drop-bewerkingen die vereisen dat een ruimtelijke metafoor wordt begrepen terwijl fysieke precisie wordt behouden.

Vanuit gebruiksvriendelijkheid en SEO-perspectief leidt ervoor zorgen dat interactieve bedieningselementen bereikbaar zijn via eenvoudige aanwijzeracties vaak tot een schonere componentarchitectuur met betere semantische markup, wat op zijn beurt de vindbaarheid door ondersteunende technologieën en zoekmachinecrawlers verbetert.

Gerelateerde Axe-core Regels

WCAG 2.5.7 is een criterium voor handmatige tests. Op het moment van schrijven bevat axe-core geen geautomatiseerde regel die overtredingen van dit criterium definitief kan signaleren. De reden is fundamenteel voor hoe het criterium werkt: geautomatiseerde tools kunnen detecteren dat er een drag-eventlistener op een element bestaat, maar ze kunnen niet met zekerheid bepalen of er een alternatief zonder slepen beschikbaar is, of dat alternatief dezelfde functionaliteit dekt, of dat slepen essentieel is. Dat oordeel vereist menselijke evaluatie van het interactieontwerp.

• Handmatige audit — drag-and-drop-mogelijkheden: Testers moeten elk component op de pagina identificeren dat reageert op mousedown/mousemove/mouseup-reeksen of touch-equivalenten (touchstart/touchmove/touchend) en verifiëren dat elk component een alternatief mechanisme biedt dat bedienbaar is via één enkele aanwijzerdruk zonder slepen. Testers moeten ook controleren op het HTML5-attribuut draggable en bijbehorende dragstart/drop-eventlisteners als signalen van functionaliteit die afhankelijk is van slepen.
• Handmatige audit — inspectie van aanwijzer-events: Met behulp van de eventlistener-inspectie in de browser DevTools of toegankelijkheidsaudittools zoals Accessibility Insights for Web (dat een handmatige checklist voor 2.5.7 bevat), moeten testers componenten inspecteren op handlers voor aanwijzer-events en bevestigen dat het volledige waardebereik of de verplaatsingsmogelijkheid van het component bereikbaar is zonder aanhoudende aanwijzerbeweging.
• Waarom automatisering dit niet kan detecteren: Een geautomatiseerde scanner kan signaleren dat een <div> een dragstart-listener heeft, maar kan niet weten of het klikken op een nabijgelegen knop met het label "Move up" een conform alternatief biedt. Dit vereist begrip van de relatie tussen UI-elementen en hun functionele gelijkwaardigheid — een taak die momenteel de mogelijkheden van statische of runtime DOM-analysetools overstijgt.

Hoe te Testen

1. Geautomatiseerde scan als basislijn: Voer axe DevTools of Lighthouse uit op de pagina om eventuele gerelateerde problemen met aanwijzer of invoermodaliteit naar voren te brengen. Hoewel geen enkele axe-regel direct overeenkomt met 2.5.7, biedt het bekijken van gemelde problemen onder 2.5.x-regels nuttige context. Noteer alle componenten die axe markeert als onvoldoende ondersteund voor toetsenbordbediening, omdat deze vaak overlappen met patronen die alleen slepen gebruiken.
2. Identificeer alle versleepbare componenten: Open Chrome DevTools, ga naar het tabblad Elements en gebruik het tabblad Event Listeners om te zoeken naar handlers voor dragstart, drag, drop, pointermove, mousemove en touchmove. Zoek in de paginabron naar het attribuut draggable en naar JavaScript-patronen zoals .addEventListener('dragstart'. Maak een lijst van elk component dat slepen vereist.
3. Test elk versleepbaar component op alternatieven: Probeer voor elk geïdentificeerd component hetzelfde resultaat te bereiken met alleen kliks of tikken met één aanwijzer — zonder slepen. Klik voor een schuifregelaar rechtstreeks op de baan op de gewenste positie. Zoek voor een sorteerbare lijst naar verplaatsknoppen of opties in contextmenu’s. Zoek voor een aanpasbaar paneel naar dubbelklik- of klikgebaseerde bedieningselementen. Als er geen alternatief bestaat, wordt niet aan het criterium voldaan.
4. Controle van toetsenbordnavigatie (secundaal signaal): Test alle versleepbare componenten uitsluitend met het toetsenbord (Tab om te focussen, pijltjestoetsen, Enter/Spatie). Hoewel toetsenbordondersteuning wordt gedekt door WCAG 2.1.1, correleert de aanwezigheid van robuuste toetsenbordondersteuning vaak met het bestaan van alternatieven zonder slepen, waardoor dit een nuttige bevestigende stap is. Gebruik NVDA + Firefox, VoiceOver + Safari (macOS/iOS) of JAWS + Chrome en verifieer dat de volledige functionaliteit van het component bedienbaar is zonder aanwijsapparaat.
5. Verificatie op touchapparaten: Probeer op een mobiel apparaat of met Chrome DevTools-apparaatemulatie in touchmodus dezelfde taken te voltooien met tikgebaren (geen swipe-en-vasthouden). Bevestig dat enkele tikken of tik-op-doel-interacties voldoende zijn voor alle functionaliteit.
6. Documenteer resultaten: Noteer voor elk getest component of er een conform alternatief met één aanwijzer bestaat, of dit het volledige bereik van functionaliteit dekt en of de sleepbewerking als essentieel kan worden beschouwd. Gebruik de handmatige testchecklist voor WCAG 2.5.7 in Accessibility Insights for Web als gestructureerde leidraad.

Hoe te Oplossen

Bereikschuifregelaar zonder klik-op-baan-ondersteuning — Onjuist

<!-- Slider that only responds to drag on the thumb;
     clicking the track does nothing -->
<div class='slider-container'>
  <div class='slider-track'>
    <div class='slider-thumb'
         id='priceSlider'
         onmousedown='startDrag(event)'>
    </div>
  </div>
</div>

Bereikschuifregelaar met klik-op-baan en numerieke invoer — Juiste

<!-- Native <input type='range'> provides drag, click-on-track,
     and keyboard support natively. A numeric input offers an
     additional single-pointer alternative. -->
<label for='priceRange'>Maximum price: <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'>Or enter a value:</label>
<input type='number'
       id='priceNumber'
       name='priceNumber'
       min='0'
       max='1000'
       value='500'>

Drag-and-drop sorteerbare lijst zonder alternatief — Onjuist

<!-- Items can only be reordered by dragging.
     No move buttons or keyboard reordering exist. -->
<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>

Drag-and-drop sorteerbare lijst met verplaatsknoppen — Juiste

<!-- Drag-and-drop is preserved for users who can use it.
     Move Up / Move Down buttons provide a single-pointer
     (and keyboard-accessible) alternative for every item. -->
<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>

Aanpasbaar gesplitst paneel zonder alternatief — Onjuist

<!-- The divider can only be repositioned by dragging.
     No percentage input or preset-size buttons exist. -->
<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>

Aanpasbaar gesplitst paneel met knoppen voor vooraf ingestelde grootte — Juiste

<!-- The divider still supports dragging, but preset-layout
     buttons allow single-pointer repositioning. The divider
     is also keyboard-focusable with arrow-key support. -->
<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>

Veelvoorkomende Fouten

• Schuifregelaars implementeren als aangepaste, op <div> gebaseerde componenten zonder klik-op-baan-ondersteuning, volledig vertrouwen op het slepen van het duimelement en geen click-events op het baanelement zelf afhandelen om de waarde naar de geklikte positie te laten springen.
• Aannemen dat drag-and-drop-bestandsupload het enige benodigde uploadmechanisme is, zonder een zichtbare, klikbare knop voor het bladeren naar bestanden (<input type='file'>) als verplichte terugvaloptie naast de dropzone te bieden.
• De uitzondering voor essentialiteit te ruim toepassen — bijvoorbeeld een sorteerbare takenlijst of een kanbanbord behandelen als "essentieel slepen" terwijl knoppen voor omhoog/omlaag volledig in de gebruikersbehoeften zouden voorzien zonder enig functieverlies.
• Toetsenbordalternatieven bieden maar geen alternatieven met één aanwijzer, door WCAG 2.5.7 verkeerd te interpreteren als voldaan door alleen toetsenbordondersteuning. Het criterium vereist specifiek een pad met één aanwijzer; oplossingen die alleen het toetsenbord gebruiken, hebben betrekking op 2.1.1, niet op 2.5.7.
• Verplaatsknoppen of numerieke invoervelden verbergen achter hovertoestanden of secundaire menu’s die zelf sleepinteracties of complexe aanwijzerreeksen vereisen om te worden weergegeven, waardoor de toegankelijkheid van het alternatief feitelijk teniet wordt gedaan.
• Touchapparaten verwaarlozen door alternatieven voor slepen alleen met een desktopmuis te testen en deze vervolgens uit te rollen naar gebruikers op touchscreens, waar het gedrag van het sleepgebaar en de alternatieven aanzienlijk kunnen verschillen van de desktopimplementatie.
• pointer-events: none gebruiken op de schuifregelaarbaan in CSS om onbedoelde kliks tijdens slepen te voorkomen, wat onbedoeld het klik-op-baan-alternatief blokkeert dat 2.5.7 vereist.
• Geen alternatief bieden voor kaartverschuif-/sleepinteracties op ingesloten kaarten of aangepaste canvas-gebaseerde visualisaties, waar het klikken op richtingspijlen of het invoeren van coördinaten een voldoende alternatief met één aanwijzer zou zijn.
• Het alternatief met één aanwijzer zelf als drag-and-drop-doel implementeren — bijvoorbeeld een "drop hier"-zone maken die nog steeds slepen vereist om te gebruiken — in plaats van een echt ander interactiemodel, zoals een knop of een tekstinvoer.
• Vergeten alternatieven over het volledige waardebereik te testen van een versleepbaar component. Een schuifregelaar die gebruikers alleen op een paar vooraf ingestelde posities op de baan laat klikken, maar niet op een willekeurige positie, biedt geen volledig alternatief als de versie met slepen continue waarden ondersteunt.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt een uitgebreid nationaal toegankelijkheidskader vast voor digitale diensten. De circulaire vereist dat betrokken organisaties voldoen aan de Web Content Accessibility Guidelines en verwijst specifiek naar conformiteit op niveau AA als de norm voor het verkrijgen van het Erişilebilirlik Logosu (Toegankelijkheidslogo), het officiële certificeringsmerk dat wordt uitgegeven door het Ministerie van Gezin en Sociale Diensten (Aile ve Sosyal Hizmetler Bakanlığı).

WCAG 2.5.7, als criterium op niveau AA dat is geïntroduceerd in WCAG 2.2, valt binnen de reikwijdte van de vereisten die nodig zijn om het Toegankelijkheidslogo te verkrijgen en te behouden. Voor organisaties die afhankelijk zijn van drag-and-drop-interacties — zoals e-commerceplatforms met productfilter-schuifregelaars of sorteerbare verlanglijstjes, bankapplicaties met dashboards voor portfoliobeheer of boekingstools van reisbureaus met datumbereikselectoren — zou niet-naleving van 2.5.7 een directe belemmering voor certificering vormen.

De organisaties die onder Presidential Circular 2025/10 vallen, omvatten een brede dwarsdoorsnede van de Turkse digitale economie: publieke instellingen en overheidsorganen op centraal en lokaal niveau; banken en aanbieders van financiële diensten die onder toezicht staan van de Banking Regulation and Supervision Agency (BDDK); e-commerceplatforms die in Turkije actief zijn; ziekenhuizen en particuliere zorgaanbieders; telecomoperators met 200,000 of meer abonnees; reisagentschappen en particuliere vervoersbedrijven; en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (Milli Eğitim Bakanlığı — MoNE).

Voor deze organisaties is het niet bieden van alternatieven met één aanwijzer voor sleepinteracties niet slechts een technische tekortkoming — het is een nalevingskloof die certificering kan verhinderen, de organisatie kan blootstellen aan toezicht door de toezichthouder en een aanzienlijk segment van gebruikers met motorische beperkingen kan uitsluiten. De Turkse statistieken over beperkingen weerspiegelen de wereldwijde trends: miljoenen inwoners leven met aandoeningen die de fijne motoriek beïnvloeden, en digitale diensten die uitsluitend op sleepgebaren vertrouwen, vormen onnodige barrières voor deze populatie.

In de praktijk zouden organisaties die het Erişilebilirlik Logosu nastreven WCAG 2.5.7 in hun toegankelijkheidsauditchecklists moeten opnemen, ervoor moeten zorgen dat alle interactieve componenten die met sleepfunctionaliteit zijn gebouwd, worden beoordeeld op conforme alternatieven, en hun beslissingen over conformiteit moeten documenteren — inclusief eventuele claims op de essentialiteitsuitzondering — als onderdeel van hun Toegankelijkheidsverklaring (Erişilebilirlik Beyanı), die de circulaire vereist dat betrokken organisaties publiceren en actueel houden.