Ligipääsetav animatsioon ei sunni kedagi liikumist vaatama ega tekita kellelgi halba enesetunnet. Praktikas tähendab see kolme asja: arvesta operatsioonisüsteemi vähendatud liikumise eelistusega päringu prefers-reduced-motion abil, lisa pausinupp korduvale või automaatselt käivituvale sisule ning väldi välkumist. Nii saab animatsioon teistele kasutajatele alles jääda.
Viga on mõista vähendatud liikumist käsuna „lülita kõik välja”. Hea lahendus on sama saidi teine, rahulikum kujundus.
Kellele võib animatsioon halvasti mõjuda
Liikumistundlikkus on levinud. USA riikliku terviseuuringu andmetel põhinevas Johns Hopkinsi uuringus leiti vestibulaarfunktsiooni häire tunnuseid 35,4%-l vähemalt 40-aastastest USA täiskasvanutest. Kõik neist ei reageeri ekraanil liikumisele. Ent sisekõrvas asuv vestibulaarsüsteem vastutab tasakaalutaju eest ning ulatuslik liikumine ekraanil võib seda segadusse ajada.
W3C kirjeldab vestibulaarseid reaktsioone kui „pearinglust, iiveldust ja peavalu” ning nimetab tavaliseks vallandajaks parallaksiga kerimist. MDN toob probleemina välja ka suurte objektide skaleerimise või nihutamise. Pidev liikumine häirib ka tähelepanuhäiretega inimesi, välkumine on aga ohtlik valgustundliku epilepsiaga inimestele.
Mida WCAG animatsioonilt nõuab
Suurema osa nõuetest katavad kolm WCAG 2.2 edukriteeriumi.
| Kriteerium | Tase | Nõue | Tüüpiline probleem animeeritud saidil |
|---|---|---|---|
| 2.2.2 Paus, peatamine, peitmine | A | Automaatselt algavat liikumist, mis kestab üle 5 sekundi ja toimub muu sisuga samal ajal, peab saama pausile panna, peatada või peita | Avavaate korduses mängivad videod, jooksvad tekstiribad, karussellid, tausta 3D-animatsioon |
| 2.3.1 Kolm välgatust või alla lävendi | A | Miski ei tohi välkuda üle kolme korra sekundis, kui välgatused ületavad määratud lävendeid | Stroboskoopilised üleminekud, digihäire efektid |
| 2.3.3 Toimingutest käivituv animatsioon | AAA | Kasutaja toimingust käivituvat liikumist peab saama välja lülitada, kui see pole hädavajalik | Parallaks, kerimisel suumimine, lehekeeramise üleminekud |
A-taseme kriteeriumid kuuluvad igasse WCAG vastavustasemesse, sealhulgas AA-tasemesse, mida enamasti eesmärgiks seatakse. Euroopa Komisjon loetleb e-kaubanduse Euroopa ligipääsetavuse aktiga hõlmatud teenuste hulgas. AAA-kriteeriumid, näiteks 2.3.3, ei ole tavaliselt kohustuslikud, kuid rohke animatsiooniga saidil on just see kasutajale kõige olulisem. See on selgitus, mitte õigusnõuanne.
Kriteeriumi 2.2.2 juures jääb sageli märkamata kaks asja: viie sekundi erand kehtib ainult liikuvale sisule ning W3C soovitab üht juhtnuppu, mis peatab lehel kogu kriteeriumi alla kuuluva liikumise, mitte eraldi nuppu iga elemendi jaoks.
Kuidas prefers-reduced-motion töötab
Kasutaja määrab eelistuse operatsioonisüsteemis ühe korra ning brauser teeb selle CSS-ile ja JavaScriptile kättesaadavaks. MDN toob järgmised seadistuskohad:
- iOS: Settings > Accessibility > Motion (liikumise seaded)
- macOS: System Settings > Accessibility > Display (uuemates versioonides Motion) > Reduce motion (vähenda liikumist)
- Windows 11: Settings > Accessibility > Visual Effects > Animation Effects (animatsiooniefektid)
- Android 9+: Settings > Accessibility > Remove animations (eemalda animatsioonid)
Lihtne näide CSS-i ja GSAP-i jaoks:
@media (prefers-reduced-motion: reduce) {
.reveal { transition: opacity 150ms ease-out; transform: none; }
}const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(".reveal", { y: 40, opacity: 0, stagger: 0.06 });
});
mm.add("(prefers-reduced-motion: reduce)", () => {
gsap.from(".reveal", { opacity: 0, duration: 0.15 });
});W3C loetleb sama meediapäringul põhineva võtte (tehnikad C39 ja SCR40) kriteeriumi 2.3.3 täitmiseks piisavate lahenduste seas.
Vähendatud liikumine kui eraldi kujundusvariant
Kui kõik animatsioonid lihtsalt eemaldada, tundub sait katkisena: tagasiside puudub, sisu hüppab nähtavale ja isikupära kaob. Asenda liikumine rahulikumate võtetega.
| Täismahus liikumine | Vähendatud liikumisega versioon |
|---|---|
| Parallaksiga kihid | Staatilised kihid ilma sügavussuunalise liikumiseta |
| Tekst liigub 40 px üles | Tekst ilmub sujuvalt 150 ms jooksul |
| Kerimisega juhitav toote 3D-vaade | Kolm paigalseisvat kaadrit koos selgitustega |
| Automaatselt pöörlev 3D-mudel | Staatiline eelvaatepilt, pööramine ainult lohistades |
| Lehe libisemine üleminekul | Kiire sujuv üleminek |
| Kursorile reageeriv avavaade | Valmis kompositsiooniga lõppkaader |
| Kaardi suurendamine kursori all | Värvi või äärise muutus |
Väikesed tagasisideefektid, näiteks nupuvajutuse märguanne või fookusraam, võivad alles jääda. Probleeme tekitab ulatuslik ja ootamatu liikumine suurel ekraanialal. Kui sinu brändil on animatsiooni disainisüsteem, lisa liikumiskõverate ja kestuste tokenite kõrvale vähendatud liikumise token. Nii on igal uuel komponendil kohe mõlemad olekud olemas.
Korduva animatsiooni ja video pausile panemine
Taustavideod ja korduv animatsioon põhjustavad tänapäeva saitidel kõige sagedamini probleeme kriteeriumi 2.2.2 täitmisega. Lahendus:
- Lisa nähtav pausinupp igale automaatselt käivituvale ja tsüklis korduvale elemendile. Nupule peab pääsema klaviatuuriga ning selle ligipääsetav nimi peab muutuma: „Peata taustavideo” / „Esita taustavideo”.
- Ära kasuta vähendatud liikumise korral automaatesitust. Näita eelvaatekaadrit ja lase kasutajal video ise käivitada.
- Jäta valik meelde kogu seansi ajaks, et pausile pandud video jääks pausile ka järgmisel lehel.
- Peata liikumine väljaspool ekraani. Nii ei tööta animatsioon, mida keegi ei vaata, ja säästad akut.
Kodeerimist ja iPhone'i automaatesitust käsitleb meie veebilehe taustavideo juhend.
Auditeeri oma saidi animatsiooni
Lülita telefonis ja sülearvutis sisse vähendatud liikumine ning käi kõik lehed läbi. Märgi iga animatsiooni puhul üles, kas see käivitub ise, kas sellel on paus ja mis seda asendab. Kontrolli samal ajal jõudlust: vähendatud liikumine vähendab sageli põhilõime koormust ja parandab näitajaid, mida käsitleme artiklis „Kas animatsioon aeglustab veebilehte?”
