Toegankelijkheid voor prikkelgevoelige bezoekers: wat jouw website kan doen
Ongeveer 20% van de bevolking is in meer of mindere mate prikkelgevoelig. Bewegende elementen, flitsende content, autoplay-geluid en drukke lay-outs zijn voor hen geen irritatie maar een fysieke of cognitieve barrière. WCAG heeft hier concrete criteria voor. En de aanpassingen die je doorvoert voor prikkelgevoelige bezoekers, maken je website ook beter voor iedereen die even moe is, haast heeft of in een drukke omgeving zit.
Wie zijn prikkelgevoelige bezoekers?
Prikkelgevoeligheid is geen enkelvoudige aandoening. Het is een eigenschap die voorkomt bij meerdere groepen mensen, elk met hun eigen ervaring van en behoeften rondom digitale omgevingen.
| Autisme spectrum | ADHD | Migraine |
|---|---|---|
| 1 op 100 mensen in Nederland heeft autisme | 5 à 7% van de bevolking heeft ADHD | 15% van de bevolking heeft migraineaanvallen |
| Mensen met autisme verwerken zintuiglijke prikkels anders en soms intenser. Bewegende elementen, plotseling geluid en visuele drukte kunnen de concentratie volledig verstoren. Voorspelbaarheid en rust in de lay-out helpen enorm. | Bewegende content trekt de aandacht weg van waar die eigenlijk naartoe moest. Iemand met ADHD die een formulier invult en dan een animatie in de zijbalk ziet, kan de draad kwijtraken. Minder beweging betekent meer focus. | Felle kleuren, knipperende elementen en hoog contrast kunnen een migraineaanval uitlokken of verergeren. Iemand met migraine kan een website letterlijk niet openen als die te veel visuele prikkels bevat. |
Naast deze drie groepen zijn er ook mensen met vestibulaire stoornissen die duizelig worden van bewegende content, mensen met fotosensitieve epilepsie die door flitsende elementen een aanval kunnen krijgen en mensen die tijdelijk extra prikkelgevoelig zijn door stress, vermoeidheid, medicatie of hersenschudding. De groep is groter dan je denkt.
Sommige mensen zijn gevoeliger voor prikkels. Voor hen is een drukke website niet onprettig maar onbruikbaar
Wat WCAG hierover zegt
De WCAG-criteria die het meest relevant zijn voor prikkelgevoelige bezoekers, vallen grotendeels onder het principe Bedienbaar. Ze zijn niet altijd de bekendste criteria, maar ze hebben een directe impact op een aanzienlijke groep bezoekers.
2.2.2: Pauzeren, stoppen, verbergen
Niveau A: Verplicht
| Wat het betekent | Waar het misgaat |
|---|---|
| Bewegende, knipperende of scrollende content die automatisch begint en langer dan vijf seconden duurt, moet door de gebruiker kunnen worden gepauzeerd, gestopt of verborgen. Dat geldt voor carrousels, scrollende tekstbanden, geanimeerde infographics en video's die automatisch worden afgespeeld. | Een homepage met een carrousel die automatisch doorscrolt, zonder pauzeknop. Een scrollende balk met nieuws of tweets onderaan de pagina. Een hero-sectie met een achtergrondvideo die niet gestopt kan worden. Al deze situaties zijn een schending van dit criterium én een barrière voor prikkelgevoelige bezoekers. |
2.3.1: Drempelwaarde van drie flitsen of eronder
Niveau A: Verplicht
| Wat het betekent | Praktisch |
|---|---|
| Webpagina's mogen geen content bevatten die meer dan driemaal per seconde flitst. Dit criterium is er specifiek voor mensen met fotosensitieve epilepsie, maar het raakt ook mensen met migraine en vestibulaire stoornissen die gevoelig zijn voor snel bewegende of knipperende content. | Het gaat om zichtbare flitsen in een groot gebied. Een subtiele hover-animatie valt er doorgaans buiten. Een GIF of video die snel knippert of flitst, kan een probleem zijn. Test dit met de Photosensitive Epilepsy Analysis Tool (PEAT) als je twijfelt. |
1.4.2: Audiobeheer
Niveau A: Verplicht
| Wat het betekent | Waarom dit belangrijk is |
|---|---|
| Geluid dat automatisch wordt afgespeeld en langer dan drie seconden duurt, moet gestopt, gepauzeerd of qua volume beheerd kunnen worden. Dit geldt voor achtergrondmuziek, automatisch afspelende video's met geluid en geluidselementen die bij het laden van de pagina starten. | Onverwacht geluid is een van de sterkste prikkels. Voor iemand met autisme of ADHD kan een autoplay-video met geluid zo overweldigend zijn dat de hele pagina wordt gesloten. Voor mensen die schermleessoftware gebruiken, overlapt het geluid bovendien met de voorleesstem. |
prefers-reduced-motion: CSS-mediaquery voor verminderde beweging
Best practice: Sterk aanbevolen
| Wat het is | Hoe je het toepast |
|---|---|
| Zowel iOS, Android, Windows als macOS bieden een systeeminstelling waarmee gebruikers kunnen aangeven dat ze minder beweging op hun scherm willen. De CSS-mediaquery prefers-reduced-motion laat je hierop reageren. Als die instelling aan staat, passen je animaties zich automatisch aan. | Dit is één van de krachtigste en makkelijkste verbeteringen die je kunt doorvoeren voor prikkelgevoelige bezoekers. @media (prefers-reduced-motion: reduce) { , ::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } |
Wat je in de praktijk aanpast
Prikkelgevoeligheid vraagt om keuzes op meerdere vlakken: beweging, geluid, structuur en visueel ontwerp. Dit zijn de meest voorkomende problemen en hoe je ze oplost.
| Wat bezoekers belast | Wat bezoekers helpt |
|---|---|
| Carrousel die automatisch doorschuift, zonder pauzeknop of manier om hem te stoppen. | Carrousel met zichtbare pauzeknop, of een statische versie voor gebruikers met prefers-reduced-motion aan. |
| Hero-video die automatisch afspeelt met geluid bij het laden van de pagina. | Video die gedempt begint of pas afspeelt na een klik. Altijd een zichtbare pauze- of stopknop. |
| Animaties die blijven herhalen zolang de pagina open is, ook als de gebruiker er niet mee bezig is. | Animaties die één keer afspelen en stoppen, of helemaal uitblijven als prefers-reduced-motion aan staat. |
| Pop-ups of notificaties die plotseling van de zijkant inschuiven en de aandacht stelen. | Meldingen die niet bewegen maar statisch verschijnen, met een duidelijke sluitknop. |
| Achtergrondpatronen of drukke texturen die de tekst visueel moeilijk leesbaar maken. | Rustige achtergronden met voldoende contrast en witruimte rondom tekst. |
Cognitieve rust gaat verder dan beweging
Een website die rust uitstraalt voor prikkelgevoelige bezoekers, heeft meer nodig dan alleen minder animaties. De structuur en de hoeveelheid informatie die tegelijk wordt aangeboden spelen een minstens zo grote rol.
Eén ding tegelijk
Veel websites tonen tegelijk een slidende header, een chat-widget, een cookie-banner, nieuwsbriefinschrijving en een live-chatknop. Elk van die elementen vraagt aandacht. Voor iemand met ADHD of autisme is het onmogelijk te bepalen waar die aandacht naartoe moet. Minder tegelijk is meer voor iedereen.
Duidelijke structuur en voorspelbaarheid
Navigatie die op elke pagina op dezelfde plek staat, koppen die de inhoud van een sectie samenvatten en een consistente lay-out: dat klinkt als vanzelfsprekend maar wordt op veel websites niet consequent toegepast. Voor mensen met autisme is voorspelbaarheid geen voorkeur maar een noodzaak om een website te kunnen gebruiken.
Voldoende ruimte rondom tekst
Tekst die te dicht op andere elementen staat, kolommen die te smal zijn of regels die te lang zijn, zorgen voor meer moeite bij het lezen. Dat geldt voor iedereen die al iets meer moeite heeft met concentratie. Een regelbreedte van 60 tot 80 tekens, ruime regelafstand en voldoende witruimte zijn kleine instellingen met grote impact.
Curb-cut-effect
Al deze aanpassingen zijn ontworpen voor een specifieke groep, maar ze helpen iedereen. Iemand die laat op de avond moe door je website browst, profiteert van minder beweging. Iemand in een drukke omgeving heeft baat bij een rustige lay-out. Een ouder die met één oog op zijn kind let, wordt minder afgeleid door een stabiele interface. Prikkelreductie is gewoon beter design voor iedereen.
Wat je vandaag al kunt doen
Je hoeft je website niet van voor naar achter te herontwerpen. Dit zijn de stappen die het meeste effect hebben met de minste inspanning.
Voeg
prefers-reduced-motiontoe aan je CSS en schakel daarmee alle herhalende animaties uit voor gebruikers die dat hebben ingesteld. Dit is één stylesheet-aanpassing die direct effect heeft.Controleer alle elementen die automatisch starten: video, audio, carrousels, scrollende tekst. Zorg dat elk van die elementen een zichtbare pauze- of stopknop heeft.
Verwijder achtergrondpatronen of -texturen die interfereren met de leesbaarheid van tekst. Een vlakke achtergrondkleur werkt bijna altijd beter.
Beperk het aantal elementen dat tegelijk om aandacht vraagt. Eén primaire actie per pagina of sectie is genoeg.
Test je website met de systeeminstelling "Verminder beweging" aan op iOS of macOS en controleer wat er verandert. Zie je nog steeds animaties? Dan ontbreekt de implementatie van
prefers-reduced-motion.
Veelgestelde vragen
Mag ik dan helemaal geen animaties meer gebruiken?
Zeker wel. Animaties mogen en kunnen ook bijdragen aan een goede gebruikerservaring. Het gaat erom hoe je ze inzet. Korte, functionele animaties die eenmalig afspelen en betekenis toevoegen, zijn prima. Herhalende, decoratieve animaties die geen informatieve waarde hebben, zijn de categorie die problemen geeft. En met prefers-reduced-motion houd je altijd de controle in handen van de gebruiker zelf.
Onze hero-video is onderdeel van onze merkidentiteit. Moeten wij die weghalen?
Niet per se weghalen, maar wel aanpassen. Zorg dat de video geen geluid heeft bij autoplay, dat er een zichtbare pauzeknop is en dat er via prefers-reduced-motion een statisch alternatief wordt getoond. Zo behoud je het visuele effect voor bezoekers die dat prettig vinden, en ontzorg je bezoekers die er last van hebben.
Is prikkelgevoeligheid meegenomen in een WCAG-audit?
Ja. De WCAG-criteria 2.2.2, 2.3.1 en 1.4.2 worden standaard meegenomen in een volledig WCAG-onderzoek. In een Cardan-audit wordt ook getoetst of autoplay-elementen een pauzeoptie hebben en of knipperende of snel bewegende content aanwezig is. De prefers-reduced-motion-implementatie nemen we ook mee als aanbeveling.
Hoe activeer ik prefers-reduced-motion op mijn eigen apparaat om te testen?
Op macOS: ga naar Systeeminstellingen, Toegankelijkheid en zet "Verminder beweging" aan. Op iOS: ga naar Instellingen, Toegankelijkheid, Beweging en zet "Verminder beweging" aan. Op Windows: ga naar Instellingen, Toegankelijkheid, Visuele effecten en schakel animaties uit. Open daarna je eigen website en controleer wat er verandert.
Prikkelgevoeligheid is een van de minst zichtbare vormen van digitale uitsluiting. De bezoeker die door de bewegende banner de pagina sluit, laat geen spoor achter in je analytics. Je ziet het verlies niet. Maar het is er wel. Kleine aanpassingen in beweging, geluid en structuur kunnen het verschil maken tussen een website die iemand kan gebruiken en een website die te veel is.
Meer lezen? Bekijk ook onze pagina over cognitieve beperkingen, onze blog over afbeeldingen met tekst en het webinar over toegankelijke animaties.
.jpg&w=768&q=80)
.jpg&w=480&q=80)
-10-consistente-navigatie.png&w=480&q=80)
