Best Practices for WCAG 2.1 Compliance

Introduction

This guide provides best practices for making Lottie animations accessible, along with a Voluntary Product Accessibility Template (VPAT) to help assess compliance. By following these guidelines, developers and designers can create Lottie animations that are not only visually appealing but also inclusive and accessible to a wider audience.

1. Perceivable

Text Alternatives

• Provide text alternatives for Lottie animations using aria-label or aria-labelledby attributes.
• Offer a concise description of what the animation conveys.

Time-based Media

• Include a text description of the animation’s content and purpose.

Distinguishable

• Ensure sufficient contrast for any text or crucial visual information in the animation.
• Respect user preferences for reduced motion.

2. Operable

Keyboard Accessibility

• Make sure all interactive elements in the animation can be controlled via keyboard.
• Ensure the canvas element is focusable and can be navigated to using the keyboard.

User Controls

• Implement play/pause and stop controls for the animation.
• Allow users to adjust animation speed or disable autoplay.

Seizures and Physical Reactions

• Avoid rapid flashing elements in animations (no more than three flashes per second).

Input Modalities

• Ensure any visible labels on controls match their accessible names.

3. Understandable

Labels and Instructions

• Clearly label any interactive elements in the animation.
• Provide clear instructions for user interaction with the animation.

4. Robust

Compatibility

• Ensure all interactive elements have appropriate ARIA roles and properties.
• Use the appropriate ARIA role for the canvas element (e.g., role="img").

Implementation Example

<div role="region" aria-label="Lottie animation container">
    <canvas
        id="lottie-player"
        width="300"
        height="300"
        aria-labelledby="animation-title animation-description"
        role="img"
        tabindex="0"
    ></canvas>

    <h2 id="animation-title" class="visually-hidden">Animation Title</h2>
    <p id="animation-description" class="visually-hidden">Detailed description of the animation.</p>

    <div role="group" aria-label="Animation controls">
        <button id="play-pause" aria-label="Play or pause animation">Play/Pause</button>
        <button id="stop" aria-label="Stop animation">Stop</button>
    </div>
</div>

Additional Considerations

1. Provide alternatives for users who prefer reduced motion.
2. Ensure that the animation doesn’t auto-play if the user has set their system preferences to reduce motion.
3. Consider providing a static image alternative for users who cannot or prefer not to view animations.
4. Regularly test with assistive technologies to ensure compatibility and proper functioning.

By following these best practices, you can significantly improve the accessibility of your Lottie animations and work towards WCAG 2.1 compliance.

Voluntary Product Accessibility Template (VPAT)

WCAG 2.1 Report

Table 1: Success Criteria, Level A

Table 2: Success Criteria, Level AA

This VPAT provides an overview of the accessibility compliance of the Lottie player component. It’s important to note that the actual compliance may vary depending on the specific implementation and content of the Lottie animations.