Доступные анимации с prefers-reduced-motion
Учитывайте потребности доступности, отключая или уменьшая анимации для пользователей, чувствительных к движению.
«Доступные анимации с prefers-reduced-motion» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Почему важно уменьшать движение
У некоторых пользователей есть вестибулярные расстройства, эпилепсия или другие состояния, при которых анимации могут быть вредны. CSS предоставляет медиазапрос prefers-reduced-motion, чтобы определить и учесть системные настройки пользователя.
Медиазапрос prefers-reduced-motion
Значения медиазапроса:
no-preference— пользователь не указал предпочтенийreduce— пользователь включил уменьшение движения в настройках OS
<div class="box"></div>
Радикальный вариант (не рекомендуется)
Распространённая, но грубая реализация, отключающая все анимации. Она также убирает полезные и не вызывающие дезориентации подсказки движения:
<div class="box"></div>
Лучше: включение движения по запросу
Более безопасный подход: определяйте анимации только для пользователей без предпочтений по движению, оставляя состояние без движения по умолчанию:
<button class="btn">Button</button>
<div class="card">Card</div>
Замена типов анимации
Заменяйте дезориентирующее движение (перемещение, масштабирование, вращение) доступными альтернативами (прозрачностью, цветом) для пользователей, предпочитающих уменьшенное движение:
<div class="card demo-hover">Hover me</div>
Бесконечные анимации
Бесконечные анимации (индикаторы загрузки, пульсация) особенно проблематичны. Предоставляйте статичный резервный вариант:
<div class="spinner"></div>
Параллакс-эффекты
Прокрутка с параллаксом может вызывать сильную укачиваемость. Всегда отключайте её для пользователей, предпочитающих уменьшенное движение:
<div class="parallax">Parallax section</div>
Доступ из JavaScript
Проверяйте предпочтение в JavaScript при использовании интерфейса веб-анимаций или библиотек прокрутки:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG и движение
Критерий WCAG 2.3.3 (AAA) требует, чтобы анимации, запускаемые взаимодействием, можно было отключить. Использование prefers-reduced-motion — рекомендуемый подход CSS для соответствия этому критерию.
Проверка уменьшенного движения
На вкладке «Отрисовка» в Chrome DevTools включите параметр «Эмуляция CSS prefers-reduced-motion: reduce», чтобы выполнить проверку без изменения настроек OS. В macOS откройте: «Системные настройки» → «Универсальный доступ» → «Уменьшение движения».
Документирование назначения
Комментируйте анимации, объясняя, являются ли они функциональными или только декоративными. Для функциональных анимаций (обозначающих процесс или ход выполнения) должны быть доступны альтернативы; декоративные можно просто удалить.
Быстрая проверка
Какой подход лучше всего подходит для обработки prefers-reduced-motion при эффекте приподнимания карточки при наведении?
Повторение
Используйте prefers-reduced-motion: reduce, чтобы определить чувствительность к движению. Вместо отключения всех анимаций оставляйте состояние без движения по умолчанию и включайте движение только внутри запросов no-preference. Для пользователей, предпочитающих уменьшенное движение, заменяйте дезориентирующие анимации преобразования переходами прозрачности или цвета. Проверяйте результат с помощью эмуляции в DevTools.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Доступные анимации с prefers-reduced-motion» бесплатный?
Да — полный текст урока «Доступные анимации с prefers-reduced-motion» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Доступные анимации с prefers-reduced-motion»?
Учитывайте потребности доступности, отключая или уменьшая анимации для пользователей, чувствительных к движению. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Доступные анимации с prefers-reduced-motion»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис @keyframes и свойство анимации
- Направление анимации, режим заполнения и итерации
- Связывание и последовательность анимаций
- Доступные анимации с prefers-reduced-motion