Campus Design System

Appearance

2.5.7 Sleepbewegingen niveau AA ​

Uitleg ​

Het WCAG-criterium 2.5.7 Sleepbewegingen richt zich op het toegankelijk maken van interactieve elementen die een "sleep"-beweging vereisen, zoals het slepen van objecten op een scherm (bijvoorbeeld voor het herschikken van elementen of het slepen van bestanden). Het doel van dit criterium is om ervoor te zorgen dat gebruikers die geen muis kunnen gebruiken, zoals mensen met motorische beperkingen of mensen die afhankelijk zijn van aanraakinterfaces, alternatieve manieren hebben om dezelfde acties uit te voeren.

Sommige applicaties en websites vereisen dat gebruikers items slepen om acties uit te voeren, zoals het verplaatsen van elementen in een lijst of het herschikken van grafische objecten. Dit kan moeilijk of onmogelijk zijn voor gebruikers die geen muis of touchpad kunnen gebruiken, of voor gebruikers met beperkte precisie in hun bewegingen.

Wat betekent dit in de praktijk? ​

Het criterium betekent dat wanneer een toepassing een actie biedt die via een sleepbeweging kan worden uitgevoerd (bijvoorbeeld het herschikken van een lijst), de gebruiker een alternatieve manier moet krijgen om dezelfde actie uit te voeren zonder het gebruik van een sleepbeweging.

De alternatieve methoden kunnen bijvoorbeeld bestaan uit knoppen, toetsenbordondersteuning of andere interactieve elementen die een soortgelijke functionaliteit bieden zonder dat de gebruiker de muis of touchinterface hoeft te gebruiken.

Voorbeeld van het probleem ​

Stel je voor dat je een lijst hebt waarin de gebruiker items moet herschikken door deze te slepen, bijvoorbeeld in een drag-and-drop interface. Voor sommige gebruikers kan het moeilijk zijn om de juiste precisie of kracht te gebruiken om een item correct te slepen.

html
<!-- Onjuiste implementatie -->
<div id="draggableItem" class="draggable">Sleep mij om te herschikken</div>

In dit geval kunnen gebruikers die geen muis gebruiken of beperkte motoriek hebben, moeite hebben om het item te slepen en het gewenste resultaat te bereiken.

Oplossing voor dit probleem ​

Om te voldoen aan dit criterium, moet je alternatieve manieren bieden om dezelfde actie uit te voeren zonder de behoefte aan een sleepbeweging. Dit kan worden bereikt door toetsenbordondersteuning, knoppen of andere mechanismen toe te voegen die dezelfde functionaliteit bieden.

html
<!-- Correcte implementatie -->
<div id="draggableItem" class="draggable">
  <button id="moveItem">Verplaats item</button>
</div>

In dit voorbeeld is een knop toegevoegd die de gebruiker in staat stelt om het item te verplaatsen zonder het te hoeven slepen. Dit biedt een alternatieve manier van interactie voor gebruikers die mogelijk moeite hebben met sleepbewegingen.

Alternatieven voor sleepbewegingen ​

  1. Toetsenbordondersteuning: Voor gebruikers die geen muis of touchpad kunnen gebruiken, kun je toetsenbordondersteuning bieden, zoals de pijltjestoetsen om items te verplaatsen.
  2. Knoppen of schakelaars: Voeg knoppen toe waarmee gebruikers elementen kunnen verplaatsen zonder te slepen.
  3. Formulieren met keuzelijsten: Bied een formulier of keuzelijst waarmee de gebruiker een volgorde kan selecteren, in plaats van het visueel slepen van elementen.

Voorbeeld van toetsenbordondersteuning ​

Je kunt toetsenbordondersteuning implementeren door de gebruiker in staat te stellen om items te verplaatsen met de pijltjestoetsen.

html
<!-- Voorbeeld van toetsenbordondersteuning -->
<div id="draggableItem" class="draggable" tabindex="0">
  <button id="moveItemUp">Beweeg omhoog</button>
  <button id="moveItemDown">Beweeg omlaag</button>
</div>

Hier kunnen gebruikers de knoppen gebruiken om het item omhoog of omlaag te verplaatsen zonder de muis te gebruiken, wat een toegankelijkere oplossing is.

Belangrijke overwegingen ​

  • Alternatieven voor touchbewegingen: Wanneer de interface afhankelijk is van een touchinterface (zoals mobiele apps), moeten gebruikers ook alternatieve methoden hebben om dezelfde acties uit te voeren zonder touchbewegingen.
  • Toegankelijkheid op verschillende apparaten: Zorg ervoor dat de alternatieve methoden goed werken op verschillende apparaten, zoals desktopcomputers, smartphones en tablets.
  • Testen met assistieve technologieën: Test je interface met verschillende assistieve technologieën om ervoor te zorgen dat de alternatieven goed worden ondersteund en correct functioneren.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: WAVE kan helpen om de toegankelijkheid van je site te testen, inclusief drag-and-drop-functionaliteit en de beschikbaarheid van alternatieve methoden. WAVE Tool.
  • aXe Accessibility Tool: aXe helpt bij het testen van de toegankelijkheid van interacties, inclusief alternatieve manieren van interactie voor gebruikers die geen gebruik kunnen maken van sleepbewegingen. aXe Tool.

Referenties ​