Анимация от взаимодействия

Какво се изисква

Анимациите на движение, задействани от потребителско взаимодействие — паралакс при превъртане, преходи между страници, мащабиране при задържане на мишката, ефекти на разкриване при превъртане — трябва да бъдат деактивирани, когато потребителят е поискал намалено движение, освен ако анимацията не е съществена за функцията или предаваната информация.

Стандартният механизъм е CSS медийната заявка prefers-reduced-motion: reduce, която отразява настройката за намалено движение на ниво операционна система, достъпна в macOS, Windows, iOS и Android.

Как да се изпълни изискването

• Обвийте всяко значимо движение (трансформации, големи транслации, паралакс, преходи между страници, анимации, свързани с превъртане) в @media (prefers-reduced-motion: no-preference).
• За анимации, управлявани от JavaScript (GSAP, Framer Motion, Lottie), проверете window.matchMedia('(prefers-reduced-motion: reduce)').matches и или пропуснете анимацията, или я заменете с моментална промяна на състоянието.
• Позволете на критичните функционални анимации (индикатори за зареждане, визуализации при плъзгане) да продължат с по-малка амплитуда при активирано намалено движение — те предават функция, а не украшение.
• Тествайте с активирана настройка macOS Системни настройки → Достъпност → Дисплей → Намали движението, както и с еквивалентните настройки в Windows, iOS и Android.

Чести грешки

• Маркетингови страници с паралакс при превъртане, игнориращи предпочитанието на операционната система за намалено движение.
• Библиотеки за преходи между страници (Barba.js, Astro view transitions в по-стари конфигурации), анимиращи големи транслации независимо от предпочитанието на потребителя.
• Ефекти на повдигане при задържане на мишката върху карти с дълги translateY преходи, причиняващи дискомфорт на потребители с вестибуларни нарушения.
• Анимации, задействани при превъртане на дълги страници, предизвикващи десетки ефекти на движение при превъртане — особено дезориентиращо в голям мащаб.
• Lottie анимации в потоците за включване, изпълняващи се на цял екран без проверка на предпочитанието.

axe и Lighthouse не идентифицират надеждно нарушенията на намаленото движение, но по-новите версии на Lighthouse включват проверка за prefers-reduced-motion в одита за достъпност, а много проверки на дизайн системи вече го налагат.

Защо това е важно

Вестибуларните нарушения — болест на Мениер, вестибуларна мигрена, посттравматичен синдром, персистираща постурална-перцептивна замаяност — могат да бъдат влошени от голямо или неочаквано движение на екрана. Резултатът е реално, физическо гадене или виене на свят, а не просто дискомфорт. Зачитането на prefers-reduced-motion е едно от подобренията на достъпността с най-ниска цена и най-голям ефект, а настройката на ниво операционна система означава, че потребителят вече е съобщил какво му е необходимо.