使用 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 暂停、停止、隐藏和SC 2.3.3 交互动作。

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

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

只要 DOM 顺序是正确的，视力不正常的访问者就不应该对动画有问题。

因此，在我的解释中，您的示例将按原样符合WCAG 2.1，但如果您想让它对真实的人类访问者更有用，我建议为可能有移动问题的访问者实施 CSS reduce-motion 查询文本。对于某些人来说，在网页上移动文本会导致眩晕、头晕和/或恶心。