Убедитесь, что страница доступна для использования с отключенной анимацией пользовательского интерфейса

На веб-странице не должны отображаться анимации для пользователя, который отключил анимацию в операционной системе. Анимации могут помочь в использовании продукта, но они также могут вызвать отвлечение, путаницу или тошноту.

Чтобы проверка, что веб-страница доступна для использования с отключенной анимацией пользовательского интерфейса (уменьшенное движение), в средстве отрисовки используйте раскрывающийся список Эмуляция мультимедиа CSS.

На демонстрационной веб-странице тестирования специальных возможностей при отключении анимации в операционной системе или эмуляции параметров с помощью средств разработки веб-страница не использует плавную прокрутку при выборе ссылок меню навигации на боковой панели. Это достигается путем упаковки параметра плавной прокрутки в CSS в запрос к мультимедиа, а затем с помощью средства отрисовки эмулировать параметр операционной системы для уменьшения анимации.

Чтобы проверка, можно ли использовать страницу с отключенными анимациями:

1. Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.

3. В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") .

4. В области навигации средства "Источники" слева выберите styles.css. CSS-файл появится в области редактора .

5. Нажмите клавиши CTRL+F в Windows/Linux или COMMAND+F в macOS, а затем введите @media. Отобразится следующий запрос css media, который подтверждает, что он используется на веб-странице:

   @media (prefers-reduced-motion: no-preference) {
     html {
       scroll-behavior: smooth;
     }
   }
   

Эмуляция параметра операционной системы для уменьшения анимации

Эмуляция параметра операционной системы для уменьшения анимации:

1. Нажмите клавишу ESC , чтобы открыть панель Быстрого просмотра в нижней части devTools. Нажмите кнопку Другие инструменты () на панели быстрого просмотра , чтобы просмотреть список инструментов, а затем выберите Отрисовка.

2. В раскрывающемся списке Эмулировать css media features-reduced-motion выберите prefers-reduced-motion: reduced.

   

3. На веб-странице щелкните синие пункты меню, например Лошади или Альпаки. Теперь веб-страница мгновенно прокручивается до выбранного раздела, а не использует анимацию плавной прокрутки.

4. В средстве отрисовки в разделе Эмуляция css media features-reduced-motion (Эмуляция css media features-reduced-motion) выберите No emulation (Нет эмуляции ), чтобы удалить этот параметр.

Обратите внимание, что на демонстрационной веб-странице по-прежнему выполняются следующие анимации, даже если заданы приведенные выше параметры запроса мультимедиа и эмуляции. При создании веб-сайта убедитесь, что вы исправляете все похожие анимации:

• Анимация элементов синего меню при наведении на них указателя мыши.
• Анимация кругов на ссылках Дополнительно при наведении на них указателя мыши.

См. также

• Имитация уменьшенного движения