Minder beweging op je website. Dezelfde duidelijke bediening.

Een projectkaart schuift over het scherm. De achtergrond beweegt langzamer mee. Een titel zoomt naar voren. Elk effect kan een bedoeling hebben, maar samen vragen ze veel aandacht. Voor sommige bezoekers veroorzaakt beweging bovendien ongemak. Ontwerp daarom ook de rustige versie: dezelfde inhoud, dezelfde keuzes en dezelfde feedback, met minder visuele verplaatsing.

De CSS-mediaquery prefers-reduced-motion laat een website reageren op een ingestelde bewegingsvoorkeur. Volgens MDN betekent reduce dat de gebruiker minder niet-essentiële beweging wil. No-preference betekent dat er geen voorkeur kenbaar is gemaakt. Het is geen toestemming om onbeperkt te animeren en ook geen aanwijzing voor een specifieke medische situatie.

Bepaal eerst welke informatie het effect draagt

Schrijf voor elk effect één doel op. Helpt het de bezoeker herkennen dat een kaart is gewijzigd? Laat het zien dat een paneel openstaat? Of is het alleen versiering? Ontwerp vervolgens hoe diezelfde informatie zonder verplaatsing zichtbaar wordt. Een vaste titel, duidelijke paginateller en herkenbare knopstatus kunnen samen meer vertellen dan een lange overgang.

• Decoratie: een zwevend ornament of parallax-achtergrond kan in de rustige versie stil blijven.
• Oriëntatie: vervang een schuivende kaart door een directe wissel, met behoud van titel, positie-indicator en bediening.
• Voortgang: behoud een echte status of meetbare voortgang. Verzin geen percentage om een stilstaande indicator overtuigender te maken.
• Uitleg: wanneer beweging zelf iets demonstreert, onderzoek een bedienbare weergave en een passend tekstueel of statisch alternatief.

W3C noemt bij WCAG 2.3.3 het kunnen uitschakelen van niet-essentiële, door interactie gestarte bewegingsanimatie. Dit criterium heeft niveau AAA. Automatische beweging valt óók onder 2.2.2, niveau A: beweging die langer dan vijf seconden naast andere inhoud doorgaat, moet te pauzeren, stoppen of verbergen zijn, tenzij essentieel. Reduced motion alleen is dus geen bewijs van volledige WCAG-conformiteit.

Werk één carrousel helemaal uit

Neem een fictieve portfolio met drie projecten. De bezoeker wisselt zelf met Vorige en Volgende; er is geen automatische rotatie. In het oorspronkelijke ontwerp schuift de hele kaart horizontaal en vergroot de afbeelding kort. De ontwerpvraag is concreet: kan iemand in beide varianten begrijpen welk project wordt getoond en direct verder navigeren?

BEGINSITUATIE
Project 1 van 3: Atlas. De knop Volgende heeft toetsenbordfocus.

ZONDER VERMINDERDE-BEWEGINGSVOORKEUR
Na activering verschijnt Project 2 van 3: Haven. Een korte, optionele overgang kan de wissel ondersteunen. De focus blijft op Volgende.

MET REDUCE
Na dezelfde activering verschijnt Haven direct, zonder schuiven of zoomen. Titel en positie-indicator veranderen mee. Dezelfde knop houdt focus en blijft bruikbaar.

CONTROLE
Na nogmaals Volgende verschijnt project 3. Na Vorige verschijnt weer Haven. Geen project wordt overgeslagen, inhoud verdwijnt niet en bediening wacht niet op het einde van een animatie.

Reserveer voldoende ruimte voor de kaartinhoud zodat een langere titel de bediening niet onverwacht verplaatst. Maak de actieve titel en positie ook programmatisch begrijpelijk. Controleer met een schermlezer welke wissel wordt aangekondigd; voorkom dat zowel een aparte statusmelding als de volledige kaart dubbel wordt voorgelezen. Het voorbeeld beschrijft ontwerpgedrag, geen reeds geteste productiecomponent.

Bouw de rustige variant als basis

W3C-techniek C39 beschrijft twee routes: beweging uitschakelen bij reduce, of vanuit statische stijlen beweging toevoegen bij no-preference. Die tweede route is een bruikbaar vertrekpunt. Content staat dan standaard op de juiste plek en hoeft niet eerst door een animatie zichtbaar te worden.

Voor het carrouselvoorbeeld betekent dat: de inhoudswissel bepaalt direct titel, index en zichtbare kaart. Een eventuele overgang is een extra presentatielaag. Gebruik geen globale regel die lukraak iedere animatie extreem kort maakt. Controleer componenten afzonderlijk; een draaiend decoratief element en een noodzakelijke toestandswijziging hebben verschillende functies.

JavaScript-effecten vragen hun eigen controle. W3C-techniek SCR40 laat zien hoe JavaScript de mediaquery kan uitlezen. Alleen CSS aanpassen stopt niet automatisch iedere scriptgestuurde beweging. Neem ook canvas, animatiebibliotheken, vloeiend scrollen en paginaovergangen mee in je inventarisatie. Laat een wijziging van de voorkeur tijdens gebruik veilig doorwerken.

Wacht nooit uitsluitend op een verdwenen overgang

MDN documenteert dat transitionend niet wordt verzonden wanneer een overgang ontbreekt of vóór voltooiing wordt verwijderd. Als jouw knop pas daarna weer actief wordt, kan reduced motion de bediening blokkeren. Werk de functionele toestand direct af en behandel afronding van een visueel effect als optioneel. Controleer ook afgebroken animaties en snel herhaald klikken.

Een testplan met duidelijke slaagcriteria

1. Open de pagina met verminderde beweging al ingeschakeld. Controleer de eerste weergave: geen korte zoom of schuif voordat de rustige variant actief wordt.
2. Doorloop alle drie projecten met muis én toetsenbord. Verwacht dezelfde volgorde, titels, links en focuspositie in beide varianten.
3. Wijzig de voorkeur terwijl de pagina openstaat. Controleer dat actieve decoratieve beweging stopt en dat de huidige kaart en bediening intact blijven.
4. Klik snel meerdere keren en wissel van richting. Controleer dat geen knop geblokkeerd blijft door een ontbrekend animatie-einde.
5. Test aankondigingen met een schermlezer en controleer de echte systeemvoorkeur naast eventuele browseremulatie. Noteer browser, apparaat en instelling.
6. Bekijk de overige pagina opnieuw: achtergrondvideo, automatisch bewegende tekst en andere effecten vragen eigen bediening en beoordeling. Eén geslaagde carrouseltest keurt de hele website niet goed.

De rustige variant is klaar wanneer de bezoeker dezelfde taken kan voltooien zonder afhankelijk te zijn van de beweging die je hebt verwijderd. Laat onverklaarde verschillen eerst oplossen. Minder animatie hoort de interface voorspelbaarder te maken, zonder betekenis, toegang of controle te verliezen.

Beeld: AI-gegenereerde clay-illustratie, geen productscreenshot of bewijs van klantresultaten.