Accessibility Concerns: Lack of WCAG Compliant Controls in Lottie Web Player

[rcoenen]

Description: The Lottie web player controls are currently apparently not WCAG 2.x compliant.

According to current WCAG 2.1 and WCAG 2.2 (draft) guidelines, animations that auto-start and exceed 5 seconds must have controls that allow users to pause, stop, or hide the animation. You can read more about this guideline on the following link: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html.

Please note that a 1 second Lottie animation that auto starts and loops can play in principle infinitely, and as such, exceeds 5 seconds. As such WCAG 2.2.2 seems to demand at minimum a play/pause button for every Lottie animation that both auto starts and loops... 🤔

Currently, the Lottie web player controls for auto-started looping animations only include a progress bar and a play/pause button. This means that users who rely on keyboard navigation cannot control the animation or pause it if it is causing a problem.

Proposal: To ensure that the Lottie web player controls for auto-started looping animations are WCAG 2.x compliant, I propose the following solutions:

1. Make the controls keyboard navigable: This will allow users who rely on keyboard navigation to control the animation and pause it if necessary.
2. Provide minimum controls: Consider providing minimum controls, such as play/pause button, and hide animation button, without a progress bar. This will ensure that users can pause and hide the animation if necessary, without being distracted by a moving progress bar.
3. Make minimum play controls CSS styleable: Consider making the minimum play controls CSS styleable so that stakeholders can customize the controls to match their brand guidelines or accessibility requirements.
4. Automatically show the "pause" button once the animation has played for 5 seconds: This will provide users with a clear indication that they can pause the animation if necessary, without cluttering the controls with unnecessary buttons.

Ensuring WCAG 2.x compliance is crucial for convincing stakeholders to use Lottie on the web. Currently, the lack of accessibility compliance is seen as a major concern and can be a reason for stakeholders to avoid using Lottie. Implementing the proposed solutions would make Lottie a more viable option for developers who value accessibility.

Thank you.

[rcoenen]

Here is an example of the logical outcome of WCAG 2.1 on looped Lottie animations. It seems a little absurd, and I doubt this is the true intention of WCAG.

https://codepen.io/rcoenen/pen/xxyxzZV

[samuelOsborne]

Hi again @rcoenen, Im just going to post here for transparency on the solution we discussed on slack.

The steps of the solution are :

• checking for @media (prefers-reduced-motion: reduce)
• if we detect this preference, disable auto play and add controls (or just a play / pause button) so that the user can choose to see the animation or not

[gleatherman]

is there a timeline on implementing the reduced motion flag to disable auto-play?