Вопрос с собеседования · Frontend

Зачем учитывать prefers-reduced-motion?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Как отключить анимации для тех, кому они мешают?
Коротко

У части людей движение на экране вызывает головокружение и тошноту (вестибулярные нарушения), других отвлекает. В системе они включают «уменьшить движение», а сайт узнаёт об этом через медиазапрос prefers-reduced-motion: reduce. В этом режиме убирают крупные перемещения, параллакс, автопрокрутку и автовоспроизведение видео, оставляя мягкие изменения прозрачности. Аналогично существуют prefers-color-scheme (тёмная тема) и prefers-contrast.

  • Анимация не должна быть единственным способом передать информацию
  • Мигание чаще 3 раз в секунду опасно для людей с эпилепсией
  • Проверяют, включив настройку в системе

Подробно

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

Что хотят услышать

  • Кому мешает движение.
  • Медиазапрос prefers-reduced-motion.
  • Что отключать.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Это настройка браузера для экономии батареи, на доступность она не влияет
  • ✓Пользователь просит меньше движения — крупные перемещения и автоанимации убирают
  • ✗Анимации стоит полностью запретить на всех сайтах
  • ✗Этот медиазапрос работает только в мобильных приложениях

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования