Accessibility

There are many ways animation can help our content, as well as ways it can get in the way.

An example we’ve used a few times is when we animate content to show it on screen. If content is beginning in a hidden state, we need to be careful that it doesn’t remain hidden for some users. Older browsers support CSS animations to varying degrees, and JavaScript may not always work. We can use tools such as Modernizr to design around potential issues.

We also use animation to convey meaning and intent in our designs. When designing animations, do keep in mind that some people won’t be able to see them. They may be using a screen reader or have different browser settings that cause your animations to not work as intended. Make sure important information is available regardless of whether the animation works.

Just that , animation that plays automatically can be distracting from other content on the page. Try to limit where and when animation happens to situations where you want your visitors to be distracted by it. This might also mean limiting how long an animation plays for, or ensuring it has stopped before your visitor needs to focus elsewhere.

Give control

A growing percentage of your visitors will be using phones. When on a phone, there is no cursor and no hover state. We need to design around this. One option I often use is to detect a tap and add an “active” class to the target. I then add transitions or animations to both the as well as the states.

Confusion

Sometimes websites go too far and try to animate all the things. This doesn’t just muddy the site’s message, it can cause confusion. This is especially true of UI. When adding animation to elements on the page that visitors interact with, make sure that it’s obvious why the animation has been triggered. Your visitors don’t have time to decipher complexity in either the visual design or the way it moves, so try to be clear.

Too much animation, or the wrong kind of animation, can make people feel sick.

When Apple introduced iOS7, an updated operating system for their phone, it brought with it a lot more motion and animation. Some of this was enough to make people sick. Some people, like myself, struggle to read in a car or bus as the motion makes us feel ill, and others can’t play certain video games for more than a few minutes at a time.

That we get sick is an evolutionary side effect. Throwing up is a complex thing, and we have a special part of our brains dedicated to handling it. As it happens, this part of the brain is located near the part that deals with balance, and so we feel ill.

This is something that could become more of an issue as we begin to see more wearable technology. When designing larger animations, be sure to test whether people are comfortable with the types of motion in place.

is a great starting point to learn more about this topic.

Accessibility is for everyone’s benefit

Accessibility isn’t just for people using screen readers or alternative means of browsing our content. We’re all distracted sometimes, network connections drop, we’re checking our phones in a queue at the post office or glancing at directions when driving. We should be aware of the ways people might use what we make and ensure our animations don’t get in the way.