Zorg dat bezoekers knipperende, scrollende of bewegende onderdelen van een webpagina kunnen pauzeren, stoppen of verbergen

Alle animaties en bewegingen die automatisch starten, langer dan 5 seconden duren en tegelijkertijd met andere inhoud op de pagina worden getoond moeten door een bezoeker kunnen worden gepauzeerd, stopgezet of verborgen.

Hoe pas ik dit toe?

Filmpjes, automatisch afspelende presentaties, animaties, spelletjes in real-time en tickertape zijn voorbeelden van onderdelen die bewegen, scrollen of knipperen. Controleer of er dit soort onderdelen op de website zijn met de volgende kenmerken:

  • Het bewegen, knipperen of scrollen start automatisch.
  • Het bewegen, knipperen of scrollen duurt langer dan 5 seconden.
  • Het onderdeel dat beweegt, knippert of scrollt wordt tegelijkertijd met andere inhoud getoond.
  • Het gaat niet om een animatie die speelt tijdens bijvoorbeeld het laden van een pagina, waarbij geen enkele bezoeker een handeling kan uitvoeren en waarbij het essentieel is dat de animatie wordt getoond. Dit is essentieel als bezoekers anders zouden kunnen denken dat de webpagina is vastgelopen of dat er informatie ontbreekt.

Als er onderdelen zijn met bovenstaande kenmerken, dan moet je aan één van de onderstaande eisen voldoen:

  • Het bewegen, knipperen of scrollen kan door de bezoeker gepauzeerd worden.
  • De bezoeker kan via een knop of een link alle onderdelen die bewegen, knipperen of scrollen uitzetten.
  • De bezoeker kan via een knop of een link de pagina opnieuw laden zonder de onderdelen die bewegen, knipperen of scrollen. De knop of link moet zo hoog mogelijk in de broncode staan.

Pauzeren en hervatten

Als je kiest voor een oplossing waarbij het bewegen, knipperen of scrollen van een onderdeel kan worden gepauzeerd en hervat, dan heb je twee mogelijkheden:

  • Bij hervatten verdergaan op het punt waar de bezoeker was opgehouden. Dit werkt het beste in situaties waarbij bezoekers pauzeren om een tekst te lezen, en in situaties waarbij de inhoud niet real-time is en niet te maken heeft met de status van iets.
  • Bij hervatten springen naar de huidige weergave. Dit werkt het best voor informatie die real-time is of over de status van iets gaat. Bijvoorbeeld een weerradar, een tickertape met beurskoersen, een verkeerscamera of een stopklok op een veilingsite.

Voorbeelden

  • Mediaspelers voor filmpjes, geluidsfragmenten en bewegende beelden moeten een pauzeknop hebben.
  • Geanimeerde GIF-afbeeldingen die langer dan 5 seconden animeren moeten stoppen met animeren wanneer de bezoeker een knop indrukt, bijvoorbeeld de escape-toets (ESC).
  • In HTML mag je het <blink>-element niet gebruiken.
  • In CSS mag je text-decoration: blink; niet gebruiken.

Hoe draagt dit bij aan een betere website?

Sommige bezoekers worden zo afgeleid door knipperende, scrollende of bewegende onderdelen op een webpagina dat zij de hele webpagina niet meer kunnen gebruiken. Dit kan voorkomen bij mensen met een lage geletterdheid, leesmoeilijkheden en intellectuele functiebeperkingen en mensen met attention deficit disorder (ADD). Door je te houden aan de limiet van 5 seconden of mogelijkheden aan te bieden om de beweging uit te zetten kunnen deze bezoekers de website beter gebruiken.

Bouwer of redacteur?

Als er onderdelen zijn die voldoen aan de genoemde voorwaarden dan moet de bouwer mogelijkheden inbouwen om het bewegen, knipperen of scrollen te pauzeren of uit te zetten. Redacteuren moeten opletten dat de inhoud die zij plaatsen niet langer dan 5 seconden beweegt, knippert of scrollt, of dat er mogelijkheden aanwezig zijn om dit te pauzeren of uit te zetten.

Technische details

Hoort bij