SiteLint documentation and guidelines

Animation

Description

Animations can enhance the user experience by providing visual feedback, guiding users through tasks, and making interfaces more engaging. However, animations can also pose accessibility challenges, particularly for users with motion sensitivity, cognitive disabilities, or those who rely on assistive technologies. Ensuring that animations are used appropriately and providing options to control them can significantly improve accessibility and usability.

Disabilities impacted

  • Motion sensitivity: users with vestibular disorders or motion sensitivity can experience discomfort or dizziness from animations, especially those involving significant motion or rapid changes.
  • Cognitive disabilities: users with cognitive disabilities may find animations distracting or confusing, making it difficult to focus on content or complete tasks.
  • Visual impairments: users with visual impairments who rely on screen readers or other assistive technologies may have difficulty interacting with animated content if it is not properly accessible.

Why it matters

Using animations appropriately and providing controls for users to enable or disable them enhances the accessibility and usability of web content. It ensures that all users, regardless of their abilities or preferences, can have a comfortable and effective experience.

Coding problems and solutions

Common coding problems

  • Excessive or uncontrolled animations: using excessive or uncontrolled animations can cause discomfort or distraction for users.
  • Lack of animation controls: not providing options for users to disable or control animations can lead to accessibility issues.
  • Animations without reduced motion: not considering reduced motion settings can result in a poor experience for users with motion sensitivity.

How to fix it

Use subtle and purposeful animations

Ensure animations are subtle and serve a clear purpose without causing distraction or discomfort.

Incorrect example
.button {
    animation: spin 2s infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
Correct example
.button {
    transition: background-color 0.3s ease;
}

Provide animation controls

Allow users to enable or disable animations based on their preferences.

Correct example
<button onclick="toggleAnimations()">Toggle Animations</button>

<script>
function toggleAnimations() {
    document.body.classList.toggle('no-animations');
}
</script>

<style>
.no-animations * {
    animation: none !important;
    transition: none !important;
}
</style>

Respect reduced motion settings

Use the prefers-reduced-motion media query to adjust animations based on user settings.

Incorrect example
.element {
    animation: bounce 1s infinite;
}
Correct example
@media (prefers-reduced-motion: reduce) {
    .element {
        animation: none;
        transition: none;
    }
}

Known limitations

  • Complex animations: for complex animations, ensure that all users can understand and interact with the content effectively.
  • Cross-browser compatibility: test animations across different browsers and devices to ensure consistent behavior and accessibility.
  • Dynamic content: ensure that dynamically loaded content respects user preferences for animations and reduced motion settings.

Resources

Rule

  • ID: animation