Normen · WCAG 2.2

SC 2.5.7 Niveau AA WCAG 2.2 Nieuw in 2.2

Sleepbewegingen

Elke functie die een sleepbeweging gebruikt, moet ook bedienbaar zijn met een enkelpuntsactie die geen slepen vereist — doorgaans een tik of klik. Nieuw in WCAG 2.2.

Wat het vraagt

Als een functie kan worden uitgevoerd door te slepen — items herordenen, een schuifregelaar aanpassen, een kaart pannen, een handtekeningveld ondertekenen, een ontgrendelingsknop schuiven — moet er ook een manier zijn om dezelfde functie uit te voeren met een enkelpuntsactie die geen sleep is. Tikken op een knop, klikken op een pijl, een waarde typen, kiezen uit een menu: elk van deze opties voldoet aan het succescriterium.

De regel is van toepassing of het slepen nu horizontaal, verticaal of vrij is. De uitzondering geldt wanneer het slepen essentieel is voor de functie — tekenen in een tekenapp, het analoge duimstokje van een virtuele joystick slepen.

Hoe te voldoen

  • Sorteerbare lijsten: voeg omhoog/omlaag-pijlknoppen toe naast elk item, of een menu „Verplaatsen naar positie…“. Slepen werkt nog steeds voor muisgebruikers; de knoppen zijn er voor iedereen anders.
  • Schuifregelaars: lever <input type="range"> (of role="slider" met pijltoetsondersteuning) zodat waarden kunnen worden ingesteld met het toetsenbord of door een getal te typen in een gekoppeld invoerveld.
  • Kaart pannen/zoomen: voeg zichtbare besturingselementen voor inzoomen/uitzoomen en richtingspan toe, of accepteer een zoekveld voor directe navigatie.
  • Carrousels: bied de knoppen Vorige / Volgende naast vegen aan.
  • Bereik-/prijsfilters met een schuifregelaar met twee grepen: koppel ze aan twee getalinvoervelden.
  • Slepen-om-te-sluiten-banners en modals: voeg een zichtbare knop Sluiten toe.
  • Handtekening vastleggen: bied een alternatief „typ uw naam“ aan.

Veelvoorkomende fouten

  • Kanban-borden in Trello-stijl waarbij de enige manier om een kaart tussen kolommen te verplaatsen het slepen is.
  • Herordeneringsgrepen in instellingen of afspeellijsten zonder toetsenbord- of knopalgerniatief.
  • Schuifregelaars met twee grepen die het slepen van beide uiteinden vereisen en geen min/max-invoervelden hebben.
  • Afbeeldingsvergelijkingsschuifregelaars (voor/na) zonder knoppen om de verdeler te verschuiven.
  • Kleurenkiezers waarbij de enige manier om tint/verzadiging aan te passen het slepen in de kiezer is.
  • Besturingselementen voor „schuif om te bevestigen“ of „schuif om te ontgrendelen“ zonder tikalternatief.
  • Aangepaste datumbereikkiezers die het slepen over kalendercellen vereisen.

Waarom het belangrijk is

Slepen is moeilijk of onmogelijk voor gebruikers met beperkte fijne motoriek, tremor, eenhandig telefoongebruik, mond-/hoofdaanwijzergebruikers en iedereen met een trackpad waarvan de hand krampt na een paar sleepbewegingen. Het is ook een probleem voor veel schakelaar- en stembesturingsgebruikers — er bestaat geen voor de hand liggende spraakopdracht voor „sleep de derde kaart naar de tweede kolom.“ 2.5.7 is nieuw in WCAG 2.2 en heeft de manier veranderd waarop productteams herorder-UI ontwerpen: de meeste moderne ontwerpsystemen leveren nu standaard pijlknop-alternatieven. Verwacht dat dit succescriterium een veelvoorkomende bevinding zal zijn op dashboards, projectbeheerhulpmiddelen en elke gebruikersinterface gebouwd rond sorteerbare lijsten.