Золотий відблиск на кнопці може підказати дію, а нескінченне обертання поруч із абзацом — відволікати від читання. Різниця не в тому, наскільки дорого виглядає ефект, а в його ролі. Перед анімацією варто сформулювати просте речення: «Цей рух допомагає людині зрозуміти…». Якщо продовження немає, перед нами декор, який має поступатися змісту. Це редакційний спосіб ухвалення рішень, а не обіцянка зростання продажів.
Спочатку дія, потім ефект
Уявімо картку статті. Її заголовок пояснює тему, відривок дає причину читати, а помітне посилання веде до повного тексту. Коротка зміна кольору під час наведення може підтримати цю дію. Але якщо без переливу посилання не відрізняється від звичайного тексту, проблема в основному оформленні. Спочатку перевіряємо контраст, підпис і розташування, лише потім додаємо рух. На телефоні немає постійного наведення мишею, тому основна дія має бути зрозуміла й без нього.
Три запитання до кожної анімації
Що її запускає: відкриття сторінки, прокручування чи свідома дія? Коли вона закінчується? Чи залишиться зрозумілим результат, якщо рух прибрати? Для розкриття меню важливий видимий відкритий стан, а не довга траєкторія панелі. Для повідомлення про завершення потрібен текст, а не лише зникаюча іскра. У робочому списку корисно окремо позначити декоративні ефекти та ті, що показують зміну стану. Так простіше обговорювати дизайн без суперечки «подобається — не подобається».
Спокійна версія — не порожня версія
MDN описує prefers-reduced-motion як спосіб врахувати системне налаштування користувача щодо зменшення несуттєвого руху. Це не автоматичне виправлення сайту: дизайнер і розробник мають визначити альтернативу. Обертання можна зупинити, масштабний проліт замінити миттєвою появою, але підпис, доступ до меню та зрозумілий стан кнопки повинні залишитися. Не варто механічно приховувати весь анімований блок разом із корисною інформацією. Перевіряйте також ефекти, запущені JavaScript, а не лише CSS.
Коли потрібне керування
Критерій WCAG 2.2.2 рівня A стосується, зокрема, рухомої інформації, яка запускається автоматично, триває понад п’ять секунд і показується поряд з іншим вмістом: за визначених ним умов потрібна можливість паузи, зупинки або приховування, якщо рух не є суттєвим. Для автоматичного оновлення інформації умови окремі. Це не правило «будь-яку анімацію до п’яти секунд дозволено». Критерій 2.3.3 рівня AAA окремо розглядає можливість вимкнути несуттєву анімацію, запущену взаємодією. Відповідність усього сайту WCAG не можна підтвердити одним перемикачем.
Коротка перевірка перед публікацією
Пройдіть той самий маршрут у звичайному режимі та зі зменшенням руху: відкрийте меню, прочитайте картку, перейдіть до статті, поверніться. Переконайтеся, що вміст не зникає і кнопки не втрачають стану. Повторіть маршрут із клавіатури та на телефоні. Якщо є керування анімацією, перевірте його доступність і зрозумілу назву. Окремо оцініть сторінку після хвилини читання: ефект, приємний у перші секунди, може стати нав’язливим. Мета — не прибрати характер сайту, а залишити людині можливість спокійно користуватися ним.