Использование медиа-запросов для обеспечения доступности

Мерцающие и мигающие анимации могут быть проблематичными для людей с когнитивными проблемами, такими как синдром дефицита внимания и гиперактивности (СДВГ). Кроме того, некоторые виды движения могут вызывать вестибулярные расстройства, эпилепсию, мигрень и светобоязнь. Уменьшение анимаций или полное отключение анимации в зависимости от предпочтений пользователя также может быть полезно для пользователей с низким зарядом батареи или устройствами с низкой производительностью.

Медиа-запрос prefers-reduced-motion позволяет предоставить пользователям, которые настроили предпочтения доступности своей операционной системы на уменьшение движения, опыт с меньшим количеством анимаций и переходов. Он имеет два возможных значения:

no-preference

Указывает, что пользователь не выразил предпочтений системе.

reduce

Указывает, что пользователь уведомил систему о том, что предпочитает интерфейс, в котором минимизировано количество движений или анимации, предпочтительно до такой степени, что все не существенные движения удалены.

В этом примере есть раздражающая анимация, если вы не включили «Уменьшение движения» в ваших предпочтениях доступности.

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Значение prefers-reduced-motion равно reduce, а не «none». Это предпочтение не означает, что все анимации должны быть удалены, что может быть достигнуто с помощью * {animation: none !important;}. Скорее, пользователи ожидают, что анимация движения, включая ту, что вызывается взаимодействием пользователя, будет отключена, если анимация не является необходимой для функциональности или передачи информации (см. WCAG: Анимация от взаимодействия).

• prefers-contrast: для изменения стилей страницы в зависимости от предпочтений пользователя по контрасту
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• Проектирование с уменьшенным движением для чувствительности к движению