Succescriterium 2.5.7 Sleepbewegingen
Niveau AA
Lees de officiële tekst van succescriterium 2.5.7 Sleepbewegingen
Slepen: wat het criterium vraagt
Slepen vraagt drie dingen tegelijk: precies raken, ingedrukt houden en tegelijk bewegen. Voor wie beeft, met zijn ogen aanwijst of een schakelaar gebruikt zijn dat drie opgaven achter elkaar. Kan een functie alleen met slepen worden bediend, zorg dan dat die ook met losse klikken of tikken werkt.
Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA.
Waar het opduikt:
- Schuifregelaars voor een prijsbereik of het volume.
- Lijsten die je herschikt door onderdelen te verslepen.
- Kaarten die je moet verschuiven om een ander gebied te zien.
- Een carrousel die alleen met vegen te bedienen is.
Er is een uitzondering als het slepen de handeling zelf is: een handtekening zetten, tekenen, schilderen. Bij twijfel helpt één vraag: is hetzelfde resultaat met knoppen te bereiken? Bij een schuifregelaar wel, bij een handtekening niet.
Dit criterium gaat over de aanwijzer, niet over het toetsenbord. Dat laatste is 2.1.1. Ook wie een muis of aanraakscherm gebruikt maar niet kan slepen, moet erlangs kunnen. Beide criteria moeten dus kloppen.
Thema’sDoelgroepenWie het raaktHulpmiddelenSlepen: zo test je het
Zoek eerst alles op wat normaal versleept wordt: schuifregelaars, herschikbare lijsten, kaarten en carrousels.
Ga daarna als volgt te werk:
- Bedien het onderdeel zonder ingedrukt te houden.
- Gebruik alleen losse klikken of tikken.
- Lukt het niet, dan is dat de afwijking.
Doe de test daarna nog eens met alleen het toetsenbord. Dat is 2.1.1 Toetsenbord, maar het gaat vaak om dezelfde onderdelen.
Test ook op een aanraakscherm. Onderdelen die met een muis goed werken zijn met een vinger soms alleen te vegen, en dan is er geen alternatief.
Uitzonderingen waar je geen afwijking op hoeft te melden:
- Een handtekening zetten. Het pad dat wordt getrokken is het resultaat.
- Tekenen of schilderen.
- Een handeling waarbij de precieze plek telt en die niet in stappen te doen is.
Thema’sDoelgroepenWie het raaktHulpmiddelenSlepen: knoppen ernaast
De oplossing is bijna altijd hetzelfde: het slepen blijft, er komt een manier met losse klikken naast.
Bij een schuifregelaar gebruik je
input type="range", die met de pijltoetsen te bedienen is. Voor de aanwijzer zet je er twee knoppen naast, met het getal erbij zodat zichtbaar is wat er verandert:<button type="button" aria-label="Minder">−</button> <input type="range" id="prijs" min="0" max="500" step="10" value="100"> <button type="button" aria-label="Meer">+</button> <output for="prijs">100 euro</output>Bij een lijst die herschikt kan worden zet je bij elk onderdeel een knop omhoog en een knop omlaag. Dat werkt met de muis, met een aanraakscherm, met een toetsenbord en met een schermlezer:
<li> Nieuwsbrief <button type="button" aria-label="Nieuwsbrief omhoog">↑</button> <button type="button" aria-label="Nieuwsbrief omlaag">↓</button> </li>Bij een carrousel horen er knoppen voor vorige en volgende te zijn naast het vegen. Bij een kaart knoppen om te verschuiven en te zoomen; de meeste kaartbibliotheken hebben die al, maar soms staan ze uit.
Let op de maat van die knoppen. Zijn ze te klein, dan ruil je het ene probleem in voor het andere. Zie het artikel over de grootte van het aanwijsgebied.
Thema’sDoelgroepenWie het raaktHulpmiddelen