Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung
Toegankelijkheid
Hoe schakelen animaties uit als ze worden geopereerd?
Parallax effecten bij het scrollen, elementen die omhoog vliegen bij het klikken, pagina's die draaien bij het schakelen: Voor mensen met vestibulaire aandoeningen, dergelijke bewegingen veroorzaken duizeligheid, misselijkheid en hoofdpijn. Criterium 2.3.3 van niveau AAA vereist dat animaties die worden veroorzaakt door een operatie worden uitgeschakeld, tenzij de animatie essentieel is voor de functie of informatie.
Wat het criterium vereist
Elke beweging die optreedt als gevolg van een operatie (scrollen, klikken, typen, swipen) kan worden uitgeschakeld zonder dat de functie verloren gaat. Een zachte scroll naar het anker wordt een sprong, een leidend menu verschijnt onmiddellijk, een parallax achtergrond staat stil. Essentiële animaties zijn uitgesloten: een voortgangsindicator die een reeks of een simulatie toont waarvan de inhoud beweging is.
De implementatie via de systeeminstelling
Operating systems hebben een "verminderen beweging" instelling, die de browser doorgeeft als een media query prefereert-reduced-motion. Een stylesheet die alle overgangen en animaties op nul zet onder deze query voldoet aan het criterium voor alles wat via CSS wordt geanimeerd. Voor JavaScript animaties wordt dezelfde query geëvalueerd voordat u begint. Een aparte schakelaar op de pagina is een supplement voor mensen die de systeeminstelling niet kennen.
Zo gaan we ermee om
De meting kan controleren of het stylesheet een regel bevat voor voorkeurs-gereduceerde-beweging en of animaties eronder eindigen; Als JavaScript animaties ernaar luisteren, zal een recensent zien wanneer hij met de instelling aan werkt. Het criterium behoort tot de categorie AAA in kennis.
Voorbeelden
Parallax zonder afsluiten
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}De systeeminstelling Verminder beweging schakelt alle bewegingen uit die niet nodig zijn voor de functie.
- Voeg een blok toe aan de stylesheet die overgangen en animaties naar 0,01 ms duur en scroll-gedrag naar auto zet.
- Evaluatie van de query in JavaScript (matchMedia) en start parallax en vluchteffecten alleen als beweging is toegestaan.
- Test met de systeemopstelling op: Niets mag nog glijden, vliegen of roteren.
- Aanbieden van een zichtbare.
