Accessibility

目前为止，我们已经学习了网页动画，以及如何创建它。在结束这门课程之前，我们来花点时间思考一下我们可以做点什么来确保读者正确使用动画。

动画可以丰富我们的内容，也可能适得其反。

Make sure content is accessible

之前章节用过的例子，使用动画显示内容。假如该内容区域的初始状态是不可见的，这时候就需要注意它是否会正确显示。因为老版本的浏览器对 CSS 动画的兼容性不是很好，同样地，JavaScript 在老版本的浏览器上的运行效果也不是一直都不会出错的。我们可以使用像 Modernizr 这样的工具来规避潜在的问题。

在设计中，我们使用动画来传达我们想要表达的意义和意图。当你在设计动画时，一定要把浏览器的兼容性考虑进去。因为有的人可能正在使用屏幕阅读器或者浏览器有不同的设置，这些都有可能导致你的动画无法正常工作。但是无论动画是否正常工作，都要确保重要信息不会丢失。

好比自动播放的视频带给用户极差的体验，自动播放的动画可能会分散用户的注意，带来不好的用户体验。当你想用动画去吸引用户的注意时，试着限制一下动画发生的位置和时机。这意味着可能需要限制动画播放的时间，或确保用户在关注其他内容之前已经停止动画。

Give control

W3C 建议，任何闪烁、滚动或自动更新时间超过5秒的内容都应该有暂停或删除动画的方法。使用 animation-play-state 是一种暂停动画的方法，具体例子看这里。

Allow for alternate inputs

越来越多的用户使用手机来访问网页。在手机上，即没有光标，也没有悬停状态。所以我们需要围绕这个来设计动画。我经常用到的解决方案是：检测 tap 并向目标添加一个 ‘class’，然后，将 transition 或 animation 添加到 :hover 和 .active 状态。

Confusion

有时候网站背离了设计的初衷，它试图让所有的东西都动起来。这样不仅会混淆网站的信息，还会让人感到困惑。特别是 UI，当向页面元素添加动画时，请确保动画被触发的方式是显而易见的。因为用户没有时间去解读复杂的设计以及移动方式，所以请尽可能的清晰。

Don’t make me sick

太多的动画，或是错误的动画，都会降低用户体验。

当苹果公司推出新的操作系统 iOS7 时，它支持更多的动作和动画。其中一些的用户体验并不好，有些人喜欢在车上用手机阅读，如果有过多的动画会让人觉得更容易晕车。

这就会牵扯到我们的前庭神经系统是如何工作的。我们的耳朵里有三对半规管帮助我们确定头部在三维空间中的位置。简单解释为什么会晕车，当人坐在移动的车或船里面，内耳的前庭已经感知到身体在运动，但眼睛却以为身体是静止不动的。前庭已经向各部门发送信号了，但身体却没有做出反应，于是平衡调节就出错了！这种刺激一旦超过了个体承受的极限，就会导致晕车。这种症状在你望向左右的窗外、刷手机、看书的时候更强烈，因为这些行为让身体更加肯定自己是静止的，跟前庭传递的信号起了更大的冲突。

我们会生病是进化产生的副作用。为什么一晕车就会呕吐呢？当身体产生不良反应时，交感神经就会兴奋，想通过调节其他器官反应来应付环境变化、维持内环境的相对稳定。于是，肠胃就受到刺激，引发呕吐。

随着可穿戴技术的发展和开发，这可能会成为一个更大的问题。在设计浮动大的动画时，一定要考虑人们是否适应各种形态的运动类型。

Vestibular.org 是了解这方面内容的一个很好网站。

Accessibility is for everyone’s benefit

可访问性不只是为使用屏幕阅读器或浏览我们内容的用户准备的。我们难免会有分心的时候。我们应该知道人们如何使用我们的产品来确保我们的动画不会适得其反。

Homework

如果你的工作涉及到设计或构建界面，那么一定要花时间阅读这篇文章 NNGroup’s Animation for Attention and Comprehension。想想人们可能会如何使用你的作品，如果他们看不到动画，这可能意味着什么。