Animation Accessibility Checklist¶

This checklist ensures all animations in the AI-SRE documentation meet accessibility standards. Follow these guidelines when adding Lottie, Rive, or any other animated content to documentation pages.

WCAG 2.1 Compliance¶

The Web Content Accessibility Guidelines (WCAG) 2.1 define specific requirements for animated content. All animations in AI-SRE documentation must meet Level AA compliance at minimum.

Checklist¶

Motion and Autoplay¶

Respect prefers-reduced-motion: All animations check the user's system-level motion preference and pause when reduced motion is preferred. The animations.js helper does this automatically for Lottie animations loaded via data-lottie-* attributes.
No auto-playing animation lasts longer than 5 seconds without a pause mechanism: If an animation loops indefinitely, ensure the user can pause it. Lottie player includes built-in pause/play controls.
No content flashes more than 3 times per second: Animations must not contain strobing, rapid flashing, or high-contrast flickering sequences. This is a WCAG 2.3.1 (Level A) requirement to prevent seizures.
Animations do not distract from primary content: Decorative animations should not compete with text for attention. Use subtle, slow-moving animations that complement rather than dominate.

Fallback Content¶

Every animation has a text fallback: All .lottie-container and .rive-container elements must include a .lottie-placeholder child with descriptive text. This text is displayed when:
- The animation fails to load
- The user has JavaScript disabled
- The user prefers reduced motion
- Assistive technology reads the page
Fallback text is meaningful: The placeholder text should convey the same information as the animation. For example, instead of "Loading animation...", use "Diagram showing the alert-to-resolution flow: Alert is received, AI diagnoses root cause, remediation is executed, and the system learns from the incident."
Decorative animations are marked appropriately: If an animation is purely decorative (does not convey information), add aria-hidden="true" to the container and ensure the placeholder says so.

Interactive animations are keyboard accessible: If a Rive animation responds to clicks or hover, ensure the same interactions are available via keyboard (Enter/Space for click, focus for hover).

Containers have appropriate ARIA roles: For informational animations, use role="img" with an aria-label describing the content:

<div class="lottie-container"
     role="img"
     aria-label="Animated diagram of the AI-SRE incident response flow">

Screen readers can skip animation containers: Decorative animations should be invisible to screen readers:
```
<div class="lottie-container" aria-hidden="true">
```

Color and Contrast¶

Animations do not rely solely on color to convey information: If an animation uses color coding (e.g., red for errors, green for success), provide additional visual cues (icons, labels, patterns).
Dark mode variants are tested: Verify that animations are legible in both light and dark themes. Use the lottie-invert class for animations that do not have dark-mode-friendly palettes, or create separate dark-mode animation files.
Contrast ratios meet WCAG AA: Any text rendered within an animation must maintain a 4.5:1 contrast ratio against its background (3:1 for large text).

Performance¶

Animations are lazy-loaded: Use the data-lottie-src attribute (not inline <lottie-player> tags) so animations load only when scrolled into view. The animations.js helper handles this automatically.
Animation file sizes are reasonable: Lottie JSON files should be under 200 KB. For larger animations, use Lottie's dotLottie compressed format or optimize with tools like LottieFiles Optimizer.
Animations do not block page rendering: The Lottie player script is loaded asynchronously. Verify that the page is fully usable before animations finish loading.

Testing¶

Tested with reduced motion enabled: On macOS: System Preferences > Accessibility > Display > Reduce motion. On Windows: Settings > Ease of Access > Display > Show animations. On Linux: GTK gtk-enable-animations=false.
Tested with a screen reader: Verify with VoiceOver (macOS), NVDA (Windows), or Orca (Linux) that animation containers are properly announced or skipped.
Tested on mobile devices: Verify animations are responsive and do not cause layout shifts on small screens.
Tested with JavaScript disabled: Verify that placeholder text is visible and the page remains usable without animations.

Implementation Reference¶

Accessible Lottie Embed¶

<!-- Informational animation with full accessibility -->
<div class="lottie-container"
     role="img"
     aria-label="Animated diagram showing the incident lifecycle:
       alert ingestion, AI diagnosis, policy evaluation,
       remediation execution, and continuous learning"
     data-lottie-src="https://example.com/incident-flow.json"
     data-lottie-loop="true"
     data-lottie-autoplay="true">
  <div class="lottie-placeholder">
    <p><strong>Incident Lifecycle</strong></p>
    <p>
      The AI-SRE incident lifecycle flows through five stages:
      alert ingestion from monitoring tools, AI-powered diagnosis
      with Kubernetes and log context, policy engine evaluation
      for safety guardrails, remediation execution (dry-run or live),
      and continuous learning from incident patterns.
    </p>
  </div>
</div>

Decorative Animation (Skip for Assistive Tech)¶

<!-- Decorative animation hidden from screen readers -->
<div class="lottie-container"
     aria-hidden="true"
     data-lottie-src="https://example.com/decorative-pulse.json"
     data-lottie-loop="true"
     data-lottie-autoplay="true">
  <div class="lottie-placeholder">
    <p>Decorative animation</p>
  </div>
</div>

Interactive Rive Animation with Keyboard Support¶

<div class="rive-container"
     role="img"
     aria-label="Interactive architecture diagram. Click components to explore."
     tabindex="0"
     id="interactive-arch">
  <canvas width="600" height="400"></canvas>
  <div class="lottie-placeholder">
    <p><strong>Architecture Diagram</strong></p>
    <p>Interactive diagram of AI-SRE components.
       Use the API Reference and Architecture pages for the same information
       in text format.</p>
  </div>
</div>