svg路径动画简易指南_创建可访问动画的指南

svg路径动画简易指南

动画界面可能导致许多人头痛，恶心，头晕和其他健康问题。 受影响最大的人群是前庭疾病，癫痫症和偏头痛敏感性人群。 但是，如果长时间在屏幕上过度运动，任何人都会遇到类似的问题。

在本指南中，我将分享一些最佳实践，以解决确实讨厌动画的用户的需求。

国际残疾人日

本文的发表日期并非偶然：12月3日是联合国国际残疾人日 。 今天，我们想提高知名度，并展示我们可以使用包容性网页设计做什么。

动画的副作用

前庭系统包括内耳和大脑的一部分，负责感觉信息处理和空间定向。 在屏幕上观看大规模运动时，前庭疾病患者会出现晕车，平衡问题，慢性头晕，头痛和恶心等症状。

但是这些问题有多普遍？ 根据Vestibular.org的说法，非常。 研究人员估计：

“ ..美国多达40.5％的40岁以上成年人（约6900万美国人）经历了某种形式的前庭功能障碍” – Vestibular.org

闪烁的动画也会引起光敏性癫痫患者的癫痫发作 。

当然，这并不意味着如果您关心辅助功能，就根本不能使用动画。 让我们看一下可以实现的最佳实践，以解决通过动画界面遇到问题的用户的需求。

1.考虑相对于视口的运动的相对大小

小型动画元素（例如在悬停时会稍微改变颜色的按钮）不会有太大问题。 占据屏幕很大面积的动画是您需要注意的真正犯罪者。 设计动画时，请始终考虑屏幕相对移动的大小。

此比率越高，动画触发的人越多。 此规则也适用于移动接口。 在桌面上看起来相对较小的动画可以覆盖移动设备的一半屏幕。

2.注意视差滚动

视差滚动的概念（及其固有的问题）是前景和背景以不同的速度移动。 彻底完成后，视差滚动就是大规模动画的一个很好的例子，它可能会导致前面提到的症状。 如果需要，您仍然可以使用微妙的视差效果 ，但是无论如何，您应该避免许多行为。

首先是“卷轴劫持”。 这是操纵滚动条使其行为独立于用户的努力和意图的时候。 首先，这不是一个很好的体验。 但是，当与视差滚动结合使用时，动画背景开始以其自己的速度移动，并且您的网站对于患有前庭疾病的人基本上变得无法使用。

使用视差效果时，也请避免水平滚动。 网站上的水平滚动对于大多数用户来说是一个惊喜，但并不总是令人愉快的。 作为一般的经验法则，请始终仔细考虑屏幕上令人惊讶的动作：它们往往使有平衡问题的人迷失方向，并随之出现症状。

3.允许控制滑块和转盘

没有播放，停止和暂停控件的滑块会给真正对滑块内容感兴趣的任何人（可能不是很多人）带来一个问题。 根据Yoast SEO出色的“滑块吸”分析 ，只有1％的用户单击滑块，但是您仍然应该考虑一下。 即使患有前庭和其他疾病的人中有99％的人根本不关心滑块，但不断移动的滑块仍会使他们生病。

始终为用户提供多种方式来停止，暂停和重新启动滑块或转盘。 您可以使用多种技术，例如：

• 左右箭头图标可让用户移动幻灯片。
• 滑块下方每张幻灯片的可单击缩略图。
• 图标（通常是较大的点）—每个幻灯片一个。
• 滑块下方的传统播放，停止和暂停图标，类似于媒体播放器中使用的图标。

另外，请避免在幻灯片上播放动画效果。 动画中的动画会极大地干扰用户体验，并严重损害可访问性（视差站点上的动画也是如此：巨大的禁忌）。

除了滑块之外，WCAG 2.0的2.2.2成功标准还建议为任何自动更新信息提供暂停/停止/隐藏控件：

1. 自动启动。
2. 与其他内容同时呈现。

4.指定动画的持续时间

动画发生得太快，对于具有可访问性需求的用户（可能还有任何想要处理呈现的信息的人）来说，也会带来麻烦。 幸运的是，CSS使控制动画和过渡的持续时间成为可能。

要设置时间限制，可以使用animation-duration和transition-duration属性。 它们的用法非常简单。 例如，以下代码为转换动画完成提供了2秒钟的时间：

div {
    transition-property: width;
    transition-duration: 2s;
}

或者，与transition速记属性相同：

div {
    transition: width 2s;
}

迭代计数

您还可以定义动画循环的播放次数。 此功能仅适用于关键帧动画 ，因为过渡不会循环。 他们只运行一次。 您可以通过以下方式使用animation-iteration-count属性：

div {
    animation-iteration-count: 3;
}

您可以将infinite设置为animation-iteration-count的值，但是无限循环对于可访问性不是很好。 特别是如果您不提供任何让用户随时选择停止或暂停动画的方式。

5.使用HTML视频而不是GIF动画

如今，动画GIF非常受欢迎。 网站一直在使用它们。 但是，它们对可访问性的影响几乎没有受到质疑，而且实际上令人不安。 当网站在同一页面上使用多个动画GIF时，可访问性问题尤其令人讨厌。 试想一下列表类型的文章，其中每个项目都装饰有单独的GIF动画，并经常在各种不可预测的方向上移动。

准确地说，动画GIF的问题是自动播放，无限循环以及缺乏用户控制。 Google Developers也提到了性能问题 （动画GIF可能非常大，例如在分析的示例中为13.7 MB）。 一种可能的解决方案是用在所有现代浏览器中都可以原生运行HTML视频替换它们。

您可以使用许多工具（例如FFmpeg）将动画GIF转换为不同的视频格式。 HTML5的<video>标签允许您为嵌入式视频定义多个源。 您可以使用三种视频格式：MP4，WebM和Ogg。 MP4具有最佳的浏览器支持，但是WebM的大小略小。

浏览器	MP4	WebM	奥格
IE浏览器	是	没有	没有
谷歌浏览器	是	是	是
火狐浏览器	是	是	是
苹果浏览器	是	没有	没有
歌剧	是（25岁以上）	是	是

例如，将动画GIF转换为MP4和WebM格式后，可以使用以下HTML：

<video controls width="300">

    <source src="image.webm" type="video/webm">
    <source src="image.mp4" type="video/mp4">

    Sorry, your browser doesn’t support embedded videos. 
    
</video>

通过使用HTML视频而不是动画GIF，您可以使用户停止或暂停动画或完全不观看动画。 此外，您还可以显着提高页面加载时间，这也是可访问性的重要指标，尤其是由于移动用户和连接性较低地区的人们。

Imgur和Gfycat还使用HTML5视频在其网站上显示动画GIF（您可以使用浏览器的开发人员工具对其进行测试）。 因此，该技术已经在生产中进行了广泛的测试。

6.使用JavaScript阻止自动播放GIF

作为<video>标签的替代方法，您还可以使用JavaScript阻止自动播放GIF动画。 目前，我认为最好的选择是由Krasimir Tsonev创建的名为Gifffer的小型JavaScript库。 使用起来非常简单，您不必将动画转换为视频。 您需要按照三个简单的步骤在您的网站上使用Gifffer ：

1. 使用<script>标记将库添加到您的网页。
2. 在gif图像上使用data-gifffer属性代替src 。
3. Gifffer()调用Gifffer() 。

这是一个演示（感谢Patakk的动画 ），展示了Gifffer的工作方式：

请注意使用data-gifffer-alt而不是alt属性来支持屏幕阅读器用户。 此外，如果需要，可以使用三个可选的data-*属性：

1. data-gifffer-width以像素或百分比为单位。
2. data-gifffer-height （像素或百分比）。
3. data-gifffer-duration以毫秒为单位。

在Gifffer的GitHub Page上查看更多代码示例。

结语

在讨论可及性时，我们并不是首先考虑前庭疾病，癫痫病和偏头痛的敏感性。 但是，它们确实会影响许多用户，因此，关注动画可访问性与可访问性的其他方面一样重要。

解决这些问题的文章很少。 瓦尔·海德（Val Head）是第一位在两篇出色的文章中对A List Apart进行详细介绍的主题：

1. 设计更安全的Web动画以提高运动灵敏度
2. 有关辅助动画的更多资源

翻译自: https://webdesign.tutsplus.com/tutorials/a-guide-to-creating-accessible-animations--cms-32038

svg路径动画简易指南