Использует ли 3-секундный CSS переход для перемещения элемента на экране, совместимого с ADA?

Question

Использует ли CSS переход для перемещения текста с экрана на место на экране, совместимое с ADA (Закон об американцах с инвалидностью)?

h1 {
      text-align: center;
      position: relative;
      animation: heading;
      animation-duration: 3s;
      animation-fill-mode: forwards;
    }
@keyframes heading {
      0% {top: -50px;}
      100% {top: 30vh;}
}

https://codepen.io/KuanaxBon/full/OJVLOmm

Answer 1

Здесь применимы следующие элементы WCAG: S C 2.2.2, пауза, остановка, скрытие и S C 2.3.3 движение от взаимодействия .

В предоставленном вами примере анимация автоматически запускается при загрузке страницы, поэтому для нее не требуется взаимодействие , и поэтому вы можете обойти 2.2.3, если хотите.

Аналогично, 2.2.2 указывает, что это применимо, только если анимация длится более 5 секунд, а ваш пример - 3 секунды.

У невидимых посетителей не должно быть проблем с анимации, если порядок DOM правильный.

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