Достъпно движение: Проектиране за предпочитане на намалено движение без загуба на смисъл
Как да проектираме движение, което зачита настройките за намалено движение и вестибуларните нарушения: какво изисква WCAG, какво да премахнете, какво да запазите и как да тествате.
Ядро за вкъщи
Когато потребителят включи намалено движение, запазете значението на всяка анимация, но премахнете движението: заменете слайдовете, мащабите и паралакса с кратки избледнявания или незабавни промени, спрете автоматично възпроизвеждащите се цикли и никога не разчитайте само на движение, за да съобщите нещо. В мрежата открийте настройката с медийната заявка prefers-reduced-motion.
Защо има значение
За някои хора движението на екрана не е въпрос на вкус. W3C отбелязва, че анимацията може да предизвика вестибуларни нарушения, с реакции, които включват гадене, мигрена и, в тежки случаи, необходимост от почивка в леглото, за да се възстанови. Операционните системи позволяват на хората да поискат по-малко движение, а в мрежата това искане е изложено като медийна заявка за предпочитане на намалено движение. Стойността му се намалява, когато потребителят е включил настройката.
Какво иска 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