The impact of motion animation on cognitive disability

February 3, 2022KnowledgeBase Content

This is a technique pulled from KnowledgeBase, a digital accessibility repository available through TPGi’s ARC Platform. KnowledgeBase is maintained and consistently updated by our experts, and can be accessed by anyone with an ARC Platform subscription. Contact us to learn more about KnowledgeBase or the ARC Platform.

The impact of motion animation on people with a vestibular disorder is well documented, and known to cause nausea, dizziness, or headaches, in affected users. However the impact on people with some cognitive disabilities is less commonly discussed.

Studies have shown that decorative animations impair recall and are a source of extraneous cognitive load. In other words, it can be more difficult for people to read, comprehend, or remember the information they’ve read, if the content features animations that increase their cognitive load.

Understanding cognitive load

Cognitive load theory describes this issue in terms of a “bottleneck”. Information has to pass from sensory memory (reading input from sight, sound, or tactile information), through working memory (information processing, such as decoding the meaning from language), to long-term memory (where processed information is stored for later recall). Working memory is very limited, and so this is where the bottleneck occurs.

Working memory itself can be further divided into three types of cognitive load, and it is here that the impact on people with cognitive disabilities is apparent:

  • Intrinsic load is the inherent complexity or difficulty of the content itself.
  • Germane load is the amount of concentration and mental effort required to learn the content.
  • Extraneous load is external distractions not directly related to the content.

People with ADHD (Attention Deficit Hyperactivity Disorder) are generally quite easily distracted, and have to concentrate harder to understand what they’re reading, so both the germane load and extraneous load is increased. People with dyslexia generally have to work harder to read and decode written content, so for this group of people, the intrinsic and germane load is increased. Some autistic people also report that unnecessary visual effects and animations can be a source of frustration and distraction, increasing the extraneous load.

Overall, most people with a cognitive disability have reduced working memory and/or increased cognitive load, all the time, so any factor which further increases the cognitive load required to read and understand content, will disproportionately affect people with a cognitive disability.

Cool is not cool

Another way of understanding this is the “seductive details effect”, which describes how information which is interesting, but irrelevant, reduces learning capacity. The more interesting the details are, the more extraneous load they create, and hence, the more they impair learning, an effect which is exacerbated in people who have reduced cognitive function to begin with.

Motion animations fall firmly into the category of irrelevant distractions. They might look cool and sexy, but it’s precisely because they look cool and sexy, that they impede a user’s ability to learn the actual content. This impact is measurable for all users, but for users with a cognitive disability, the impact may be far more severe.

Conclusion

Motion animation should be avoided.

However this can be a hard sell against marketing and design agendas. In this case, there are several approaches that can be used to ensure users have the ability to avoid such distractions:

  • Provide a version of the web content that doesn’t use the animated content effects at all.
  • Provide a control that allows users to turn the animation effect on and off.
  • Ensure that user settings at the system level for reduced motion preferences are respected by the web page.

The third approach is the most straightforward, because it can be achieved by using the prefers-reduced-motion media query (which is also sufficient to meet Success Criterion 2.3.3: Animation from Interactions). This media query is supported by all modern browsers, and detects whether the user has adjusted their operating system settings to turn off animations or reduce their motion. For example, a query such as this will disable all CSS transition effects for users who have set that preference:

@media (prefers-reduced-motion) {
    * {
        transition: none !important;
    }
}

For animations that are triggered by JavaScript (rather than defined in CSS), you can create a helper function using matchMedia to detect the user’s preference, and then use that function’s return value as a condition:

const prefersReducedMotion = () => {
    return window.matchMedia('(prefers-reduced-motion)').matches;
}

Resources

Like to be notified about more articles like this? Subscribe to the Knowledge Center Newsletter. It not only gives you summaries and links to our technical blog posts but also TPGi webinars, podcasts, and business blog posts – as well as accessibility and web tech conferences and other events, and a reading list of other relevant articles. You get one email a month, it’s free, requires just your email address, and we promise we won’t share that with anyone. Check the archive.
Categories: KnowledgeBase Content

About James Edwards

I’m a web accessibility consultant with around 20 years experience. I develop, research and write about all aspects of accessible front-end development, with a particular specialism in accessible JavaScript. I can also turn my hand to PHP and MySQL when it’s needed. I started my career as an HTML coder, then as a JavaScript developer, but the more I learned, the more I realised just how important it is to consider accessibility. It’s the basic foundation of web development and a fundamental design principle of the web itself. If information is not accessible, then what’s the point of any of it? Coding is mechanics, but accessibility is people, and it’s people that actually matter.