Намалено движение

Намаленото движение е потребителско предпочитание, предоставено от всяка съвременна операционна система, което указва, че потребителят не желае анимирано, паралакс или по друг начин натоварено с движение съдържание. Авторите го засичат чрез CSS медийната заявка @media (prefers-reduced-motion: reduce).

Кой има нужда от намалено движение

Няколко групи хора с увреждания са засегнати от движението в уеб:

• Вестибуларни нарушения — виене на свят, болест на Мениер и свързани с тях състояния могат да бъдат предизвикани или влошени от паралакс скролиране, мащабни преходи между страници, видео с автоматично възпроизвеждане на пълен изглед и определени анимации с движение на камерата. Тежките епизоди могат да бъдат обездвижващи.
• Страдащи от мигрена — много модели на мигрена се задействат от аура; движението е един от документираните тригери.
• Фотосензитивна епилепсия — мигащото съдържание над прага на WCAG (повече от три трептения в секунда) може да предизвика припадъци. Предпочитанието за намалено движение сигнализира, че потребителят иска всяко движение да бъде сведено до минимум, дори и под прага.
• Нарушена концентрация — ADHD и свързаните с него състояния правят фоновото движение (движещи се банери, непрекъснати въртележки) значително когнитивно натоварване.

Това е многобройна потребителска група. Различни проучвания поставят комбинираната честота на вестибуларни нарушения + мигрена + ADHD над 20% от възрастните в даден момент от живота им.

Какво прави операционната система

Всички основни операционни системи предоставят предпочитание за намалено движение в настройките за достъпност:

• macOS / iOS — Системни настройки → Достъпност → Дисплей → Намали движението.
• Windows 10/11 — Настройки → Достъпност → Визуални ефекти → Превключвател за анимационни ефекти.
• Android — Настройки → Достъпност → Премахване на анимациите.

Браузърът чете това предпочитание на операционната система и го предоставя на CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Критерии на WCAG

Два критерия на WCAG покриват конкретно движението:

• 2.3.3 Анимация от взаимодействия (AAA, WCAG 2.1+) — движението, задействано от взаимодействие на потребителя, може да бъде изключено, освен ако то не е от съществено значение за функционалността. Изключението „от съществено значение” е тясно: таймерът на CAPTCHA е от съществено значение; анимацията с обръщане на карта, задействана от скрол, не е.
• 2.2.2 Пауза, спиране, скриване (A) — всяко движещо се, мигащо или автоматично актуализиращо се съдържание, продължаващо повече от 5 секунди, трябва да има начин за пауза, спиране или скриване. Това се прилага независимо от предпочитанията на потребителя.

Какво да се прави оперативно

Разумна основна линия:

1. Засичане на предпочитанието. Медийната CSS заявка се използва в всеки stylesheet, добавящ анимация.
2. Намаляване, а не пълно премахване. „Намалено” не означава задължително „нулево”; избледняването за 100 ms обикновено е приемливо там, където появяването с плъзгане за 600 ms не е.
3. Одит на проблемните елементи. Паралакс при героя, ефекти при проследяване на мишката, анимации при преход между страници, безкрайно скролиращи елементи, видеа с автоматично възпроизвеждане — това са основните, за които е необходим резервен вариант с намалено движение.
4. По подразбиране — по-малко движение. Много дизайн системи започват да обръщат наопаки подразбирането: анимацията се доставя само когато е изрично включена за всеки компонент поотделно.