Toegankelijke beweging op een website begint met een eenvoudige afspraak: mensen moeten de pagina kunnen begrijpen en hun taak kunnen voltooien zonder afhankelijk te zijn van decoratieve beweging. Behoud animaties die een nuttige verandering verduidelijken, bied een rustigere weergave als iemand minder beweging wenst en geef mensen waar nodig controle over doorlopende beweging.
Voor een bedrijf dat een website laat maken, is de praktische vraag wat er in de briefing moet staan en hoe de oplevering beoordeeld moet worden. Deze gids biedt een overzicht van bewegingen, een beslistabel en een checklist voor acceptatie. U kunt ze gebruiken bij een nieuw ontwerp of een bestaande website, zonder zelf elk implementatiedetail te hoeven bepalen.
1. Geef elk bewegend element een doel
Begin met een lijst van alles wat beweegt tijdens een gewone klantreis. Open de homepage, lees over een dienst, klap een vraag open en ga naar het contactformulier. Neem de openingsanimatie, scrolleffecten, automatische diawisselingen, achtergrondvideo, menuovergangen, laadindicatoren en succesmeldingen mee. Kijk verder dan het opvallendste openingsblok: kleine effecten kunnen zich op een pagina opstapelen.
Beschrijf voor elk onderdeel wat een bezoeker door de beweging te weten komt. Een paneel dat opengaat, kan laten zien waar extra informatie thuishoort. Een voortgangsindicator kan duidelijk maken dat een aanvraag nog wordt verwerkt. Een draaiend decoratief object kan de visuele identiteit ondersteunen, maar mag niet de enige manier zijn om de dienst te ontdekken of de volgende knop te vinden.
Schrijf het beoogde resultaat op voordat u de duur of stijl bespreekt. “De klant kan zien welke vraag openstaat” geeft een ontwerper ruimte om een heldere oplossing te kiezen. “Elke sectie moet het beeld in vliegen” legt een effect vast voordat iemand heeft gecontroleerd of het helpt. Vraag het team om naast het geanimeerde concept ook een stilstaande versie te tonen.
Maak een beknopt overzicht van bewegingen
Een bruikbaar overzicht vermeldt de pagina, het element, de aanleiding, het doel, of de beweging zich herhaalt, het voorgestelde gedrag bij minder beweging en de verantwoordelijke beoordelaar. Voeg een kolom toe voor bewijs: een previewadres, opname of testnotitie. Zo ontstaat een beknopt acceptatiedocument dat u opnieuw kunt raadplegen als een nieuwe campagne weer een carrousel of video toevoegt.
2. Spreek af hoe de rustigere versie werkt
MDN beschrijft prefers-reduced-motion als een manier waarop een website een voorkeur voor minder niet-essentiële beweging kan herkennen. Het is een signaal waarop de implementatie moet reageren. Het inschakelen van de apparaatinstelling past niet automatisch elke animatie op een website aan.
Vraag om een gedragskeuze voor elk effect. Een sterke zoom kan een directe toestandswijziging worden; een bewegende decoratieve achtergrond kan een stilstaand beeld worden. Een uitgeklapt antwoord kan verschijnen zonder over het scherm te bewegen. Neem geen genoegen met “we vertragen alles” als volledig plan: een grote beweging kan ook op lagere snelheid een onnodig onderdeel van de ervaring blijven.
| Element en doel | Rustigere weergave om te bespreken | Acceptatievraag |
|---|---|---|
| Decoratieve beweging in het openingsblok bepaalt de visuele stijl | Gebruik een zorgvuldig ontworpen stilstaande compositie | Kan de bezoeker het aanbod direct lezen en de belangrijkste link gebruiken? |
| Secties verschijnen terwijl de bezoeker scrolt | Toon inhoud zonder grote verplaatsingen of wachttijd | Is elke sectie beschikbaar bij snel scrollen en navigeren met het toetsenbord? |
| Een menu toont navigatiekeuzes | Open en sluit op dezelfde plek met een duidelijke toestand | Kan de bezoeker de links bereiken en terugkeren naar het bedieningselement dat het menu opent? |
| Een carrousel presenteert meerdere aanbiedingen | Bied duidelijke bedieningselementen en een afgesproken stilstaande of gepauzeerde toestand | Zijn alle aanbiedingen bereikbaar zonder de automatische wisselingen te moeten bijhouden? |
| Een formulier geeft verwerking en afronding aan | Behoud begrijpelijke statustekst en een stabiele bevestiging | Weet de bezoeker of die moet wachten, opnieuw proberen of doorgaan? |
Deze tabel is een planningsvoorbeeld, geen bewijs dat een bepaalde website aan een toegankelijkheidsnorm voldoet. Vervang de rijen door de daadwerkelijke onderdelen van uw project. Leg vast wat er bij het eerste laden gebeurt en wat er moet gebeuren als de voorkeur verandert terwijl de pagina openstaat. Vraag de ontwikkelaar aan te geven van welke onderdelen van derden het gedrag apart gecontroleerd moet worden.
3. Maak onderscheid tussen voorkeuren, bediening en toegankelijkheidscriteria
Ondersteuning voor minder beweging en een pauzeknop lossen verwante maar verschillende problemen op. Een voorkeur kan vanaf het begin een rustigere ervaring selecteren. Met een zichtbaar bedieningselement kan iemand doorlopende beweging stoppen tijdens het lezen. De briefing moet beide beschrijven waar ze relevant zijn, zonder een van beide als universele vervanging te beschouwen.
WCAG 2.2-criterium 2.3.3, Animatie uit interacties, valt onder niveau AAA. Het gaat over het kunnen uitschakelen van bewegingsanimaties die door interactie worden gestart, tenzij de animatie essentieel is voor de functionaliteit of informatie. Presenteer dit specifieke criterium niet als een eis van niveau AA.
Criterium 2.2.2, Pauzeren, stoppen, verbergen, valt onder niveau A. De bepaling voor bewegende inhoud geldt wanneer beweging automatisch begint, langer dan vijf seconden duurt en naast andere inhoud wordt getoond, met een uitzondering voor essentiële activiteiten. Er is ook een aparte bepaling voor automatisch bijgewerkte informatie, zonder die uitzondering van vijf seconden. Deze verschillen zijn van belang bij het beoordelen van een carrousel, lopende tekst of geanimeerde achtergrond.
Vraag de leverancier aan welke criteria en welk conformiteitsniveau het project wordt getoetst, wie de beoordeling uitvoert en welk bewijs wordt opgeleverd. Een geslaagde checklist voor minder beweging toont geen volledige WCAG-conformiteit aan. Een beoordeling van beweging is één onderdeel van een bredere beoordeling die ook structuur, invoermethoden, contrast, alternatieven en andere eisen omvat.
Controleer of de bediening echt controle geeft
Een pauzeknop moet vindbaar, begrijpelijk en bruikbaar zijn met de afgesproken invoermethoden. Controleer wat er gebeurt nadat de focus is verplaatst of een ander onderdeel is geopend. Een carrousel die direct verdergaat zodra de bezoeker de pauzeknop verlaat, biedt geen bruikbare leespauze. Spreek af of een voorkeur of pauzekeuze bij het navigeren tussen pagina's behouden blijft en test dat gedrag.
4. Houd de taak uitvoerbaar als beweging verandert
De rustigere versie moet nog steeds als volledige pagina werken. Het verwijderen van een animatie mag geen transparante tekst, navigatie buiten het zichtbare gebied of een knop die op het einde van een animatie wacht achterlaten. Vraag de ontwikkelaar te demonstreren dat de inhoud een bruikbare eindtoestand bereikt, ook als de decoratieve reeks niet wordt uitgevoerd.
Volg de toetsenbordfocus door menu's, dialoogvensters en uitklapbare secties. Kunt u zien waar u bent? Brengt het openen van een onderdeel u in een logische context en keert u na het sluiten terug naar de verwachte plek? Vermijd een ontwerp waarin visuele beweging de enige aanwijzing voor een verandering is. Duidelijke labels, geselecteerde toestanden en een stabiele indeling moeten de betekenis ook overbrengen.
Besteed extra aandacht aan formulieren. Een draaiende vorm alleen maakt niet duidelijk of een aanvraag wordt verwerkt, is mislukt of is geslaagd. Vraag om heldere statusteksten en passende communicatie van belangrijke updates aan ondersteunende technologieën. Als het team de draaiende indicator in de rustigere versie verwijdert, moeten de onderliggende status en de volgende actie beschikbaar blijven.
Vergelijk bij inhoud die met het scrollen meebeweegt langzaam scrollen, snel scrollen en toetsenbordnavigatie. Controleer of koppen, prijzen of bedieningselementen verdwijnen voordat ze gelezen kunnen worden. Essentiële informatie mag niet afhankelijk zijn van een precies getimede handeling. Als een visueel verhaal een reeks stappen vereist, spreek dan een toegankelijke manier af om dezelfde informatie te bereiken zonder die reeks te doorlopen.
Een hypothetische beoordeling van een dienstenpagina
Stel u een adviesbureau voor met een decoratieve animatie in het openingsblok en een contactformulier. In de rustigere versie wordt het openingsblok een stilstaand beeld, verschijnen de dienstdetails direct en behoudt het formulier de verwerkingsmelding en bevestiging. De beoordelaar controleert in beide versies dezelfde route naar een aanvraag. Dit illustreert een acceptatiemethode; het is geen gerapporteerd klantresultaat of belofte van meer conversies.
5. Beoordeel de voltooide pagina's in beide modi
Vraag om de exacte previewversie die voor publicatie is bedoeld. Beoordeel die met de gewone bewegingsinstelling en vervolgens met de voorkeur voor minder beweging van het apparaat of de browser ingeschakeld. Een ontwerpbestand kan de bedoeling overbrengen, maar bewijst niet hoe de gebouwde pagina reageert. Noteer bij elke observatie de browser, het apparaat, de instelling en het pagina-adres.
Gebruik een kleine, herhaalbare reeks taken: lees het aanbod, open de navigatie, klap aanvullende details open en bereik het contactformulier. Neem in een testomgeving de afgesproken succes- en fouttoestanden van het formulier mee. Verstuur geen echte klantaanvragen alleen om animatie te testen. Het projectteam moet een veilige manier bieden om deze toestanden te bekijken zonder operationele berichten te versturen.
Controleer op een telefoon en een desktop en gebruik waar van toepassing ook een toetsenbord naast aanraking of een aanwijsapparaat. Vergroot de tekst om te onderzoeken of bewegende overlays inhoud bedekken. Als een effect afhankelijk is van het aanwijzen met een muis, vraag dan hoe dezelfde informatie via aanraking beschikbaar is. Neem ingesloten boekingstools, video's en andere externe onderdelen van de klantreis mee.
Beschrijf fouten als waarneembare voorbeelden. “Met minder beweging ingeschakeld blijft de contactlink onzichtbaar wanneer het mobiele menu wordt geopend” is concreet genoeg om op te pakken. “De animatie voelt verkeerd” vraagt om meer uitleg. Vermeld de stappen, het verwachte gedrag en een korte opname als het probleem met beweging te maken heeft. Herhaal na een correctie de betreffende taak op de aangepaste preview.
6. Vraag om bewijs dat bij de claim past
Bewaar het overzicht van bewegingen bij de resultaten. Elke rij moet vermelden wat is getest, wat is goedgekeurd, wat nog openstaat en wie verantwoordelijk is voor de volgende actie. Vraag welke pagina's en toestanden daadwerkelijk zijn onderzocht, in plaats van een keurmerk met “toegankelijk” erop. Een geautomatiseerd rapport kan bepaalde problemen helpen vinden, terwijl handmatige taakbeoordeling gedrag blootlegt dat rechtstreeks moet worden geobserveerd.
De Lighthouse-documentatie van Chrome legt uit dat handmatige toegankelijkheidscontroles niet meetellen voor de toegankelijkheidsscore. Een score van 100 toont dus niet aan dat elke toegankelijkheidseis is beoordeeld. Vraag naast het geautomatiseerde rapport ook om de handmatige bevindingen, met name voor bewegingsbediening en de volledige route naar een aanvraag.
Beoordeel de prestaties apart. Vraag met welke versie, welk apparaatprofiel en welke omstandigheden een labresultaat is verkregen, en of belangrijke interacties na het eerste laden zijn gecontroleerd. Een decoratief effect dat op de computer van de ontwerper soepel oogt, moet nog steeds op de afgesproken doelapparaten worden beoordeeld. Een voorkeur voor minder beweging is geen betrouwbare aanwijzing voor een langzamer apparaat, en ook de gewone weergave vereist een passende prestatiebeoordeling.
Formuleer claims bij de overdracht nauwkeurig. “Deze vijf onderdelen getest met minder beweging ingeschakeld in deze browsers” is bruikbaar bewijs. “Volledig toegankelijk omdat animatie is uitgeschakeld” is geen conclusie die deze checklist ondersteunt. Als een bredere toegankelijkheidsbeoordeling deel uitmaakt van het project, leg de reikwijdte en openstaande punten daarvan dan apart vast.
7. Neem beweging op in de briefing en overdracht
Leg deze beslissingen schriftelijk vast voordat u het werk accepteert. Ze maken een visuele voorkeur toetsbaar en helpen toekomstige redacteuren te voorkomen dat een onopgelost probleem opnieuw wordt geïntroduceerd.
- Doel: elk bewegend onderdeel heeft een beschreven functie en een verantwoordelijke voor de inhoud.
- Alternatief: het gedrag bij minder beweging is vastgelegd, geïmplementeerd en op de daadwerkelijke pagina's gecontroleerd.
- Controle: doorlopende beweging en automatische updates hebben de afgesproken bediening en het afgesproken gedrag.
- Continuïteit: inhoud, toetsenbordfocus, statusmeldingen en de belangrijkste klanttaak blijven bruikbaar.
- Bewijs: beoordelingsnotities vermelden de versie, omgevingen, resultaten en openstaande punten.
- Onderhoud: iemand weet hoe nieuwe video's, ingesloten inhoud en campagneonderdelen na publicatie beoordeeld moeten worden.
Stuur uw overzicht, referentiepagina's en belangrijkste klantreis mee met de projectaanvraag. Onze gids voor een websitebriefing helpt de bredere projectomvang te organiseren, en de checklist voor websitevernieuwing helpt bepalen wat op een bestaande website behouden en opnieuw getest moet worden.
Het huidige websitepakket van Digital Studio begint bij EUR 2.190 voor maximaal vijf responsieve pagina's, een SEO-basis, een leadformulier en publicatie op uw domein. Bekijk de actuele diensten en projectomvang en beschrijf uw eisen voor beweging en toegankelijkheid in de websitebriefing. Spreek eventuele specialistische beoordelingen en aanvullend werk expliciet af; ga er niet van uit dat een pakketprijs een bepaalde toegankelijkheidscertificering belooft.
