使用 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;}
}
最佳答案
适用于此处的 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适用于可能对移动文本有疑问的访问者。对于某些人来说,在网页上移动文本可能会导致眩晕、头晕和/或恶心。
关于html - 使用 3 秒 CSS 过渡来移动屏幕上的元素是否符合 ADA 标准?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60068968/