Prístupné animácie na webe: prefers-reduced-motion, ovládanie a bezpečný pohyb

Prístupné animácie na webe: kedy pohyb pomáha a kedy škodí

Animácia dokáže vysvetliť postup, upozorniť na chybu vo formulári alebo dodať značke charakter. Pre časť návštevníkov ten istý pohyb znamená závrat, nevoľnosť alebo rozptýlenie, s ktorým nedočítajú ani jednu vetu. Prístupné animácie na webe preto rátajú s tým, že pohyb musí byť jemný, zastaviteľný a prispôsobiteľný nastaveniu návštevníka.

Tento článok sa venuje výhradne pohybu. Všeobecné požiadavky WCAG 2.2 a právny rámec okolo European Accessibility Act sme rozobrali v článku o prístupnosti webu po roku 2025. Výber formátu animácie rieši porovnanie Lottie, GIF a MP4/WebM a vplyv na rýchlosť článok o Lottie animáciách a Core Web Vitals. Tu ide o to, ako pohyb navrhnúť a naprogramovať tak, aby bol bezpečný.

Koho pohyb na webe ruší

Nepotrebujete lekársku diagnózu, aby vám pohyb na stránke prekážal. Prístupnostné zdroje popisujú hlavné skupiny problémov a pri navrhovaní prístupných animácií na webe treba počítať s každou z nich, lebo vyžadujú trochu iné opatrenie.

Presné počty postihnutých tu zámerne neuvádzame, pretože nemáme primárny zdroj, ktorý by ich pre web spoľahlivo podložil. Argument stojí aj bez čísla, lebo úprava je lacná a rozhoduje o tom, či si stránku návštevník vôbec prečíta.

Čo WCAG 2.2 vyžaduje pri pohybe

Pri prístupných animáciách na webe sa pohybu týkajú štyri kritériá. Dve patria do úrovne A, ktorú by mal spĺňať každý web, a dve do úrovne AAA. Znenie a úrovne sme overili priamo v špecifikácii WCAG 2.2.

Pri kritériu 2.2.2 sa ľahko prehliadne, čo znamená slovo „automaticky“. Podľa dokumentu Understanding WCAG 2.2.2 ide o obsah, ktorý sa spustí bez priameho zásahu používateľa, ale aj o obsah spustený nepriamo, napríklad umiestnením kurzora na prvok alebo zobrazením prvku pri posúvaní. Animácia, ktorá sa rozbehne, keď sa posuniete k nej, teda spadá pod kritérium rovnako ako video spustené hneď po načítaní.

Úroveň AAA nemusí byť cieľom celého webu. WCAG sám v poznámke ku konformite uvádza, že sa neodporúča vyžadovať ju ako všeobecnú politiku pre celé weby, lebo sa ju nedá splniť pre každý obsah. Kritérium 2.3.3 sa však plní lacno, pretože samotné WCAG medzi postupmi uvádza použitie prefers-reduced-motion v CSS (technika C39) aj v JavaScripte (technika SCR40). Kto rieši obmedzenie pohybu, splní ho zároveň.

prefers-reduced-motion v CSS: základ prístupných animácií

Základ stojí na jednej media feature. Podľa dokumentácie MDN táto media feature zisťuje, či používateľ zapol vo svojom zariadení nastavenie na minimalizáciu nepodstatného pohybu. Má dve hodnoty. Hodnota reduce hovorí, že nastavenie je zapnuté, hodnota no-preference znamená, že používateľ žiadnu preferenciu nezadal. MDN označuje funkciu za široko dostupnú vo všetkých prehliadačoch od januára 2020, takže ju môžete používať bez záložného riešenia.

Hodnota sa volá reduce, nie remove. Web.dev v článku o prefers-reduced-motion pripomína, že cieľom je pohyb obmedziť a nemusí zmiznúť celý. Stránka s obmedzeným pohybom môže mať prelínanie, zmenu farby alebo jemný posun o pár pixelov.

Dva spôsoby zápisu

Prvý spôsob vychádza z bezpečného základu a pohyb pridáva len tým, ktorí nepovedali, že ho nechcú. Web.dev tento prístup označuje za odporúčaný. Hodí sa pre nové komponenty.

.mv-card {
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .mv-card {
    transition: opacity 0.4s ease, transform 0.6s ease;
  }
  .mv-card:not(.is-visible) {
    transform: translateY(48px);
  }
}

Druhý spôsob pridáva výnimky k hotovému webu. Nechajte základ a v bloku reduce vypnite to, čo hýbe veľkými plochami.

@media (prefers-reduced-motion: reduce) {
  .mv-parallax {
    transform: none !important;
  }
  .mv-reveal {
    transform: none;
    transition: opacity 0.3s ease;
  }
  .mv-marquee {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

Pozor na skratku v podobe plošného resetu cez selektor *. Vypnúť všetko naraz je rýchle, ale kód, ktorý čaká na udalosť animationend, sa potom nikdy nespustí, pretože animácia sa nekoná. Zoznam konkrétnych prvkov je robota navyše, no nerozbije nič, čo funguje.

Bezpečné náhrady pohybu: menej, nie nula

Najčastejšia chyba pri obmedzení pohybu je vypnúť všetko a stratiť tým aj informáciu, ktorú animácia niesla. Prístupné animácie na webe majú v obmedzenom režime menej pohybu, nie menej obsahu. Rozbaľovacie menu, ktoré len zmizne a objaví sa, funguje. Krok procesu, ktorý sa pohybom vysvetľoval, potrebuje inú formu vysvetlenia. MDN v príklade nahrádza zväčšovanie pomalším prelínaním, čo je rovnaký princíp.

Pri statickej náhrade treba vybrať správnu snímku. Prvá snímka animácie často býva prázdna alebo neúplná. Vyberte tú, ktorá nesie zmysel celej scény, a vyexportujte ju ako poster. Je to práca navyše pre animátora, no bez nej dostane návštevník s obmedzeným pohybom horší web ako ostatní.

Pohyb v návrhovom systéme

Ak má firma design systém, patrí obmedzená verzia pohybu tam. Každý animovaný komponent by mal mať zapísané, čo robí v plnej podobe a čo pri reduce. Vtedy nikto neskôr nemusí hádať, čo sa má stať s posuvným panelom, a testovanie sa zjednoduší na porovnanie dvoch stavov.

prefers-reduced-motion v JavaScripte: matchMedia

Prístupné animácie na webe majú dve vrstvy. CSS pokryje prechody a keyframe animácie, ale nezastaví skript, ktorý pohyb riadi sám. Lottie prehrávač, animácia cez Canvas alebo video na pozadí potrebujú kontrolu v JavaScripte. Web.dev upozorňuje, že pri animáciách v JavaScripte treba zmeny preferencie sledovať sám a rozbehnuté animácie zastaviť ručne.

Podľa dokumentácie MDN vráti window.matchMedia() objekt MediaQueryList s vlastnosťou matches a udalosťou change. Metóda je dostupná vo všetkých prehliadačoch od júla 2015. Stačí teda jeden objekt a jeden poslucháč.

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

const anim = lottie.loadAnimation({
  container: document.querySelector('.mv-lottie-slot'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  path: '/animacie/ikona.json'
});

function applyMotionPreference() {
  if (reduceMotion.matches) {
    anim.goToAndStop(0, true); // statická snímka namiesto slučky
  } else {
    anim.play();
  }
}

anim.addEventListener('DOMLoaded', applyMotionPreference);
reduceMotion.addEventListener('change', applyMotionPreference);

Ukážka používa metódy z README knižnice lottie-web. Animáciu nespúšťa automaticky, počká na DOMLoaded a až potom rozhodne, či ju prehrať alebo zastaviť na prvej snímke. Poslucháč change zabezpečí, že zmena nastavenia v systéme sa prejaví aj bez obnovenia stránky. Ak druhú snímku považujete za výstižnejšiu, zmeňte číslo snímky. Ako animáciu načítať až vtedy, keď je potrebná, popisuje článok o Core Web Vitals pri Lottie.

Rovnaká logika platí pre video na pozadí. Atribút autoplay v HTML nechajte tak, aby video bez skriptu nebežalo. Skript ho spustí len vtedy, keď reduceMotion.matches vráti false. Volanie video.play() vracia sľub (promise), ktorý prehliadač môže odmietnuť podľa svojej politiky automatického prehrávania, preto ho zachyťte cez catch. Pri návrate k obmedzenému pohybu zavolajte video.pause() a nechajte viditeľný poster alebo snímku.

Ovládanie pohybu: pozastaviť, zastaviť, skryť

Nastavenie prefers-reduced-motion chráni len tých, ktorí ho v systéme zapli. Kritérium 2.2.2 pritom vyžaduje mechanizmus, ktorý má používateľ priamo na stránke, keď sa pohyb spustí sám, trvá viac ako päť sekúnd a beží popri inom obsahu. Podľa WCAG je päť sekúnd dosť dlhá doba na upútanie pozornosti, no nie taká dlhá, aby sa nedala prečkať. Návštevník, ktorý o systémovom nastavení nevie, sa k vypnutiu pohybu dostane iba cez ovládanie na stránke.

Pri jednoduchej dekoratívnej animácii stačí bežné tlačidlo. Musí to byť skutočný prvok <button>, ktorý funguje z klávesnice, má zrozumiteľný text a je v poradí prvkov pred animáciou alebo hneď pri nej.

<button type="button" class="mv-motion-toggle">Pozastaviť animáciu</button>

const toggle = document.querySelector('.mv-motion-toggle');
let paused = reduceMotion.matches;

toggle.textContent = paused ? 'Spustiť animáciu' : 'Pozastaviť animáciu';

toggle.addEventListener('click', () => {
  paused = !paused;
  if (paused) { anim.pause(); } else { anim.play(); }
  toggle.textContent = paused ? 'Spustiť animáciu' : 'Pozastaviť animáciu';
});

Text tlačidla sa mení podľa stavu, takže čítačka obrazovky vždy oznámi akciu, ktorú tlačidlo vykoná. Ak chcete namiesto toho použiť stavový atribút aria-pressed, ponechajte text nemenný. Kombinovať oboje je zbytočné a mätúce.

Čo z trojice „pozastaviť, zastaviť, skryť“ zvoliť, závisí od obsahu. Videu pristane pozastavenie, aby sa dalo pokračovať. Dekoratívnej slučke stačí zastavenie na statickej snímke. Rotujúci banner sa dá jednoducho skryť. Pohyb, ktorý je podstatný pre aktivitu, napríklad náhľad animácie v nástroji na jej tvorbu, WCAG z povinnosti vyníma. Táto výnimka sa na marketingový hero zvyčajne nevzťahuje.

Blikanie a záblesky: prahy z WCAG 2.3.1

Blikanie je jediná oblasť pohybu, kde ide o bezpečnosť návštevníka. Kritérium 2.3.1 vyžaduje, aby stránka neobsahovala nič, čo bliká viac ako trikrát za ktorúkoľvek jednu sekundu, alebo aby záblesky ostali pod prahmi pre všeobecný a červený záblesk.

Špecifikácia WCAG 2.2 definuje všeobecný záblesk ako pár protichodných zmien relatívnej svetlosti o 10 % alebo viac z maximálnej relatívnej svetlosti (1,0), pričom tmavší obraz má svetlosť pod 0,80. Červený záblesk je pár protichodných prechodov zahŕňajúcich sýtu červenú. Záblesky ostávajú pod prahom aj vtedy, ak ich spoločná plocha nepresiahne 0,006 steradiánu v zornom poli 10 stupňov, čo je 25 % takéhoto poľa.

Pre bežný web poskytuje špecifikácia odhad. Obdĺžnik 341 × 256 pixelov pri zobrazení 1024 × 768 pixelov približne zodpovedá zornému poľu 10 stupňov. Malý blikajúci prvok teda môže prah splniť, veľká plocha zvyčajne nie. Hranice sa však nedajú spoľahlivo posúdiť od oka, najmä pri videu a rýchlych prechodoch.

Praktické pravidlo je jednoduchšie ako výpočet. Do návrhu nezaraďujte stroboskopické efekty, blikajúce prechody medzi scénami ani rýchle striedanie svetlého a tmavého obrazu. Motion grafika a export videa je miesto, kde sa záblesky vkrádajú najčastejšie, preto ich kontrolujte už pri schvaľovaní animácie, nie až po nasadení.

Ako otestovať prístupné animácie na webe

Testovanie zaberie pár minút a nevyžaduje špeciálne nástroje. Stačí prepnúť nastavenie a pozrieť sa na stránku.

Nastavenie v operačnom systéme

• macOS. Podľa podpory Apple zapnite Apple menu, System Settings, Accessibility, Motion a Reduce motion.
• iPhone a iPad. Apple uvádza cestu Settings, Accessibility, Motion a Reduce Motion.
• Windows 11. Microsoft popisuje cestu Start, Settings, Accessibility, Visual effects a vypnutie prepínača Animation effects.
• Android. V pomocníkovi Google ide o Settings, Accessibility, Color and motion a zapnutie Remove animations.

Ako presne prehliadač premietne systémové nastavenie do prefers-reduced-motion, si overte na vlastnom zariadení. Výsledok závisí od kombinácie systému a prehliadača, preto sa nespoliehajte len na jednu platformu.

Emulácia v Chrome DevTools

Najrýchlejšia cesta je emulácia. Podľa dokumentácie Chrome otvorte v DevTools panel Rendering (cez ponuku More tools), v časti Emulate CSS media feature prefers-reduced-motion vyberte hodnotu prefers-reduced-motion: reduce a stránku prejdite. Nie je potrebné meniť nastavenie celého systému.

Postup kontroly

1. Prejdite stránku s emuláciou. Skontrolujte parallax, efekty zjavovania, hero animáciu, carousel aj hover efekty.
2. Prepnite nastavenie počas behu. Otvorte stránku, zmeňte preferenciu a sledujte, či sa bežiaca animácia zastaví bez obnovenia. Tak overíte poslucháč change.
3. Vyskúšajte ovládanie z klávesnice. Tlačidlo na pozastavenie musí byť dostupné klávesom Tab a spustiteľné klávesom Enter alebo medzerník.
4. Zmerajte päť sekúnd. Čokoľvek, čo sa spustí samo a beží dlhšie, musí mať ovládanie.
5. Pozrite sa na blikanie. Pri videu a rýchlych prechodoch prejdite scény po jednej a hľadajte striedanie svetlého a tmavého obrazu.
6. Zapojte reálnych ľudí. Automatická kontrola nezistí, či je náhrada pohybu zrozumiteľná. Postup prípravy popisuje článok o používateľskom testovaní webu.

Kontrolný zoznam prístupných animácií na webe pred nasadením

Súvisiace návody a zdroje

• Prístupnosť webu po roku 2025: Čo má firma technicky skontrolovať
• Lottie vs GIF vs MP4/WebM: ktorý formát animácie je najlepší pre web
• Lottie animácie a Core Web Vitals: ako ovplyvňujú rýchlosť webu
• Používateľské testovanie webu: Ako ho pripraviť a čo merať
• Design systém pre SaaS a aplikácie: Kedy sa oplatí a čo má obsahovať
• 2D vs 3D animácia: ktorú zvoliť pre značku, produkt alebo kampaň

Na záver

Pohyb na webe môže zostať. Rozhodnúť o ňom však musí aj návštevník, cez nastavenie v systéme alebo tlačidlo na stránke, a veľké posuny majú mať jemnejšiu náhradu. Všetko to stojí málo práce.

Prístupné animácie na webe nemusíte robiť naraz. Začnite jedným prechodom. Prejdite stránku s emuláciou reduce, poznačte si, čo sa hýbe príliš, a opravte to. Väčšina webov potrebuje niekoľko riadkov CSS, jednu kontrolu v JavaScripte a tlačidlo pri jednej či dvoch animáciách.

Časté otázky