Доступний рух: проектування для віддає перевагу зменшеному руху без втрати сенсу
Як розробити рух, який поважає налаштування обмеженого руху та вестибулярні розлади: що вимагає WCAG, що видалити, що залишити та як перевірити.
Основний винос
Коли користувач вмикає зменшений рух, зберігайте значення кожної анімації, але видаляйте рух: замініть слайди, масштабування та паралакс короткими затуханнями або миттєвими змінами, зупиніть автоматичне відтворення циклів і ніколи не покладайтеся лише на рух, щоб щось повідомити. В Інтернеті визначте налаштування за допомогою медіа-запиту prefers-reduced-motion.
Чому це важливо
Для деяких людей рух на екрані не є справою смаку. W3C зазначає, що анімація може спровокувати вестибулярні розлади з реакціями, які включають нудоту, мігрень і, у важких випадках, необхідність постільного режиму для відновлення. Операційні системи дозволяють людям запитувати менше руху, а в Інтернеті цей запит відображається як медіа-запит preferers-reduced-motion. Його значення зменшується, коли користувач увімкнув налаштування.
Що просить WCAG
Два критерії успіху WCAG стосуються руху. 2.2.2 «Пауза, зупинка, приховати» застосовується до рухів, які починаються автоматично, як-от каруселі та циклічна анімація, і вимагає способу призупинити, зупинити або приховати їх. 2.3.3 Анімація від взаємодій (рівень AAA) застосовується до руху, викликаного взаємодією користувача, і пропонує уникати непотрібної анімації, пропонувати елемент керування для її вимкнення або використовувати налаштування зменшення руху операційної системи. Навіть якщо AAA не потрібен, слідувати йому є хорошою практикою.
Прибрати рух, зберегти значення
Зменшення руху не означає відсутність зворотного зв’язку. Користувач, який натискає кнопку, все одно повинен знати, що вона спрацювала. Мета полягає в тому, щоб зберегти зміну стану та припинити подорожі.
- Видалити або зменшити: великі слайди, масштабування, паралакс, пов’язане прокручування рухів, обертання, цикли автоматичного відтворення та фонове відео.
- Зберегти: зміни кольору та непрозорості, індикатори фокусування, короткі переходи між станами, інформація про прогрес.
- Заміна: переходи сторінок і панелей з коротким перехресним плавним переходом або миттєвою зміною.
- Ніколи: використовуйте рух як єдиний спосіб показати помилку, зміну чи новий елемент.
Реалізація його
В Інтернеті загорніть несуттєвий рух у @media (prefers-reduced-motion: no-preference) або замініть його всередині @media (prefers-reduced-motion: reduce). У JavaScript прочитайте window.matchMedia('(prefers-reduced-motion: reduce)') і прослухайте зміни. Рідні платформи надають ті самі налаштування: SwiftUI, UIKit і Android дозволяють перевірити це. Якщо ваша система проектування має маркери руху, визначте зменшений варіант для кожного, щоб кожен компонент поводився однаково.
Тестування
Увімкніть обмежений рух у вашій операційній системі та пройдіться по кожному натисканню клавіш. Переконайтеся, що нічого важливого не втрачено, що цикли не запускаються автоматично, і що прокручування не переміщує вміст за межі того, що робить прокручування. Інструменти розробника браузера також можуть емулювати налаштування.
Фрагмент впровадження виробництва
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Ключі Principle, які слід запам’ятати
- Рух може викликати у деяких людей фізичну хворобу; поважайте налаштування
- Видалити подорожі, масштабування, паралакс і автовідтворення; зберігати зміни стану та зворотний зв'язок
- WCAG 2.2.2 охоплює автоматичний рух; 2.3.3 охоплює рух від взаємодії
- Визначте налаштування за допомогою prefers-reduced-motion і на кожній рідній платформі
- Створіть зменшений варіант для кожного жетона руху
Часті запитання
Джерела
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Веб-документи
- Motion — Інструкції щодо людського інтерфейсу Apple