可访问的Web动画：动画上的WCAG解释了

通过周到的计划和执行，可以创建可访问的Web动画。关注用户体验（UX）和易用性的战略设计选择至关重要。 Web内容可访问性指南（WCAG）为可访问的动画提供了战术指南。尽管实现细节因上下文而异，但WCAG提供了有关暂停/播放控件，闪烁限制和减少运动选项的建议。规范（版本2.1）提供了更新的，有价值的见解，用于设计可访问的Web动画。

让我们检查关键的WCAG建议：

暂停，停下来，隐藏

该指南建议，自动开始移动，眨眼或滚动内容持续五秒钟，与其他内容一起呈现，必须提供一种机制来暂停，停止或隐藏它。存在这种运动对活动必不可少的例外。这适用于诸如自动防空轮，动画背景或循环插图之类的情况，累积运动超过五秒钟。

实施暂停，停止，隐藏

对于更长的动画，请纳入暂停/游戏控件。 WCAG不规定控制设计；允许创意自由。示例包括用于循环动画的播放/停止按钮，或用于单播放动画的重播按钮，将无缝集成到设计中。循环动画GIF还需要此类控件。装载机和预加载器是本指南的例外。

三个闪光或低于阈值

该建议解决了屏幕闪烁的癫痫发作风险。指南指出：网页不应包含每秒闪烁三次以上的闪光灯，也不应超过指定的闪光灯和红色闪光阈值。

达到三个闪光阈值

避免闪烁超过每秒3次是最安全的方法。虽然风格选择可能包含闪烁（例如，复古游戏美学），但超过此限制会带来可访问性风险。如果不可避免，请提供高级警告和替代性的非刷新版本。 WCAG提供详细的安全闪光阈值。

WCAG符合水平（A，AA，AAA）

WCAG定义了一致性级别：A（最小），AA（中级，需要A和AA合规性）和AAA（最高，需要A，AA和AAA合规性）。 AA级通常针对网站可访问性。 “暂停，停止，隐藏”和“三个闪光灯”指南属于AA。

互动中的动画

该指南重点介绍了用户互动触发的动画，表明：通过交互作用触发的运动动画应可以禁用，除非对功能或传达信息必不可少。 “运动动画”专门指的是动画产生运动的幻觉，不包括颜色，模糊或不透明度变化。

实施减少的运动选项

要解决运动敏感性，请考虑：

• 避免不必要的动画：评估动画的上下文和适当性。
• 提供用户控件：提供切换或设置以禁用非必需运动。
• 利用prefers-reduced-motion ：利用此媒体查询来检测和响应用户OS级减少运动首选项，提供替代性，较少动作的动画版本。这可以在CSS或JavaScript中实现。

在CSS中使用prefers-reduced-motion ：

 / *弹跳动画 */
H2 {
  动画：弹跳1.5s线性无限替代；
}

/ *减少运动替代方案 */
@Media（预先减少的动作：降低）{
  H2 {
    动画：淡入0.5s的淡入液；
  }
}

结合自定义切换和prefers-reduced-motion为具有广泛动画的站点提供了强大的解决方案。

结论

通过遵守这些WCAG指南，您可以创建可访问的Web动画，确保更广泛的受众可以与您的网站有意义地互动。请记住，可访问性超出了动画范围；探索整体方法的其他资源。

以上是可访问的Web动画：动画上的WCAG解释了的详细内容。更多信息请关注PHP中文网其他相关文章！