html - 使用 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 部分是 SC 2.2.2 pause, stop, hide和 SC 2.3.3 motion from interaction .

在您提供的示例中，动画在页面加载时自动启动，因此不需要交互，因此如果需要，您可以绕过 2.2.3。

同样，2.2.2 指定它仅适用于动画持续时间超过 5 秒的情况，而您的示例是 3 秒。

只要 DOM 顺序正确，失明的访问者就不应该对动画有任何问题。

因此，根据我的解释，您的示例将按原样兼容 WCAG 2.1，但如果您想让它更有用 对于真正的人类访问者，我建议实现 CSS reduce-motion query适用于可能对移动文本有疑问的访问者。对于某些人来说，在网页上移动文本可能会导致眩晕、头晕和/或恶心。