CogJS - Cognitive-Oriented Web Accessibility Toolkit

cog-animation

cog-animation is a declarative attribute used to disable or reduce visual motion in specific sections of a webpage. It helps users who are sensitive to animation, particularly those with vestibular disorders, autism spectrum conditions, or attention-related challenges.

What It Does

When applied, cog-animation="false" disables CSS animations, transitions, and scroll behavior for the target element and all its children. This creates a calmer, less distracting experience and reduces cognitive load for sensitive users.

Animation Configuration

Configure global animation settings in cog-config.js before initializing CogJS. These settings define the fallback styles used to neutralize motion.

window.cogConfig = {
  active: true,
  animation: {
    default: true,
    respectSystemPref: true,
    styles: `
      .cog-no-animation *,
      .cog-no-animation {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    `
  }
};

Enabling in HTML

To disable animations, simply apply the attribute cog-animation="false" to any HTML element. This will automatically apply the no-animation class styling to that element and its descendants.

<div cog-animation="false">
  <h2>Calm Mode</h2>
  <p>All animations and transitions are disabled here.</p>
</div>

Accessibility Considerations

• Reduces Cognitive Fatigue: Minimizes unnecessary motion for better focus and comfort.
• Supports Vestibular Needs: Prevents motion-triggered discomfort or nausea.
• Declarative & Flexible: Easy to apply on individual containers or full pages.
• System Aware: Can be configured to respect user system preferences for reduced motion.

Testing cog-animation

// Test Checklist
// - Apply cog-animation="false" to a section with animations
// - Confirm animations and transitions are suppressed
// - Check support across different browsers and OSs
// - Respect prefers-reduced-motion when configured to do so

Best Practices for cog-animation

• Use Sparingly: Apply to sections that are likely to cause distraction or sensory overload.
• Support System Settings: Use respectSystemPref: true to auto-disable for users with reduced motion settings.
• Combine Strategically: Pair with cog-background or cog-read for multimodal accessibility support.
• Validate with Users: Where possible, test with actual neurodivergent users for feedback on motion comfort.
• Don’t Disable All Motion: Leave subtle, meaningful animations where they aid understanding-unless user preference suggests otherwise.