Accessibility Best Practices for Lottie Animations (SVG Renderer)

[bakztfuture]

Are there any accessibility best practices for lottie animations? I'm using the SVG renderer, ideally, I'd like to assign an alt tag to the images or SVG elements which Lottie ends up using for the animation on the webpage (instead of an alt tag on its parent div).

I can think of a couple ways - maybe the alt tag could by dynamically bound - just curious how others have met accessibility requirements while using lottie animations in the past, couldn't really find any examples online.

[terenceodonoghue]

I don't speak for the authors, but my personal inclination would be to use a role="presentation" on the parent div if the animation doesn't convey anything meaningful to a screen reader, or aria-label if it does.

[woutthielemans]

Disclaimer: don't use aria-label on the parent div if it has no explicit role attribute on it. divs have no implicit role of themselves, making an aria-label invalid on them.

Source: W3C Aria in HTML

[grafst]

So how should i label my animations for blind users then, @woutthielemans? 😄