Accessibility

So far we’ve been looking at what animation on the web is, and how to create animation. Before we finish up for this course, let’s take a moment to think about what we can do to make sure we do right by our visitors.

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

Make sure content is accessible

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 autoplaying video is bad for users, 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

The W3C recommends that any content that is blinking, scrolling or auto-updating for more than 5 seconds should have a means of pausing or removing the motion. Using the animation-play-state is one way to pause animations as needed, as seen on hover here.

Allow for alternate inputs

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 :hover as well as the .active 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.

Don’t make me sick

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.

The reason this happens is down to the way our vestibular system works. We have 3 tubes in our ears that help us determine where our head is in 3D space. It’s possible to trick our minds into thinking we’re moving, and then when the vestibular system doesn’t echo the movement, our brains get confused and we feel ill.

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.

Vestibular.org 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.

Homework

If your job involves designing or building interfaces for people to use, do take time to read NNGroup’s Animation for Attention and Comprehension. Think about how people might use your work, and what it might mean if they couldn’t see the animation.