Pauzeren, stoppen, verbergen

De Tilburgse Kermis is weer gaande! Wist je dat dit de grootste kermis is van de Benelux? Het is een kilometers lang lint aan attracties, die allemaal om je aandacht schreeuwen door de harde muziek, felle kleuren en lichten en bewegende decoratie. Ik mag hopen dat jouw website of app daar niet mee concurreert.

Laten we dat nagaan, aan de hand van WCAG 2.2.2, Pauzeren, stoppen, verbergen.

WCAG 2.2.2 – Pauzeren, stoppen, verbergen

Net als dat er op de kermis een hoop prikkels zijn die je aandacht willen trekken, kan dat op een website of in een app ook het geval zijn. Als stukken content op een webpagina bewegen (denk aan een automatisch wisselende carrousel of een geanimeerde afbeelding), knipperen (aan en uit, wel of niet zichtbaar), scrollen of automatisch actualiseren, dan kan dit hinderlijk zijn voor mensen met bijvoorbeeld een cognitieve beperking of concentratieproblemen. Wanneer zij de ‘stilstaande’ content op een pagina proberen te lezen, worden zij constant afgeleid door die ‘bewegende’ content. Succescriterium 2.2.2 is ervoor om te zorgen dat mensen die gevoelig zijn voor deze afleiding ook een fijne, toegankelijke ervaring op de website of in de app hebben.

Wat houdt succescriterium 2.2.2 specifiek in?

Voor alle bewegende, knipperende of scrollende content die automatisch start, tegelijk wordt getoond met andere content en langer duurt dan 5 seconden, moet een mechanisme geboden worden om dit te stoppen, pauzeren of te verbergen.

Veelvoorkomende ‘bewegende’ content

Het zal je misschien verbazen hoe vaak ik in een toegankelijkheidsonderzoek een afkeuring moet plaatsen onder dit succescriterium. Hier verschillende situaties die vaak voorkomen:

• Een slider of carrousel waarbij de slides automatisch doorwisselen wat niet gestopt kan worden;

• Een automatisch afspelende video in de hero-sectie van de website die niet gepauzeerd kan worden;

• Een geanimeerde afbeelding, bijvoorbeeld van een persoon, auto of windmolen om maar even een paar te noemen;

• Een pulserende “hotspot” om je aandacht te trekken;

• Een geanimeerde “scroll verder” pijl;

• Een aflopende tijdbalk om aan te geven dat je tijd bijna op is;

• En ga zo maar door.

Er zijn een aantal uitzonderingen waarbij bewegende content als essentieel wordt gezien, bijvoorbeeld een wachtanimatie, maar over het algemeen wordt bewegende content vaak toegevoegd om de website aantrekkelijker te maken. Of met de gedachte dat je gebruikers daarmee helpt door hun aandacht ergens naartoe te trekken. Het kan er leuk uitzien of handig lijken, maar het kan eigenlijk dus ook als heel vervelend worden ervaren. Iets om rekening mee te houden dus!

Mechanisme om beweging te stoppen

Voor het stoppen van beweging zijn er verschillende manieren die je als website- of appbouwer kunt toepassen:

• Het toevoegen van een pauzeer/stop knop. Best practice is als je één knop gebruikt waarmee álle beweging gestopt kan worden.

• Door gebruik te maken van de ‘reduced motion’ instellingen van het besturingssysteem.

Let op! Wat voor dit succescriterium dus niet voldoende is, is als de content stilstaat op het moment dat deze bijvoorbeeld focus krijgt of als je er met je muis op staat. Het gaat er bij dit succescriterium namelijk om dat de bewegende content niet afleidend is als iemand zich op een ander onderdeel van de pagina aan het focussen is.

Een voorbeeld

Om een concreet voorbeeld aan te haken: op de pagina ‘Jouw plek als vrouw bij defensie’ van Werken bij Defensie staat een automatisch afspelende video. Hier hebben ze heel goed gebruik gemaakt van een toegankelijke pauzeerknop bij de video. Helaas als je verder scrolt op de pagina, staat daar ergens een geanimeerde geluidsgolf ter decoratie. Die kan dan weer niet stopgezet of verborgen worden, waardoor de pagina toch niet voldoet aan succescriterium 2.2.2.

Wat ik in dit geval zou doen, is de video niet automatisch laten starten (ondanks dat het dus wel gepauzeerd kan worden wat goed is). Verder zou ik de animatie van de geluidsgolf óf laten reageren op de ‘reduced motion’ instellingen, of er gewoon standaard al een statische afbeelding van geluidsgolven van maken. Ik denk dat dat er net zo leuk uitziet.

Niet-interferentie eis

Succescriterium 2.2.2 is niet voor niets één van de vier succescriteria die vallen onder de zogenoemde “niet-interferentie eis”. Deze eis stelt dat digitale inhoud een gebruiker niet dusdanig mag belemmeren dat de gehele website, pagina of app voor deze gebruiker helemaal onbruikbaar wordt.

Als je door bewegende content zodanig wordt afgeleid dat het je niet meer lukt om je te concentreren op de rest van de ‘stilstaande’ content, dan is dat behoorlijk belemmerend. Álle content op een website, pagina of in een app moet daarom voldoen aan dit succescriterium.

In het kort

Dus, zorg ervoor dat jouw website niet wordt ervaren als de Tilburgse Kermis. Zorg dat er altijd een mechanisme beschikbaar is waarmee alle automatisch bewegende content gepauzeerd, gestopt of verborgen kan worden. Nog beter: ga niet uit van bewegende content die automatisch start, bijvoorbeeld bij video’s in de hero-sectie, maar geef de gebruiker zélf de optie om bewegende of actualiserende content te starten. En denk twee keer na voordat je die ene animatie ‘voor de leuk’ toevoegt.