Sleepbeweging en WCAG: alternatieven voor slepen op uw website

Probeer eens een prijsfilter in te stellen met één hand achter uw rug en de andere in een ovenwant. Het bolletje vastpakken lukt misschien, maar het precies op 150 euro loslaten wordt een gevecht. Voor mensen met een tremor, met spierzwakte, of die een hoofdmuis, mondstick of spraakbediening gebruiken, is dat dagelijkse werkelijkheid. Slepen vraagt om iets vasthouden, bewegen en op het juiste moment loslaten. Daarom heeft WCAG 2.2 een apart criterium voor de sleepbeweging. WCAG verbiedt slepen niet, maar vraagt om een tweede weg.

Wat WCAG vraagt bij een sleepbeweging: criterium 2.5.7

Criterium 2.5.7, “Sleepbewegingen”, is in oktober 2023 met WCAG 2.2 toegevoegd op niveau AA. De regel in gewone taal: alles wat u met slepen kunt doen, moet ook kunnen met een enkele aanwijzer zonder slepen. Dat is een klik, een tik of een reeks losse klikken. Twee uitzonderingen:

• Noodzakelijk. Als slepen de kern van de functie is, zoals een tekenprogramma of een handtekeningveld.
• Bepaald door de browser. Gedrag dat de browser zelf levert en dat u niet heeft aangepast, zoals de standaard schuifbalk van de pagina.

Let op het verschil met criterium 2.5.1, “Aanwijzergebaren”, dat al langer bestond. Dat gaat over gebaren met een pad of meerdere vingers, zoals vegen of knijpen. 2.5.7 gaat over het vasthouden en verplaatsen zelf, ook als de route niet uitmaakt. Een overzicht van de andere nieuwe criteria staat in de nieuwe criteria van WCAG 2.2.

Ook toetsenbordbediening is hier geen vervanging. Een slider die met pijltjestoetsen werkt, is goed voor criterium 2.1.1. Maar iemand met een hoofdmuis heeft geen pijltjestoetsen bij de hand. 2.5.7 vraagt specifiek om een oplossing voor wie met één aanwijzer werkt.

De prijsschuif in de webshop

Dit is het voorbeeld dat bijna elke webshop tegenkomt. Een balk met twee bolletjes, minimum en maximum, die u naar elkaar toe sleept. Er zijn een paar manieren om een alternatief te bieden:

1. Twee invoervelden naast de schuif. “Van” en “tot”, waarin u een bedrag typt. Dat is de eenvoudigste en vaak de prettigste oplossing, ook voor mensen zonder beperking.
2. Klikken op de balk. Een klik ergens op de balk verplaatst het dichtstbijzijnde bolletje naar die plek.
3. Knoppen met plus en min. Elke klik verschuift de waarde met een vaste stap.
4. Vaste prijsklassen als selectievakjes. “Tot 25 euro”, “25 tot 50 euro”, enzovoort. Vaak overzichtelijker dan een schuif.

Optie 1 en 4 lossen ook andere problemen op: ze zijn goed te bedienen met een screenreader en werken op kleine schermen. Meer over filters in het algemeen leest u in het artikel over toegankelijke filters in uw webshop.

Sorteerbare lijsten en kaartjes

Denk aan een verlanglijst waarin u de volgorde zelf bepaalt, een planbord met kaartjes in kolommen, of een formulier waarin u voorkeuren rangschikt. Slepen is daar intuïtief, maar er moet een alternatief zijn. Gangbare oplossingen:

• Knoppen “Omhoog” en “Omlaag” bij elk item.
• Een keuzelijst met de positie, bijvoorbeeld “Plaats 3 van 7”.
• Een menu per kaartje met “Verplaatsen naar…” en de beschikbare kolommen.
• Klik om op te pakken, klik om neer te zetten. Dat is technisch een alternatief zonder slepen, mits het duidelijk is aangegeven.

Geef na het verplaatsen ook een melding, zodat een screenreadergebruiker hoort dat het gelukt is: “Product verplaatst naar positie 2”.

Uploadvakken met slepen en neerzetten

“Sleep uw bestanden hierheen” is een veelgebruikt patroon in formulieren. Het is meestal al goed opgelost, omdat er bijna altijd een knop “Bestand kiezen” bij zit. Controleer wel of die knop echt bestaat, met het toetsenbord bereikbaar is en een duidelijke naam heeft. Bij sommige zelfgebouwde uploadvakken is het hele vak klikbaar, maar is dat nergens aangegeven en krijgt het geen focus. Zet de tekst dan bijvoorbeeld zo: “Sleep een bestand hierheen of kies een bestand”, met dat laatste als knop.

Kaarten, carrousels en afbeeldingsvergelijkers

Een kaart waarop u moet slepen om rond te kijken, heeft baat bij knoppen om te verschuiven en in en uit te zoomen. De meeste kaartdiensten hebben die al; zorg dat ze niet zijn uitgezet. Bij carrousels en sliders zijn pijlknoppen het alternatief voor vegen. Daar gaat het artikel over toegankelijke sliders verder op in.

Een voor-en-na-vergelijker, waarbij u een lijn over twee foto’s sleept, ziet u vaak bij schilders, aannemers en tandartsen. Een eenvoudig alternatief is twee knoppen, “Voor” en “Na”, of de twee foto’s gewoon naast elkaar tonen met een goede alt-tekst.

Zo vindt u sleepbewegingen op uw eigen site

Automatische testtools herkennen dit criterium nauwelijks. U moet het zelf nalopen:

1. Maak een lijst van alles op uw site wat met slepen werkt: schuiven, sorteren, uploaden, kaarten, carrousels, vergelijkers.
2. Probeer elk onderdeel te bedienen met alleen klikken. Dus geen muisknop ingedrukt houden.
3. Probeer het op een telefoon met alleen tikken, niet vegen.
4. Noteer wat niet lukt en kijk of het onderdeel kan worden aangevuld met knoppen of velden, of beter kan worden vervangen.

In WordPress zitten sleepfuncties meestal in plugins: filterplugins, formulierplugins met uploadvelden, sliderplugins. Soms heeft de plugin een instelling om invoervelden of knoppen erbij te tonen. Is dat er niet, dan is een andere plugin of een kleine aanpassing nodig. Meer over wat niveau AA verder van uw site vraagt, staat op de pagina WCAG niveau AA uitgelegd.

Waarom een alternatief voor slepen iedereen helpt

Het alternatief is zelden alleen voor mensen met een beperking. Een prijsveld waarin u “150” typt, is voor iedereen sneller dan een schuif die op 147 blijft hangen. Knoppen om de volgorde te veranderen werken prettiger op een kleine telefoon dan slepen met een duim die de helft van het scherm bedekt. Het is een van de criteria waar een kleine ingreep direct merkbaar is. Voor een breder beeld van wat er bij een toegankelijke site komt kijken, kunt u terecht op onze pagina over website toegankelijkheid.