Animations

Animations and transitions are a popular way to give a page or app a special touch. However, there are some accessibility rules to follow.

Consistency and standards

Table of contents

1. The problem with animations
2. Blinking and hectic animations
3. Let people control motion effects
4. Do not make content dependent on animations
   1. Attention must be paid to the following:
5. Animations do not have to be bad

The problem with animations

Moving or blinking elements can attract the attention of users, but they can also distract them. In extreme cases, someone may have a seizure or physical reaction to an animation. Therefore, it is important to know the WCAg standards for animation. Warnings alone are not enough, because they can be overlooked.

For the following users hectic animations can be problematic:

• People with lack of concentration.
• People suffering from epilepsy.
• People who have impaired vision and therefore do not notice the animations pointing to something.

Blinking and hectic animations

Animations on a website should not be hectic or blinking fast. The W3C – Three Flashes guidelines prescribe the following rule. Content should not blink more than 3 times per second. This prevents the animation from triggering a seizure or physical reaction.

Let people control motion effects

Automatic playing of videos and animations should never be used. A control button should always be used. The user should always have the possibility to trigger animations or videos by himself.

Reduce Motion

For example, Apple offers a “Reduce Motion” mode so that users can use an app without restrictions.Apple recommends the following specifications:

• Tighten springs to reduce bounce effects or track 1:1 with the user’s finger
• Avoid animating depth changes in z-axis layers
• Avoid animating into or out of blurs
• Replace a slide with a fade to avoid motion

Source: Apple – Motion

Do not make content dependent on animations

An app or website should always be operable without animations.

Attention must be paid to the following:

• Do not nest content in animation so users have limited time to read it.
• Do not combine essential interactions with hectic animations.
• Animations should be used carefully and have a consistent language throughout the system.

Animations do not have to be bad

Supporting animations can help users to find their way around a system easily. A good example is the Apple toolbar in MacOS. By gently enlarging the tools, attention is drawn to the active tool. Another good example are “tutorial” animations that help users.

In this example of the SBB app, a useful animation explains the app to the user.

Links

W3C – Three Flashes
W3C – Seizures and Physical Reactions
W3C – Seizures and Physical Reactions
Apple – Motion