Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Waarom heeft drag-and-drop een eenvoudig klik-alternatief nodig?
Elke functie die een sleepbeweging vereist — zoals een bestand in een veld slepen of een schuifregelaar verplaatsen — heeft een alternatief met eenvoudige klikken of tikken nodig. Wie alleen kort kan tikken, maar de vinger of muisknop niet ingedrukt kan houden en tegelijk kan bewegen, mislukt met puur slepen. Criterium 2.5.7 "Sleepbewegingen" is nieuw toegevoegd met WCAG 2.2 en sluit precies deze gat.
Bestandsupload, schuifregelaars en sorteerlijsten toegankelijk aanbieden
Drie patronen dekken de meeste gevallen af. Bestandsupload via slepen heeft naast een knop "Bestand selecteren" nodig die het normale bestandsdialoog opent — de meeste systemen brengen het toch mee, het mag alleen niet worden weggestijld. De schuifregelaar, bijvoorbeeld voor een prijsklasse, heeft naast invoeervelden of plus- en minknoppen nodig voor dezelfde waarden. En sorteerbare lijsten, waarin vermeldingen worden hergeordend door te slepen, hebben per vermelding knoppen nodig zoals "omhoog" en "omlaag". De sleepbeweging blijft als comfortabele weg behouden; cruciaal is dat hetzelfde doel ook met afzonderlijke klikken bereikt kan worden.
Zo geeft de controledienst dit criterium aan
Of elke sleepopdracht op uw pagina een klik-alternatief heeft, kan niet betrouwbaar automatisch worden bepaald: de controle zou sleepbewegingen daadwerkelijk moeten uitvoeren en hun effect met alle knoppen vergelijken — onze meetkernel werkt opzettelijk passief en voert geen sleepbewegingen op vreemde pagina's uit. Het controleserverrapport geeft dit criterium daarom openlijk aan als handmatig te controleren punt. Dit volgt ons kernprincipe: elk van de WCAG-criteria verschijnt afzonderlijk in het rapport — geslaagd, geschonden, handmatig te controleren of niet automatisch testbaar. Een lege controle telt als fout, nooit als vrijstelling.
Beispiele
Sortieren nur per Ziehen
<li draggable="true">Aufgabe A</li>
<li draggable="true">Aufgabe B</li><li draggable="true">Aufgabe A
<button type="button" aria-label="Aufgabe A nach oben">↑</button>
<button type="button" aria-label="Aufgabe A nach unten">↓</button>
</li>Ziehen verlangt eine ruhige Hand über einen Weg. Ein Klick je Richtung erreicht dasselbe.
- Zoek alle sleepfuncties van uw website bij elkaar: bestandsupload, schuifregelaars, sorteerbare lijsten, verplaatsbare tegels.
- Plaats naast elk uploadveld een knop "Bestand selecteren" die het normale bestandsdialoog opent.
- Voeg invoervelden of plus- en minknoppen toe aan schuifregelaars voor dezelfde waarden.
- Geef sorteerbare lijsten per vermelding knoppen om omhoog en omlaag te verplaatsen.
- Test elk van deze functies eenmaal zonder enig slepen — alleen met afzonderlijke klikken.