ADA compliant Lottie animations (text readable for website reader)

Hi, I’m trying to make my lottie animations ADA compliant so that the text that’s contained within each animation will be read outloud by a website reader. However, I can’t seem to figure it out. Right now when the website reader gets to the lottie file it just says, “Animation.”

We need to make the website ADA compliant and I’m out of my depth here. Any help would be incredible. Thank you!

I would assume that you would have to tag the animation on the website with the copy in the animation. If you’re in a CMS (Wordpress, Webflow, etc.) you may have to add that meta content to the content frame or to the media file itself on the backend.

Thank you for the response!
“Adding the meta content to the media file itself on the backend”…what do you mean by this? Do you know who I would look to hire to do something like this?

Like in your CMS, for example Webflow, you can tag a file or content with meta data to make it ADA compliant for content that doesn’t inherently have readable information. What are you making your website in? Or where are you using them? Need a bit more information to point you in the right direction.

Pardon the delay in this response.
The response I received about how the site is being built was “It is a Microsoft.net proprietary platform”
Which I don’t think is probably very helpful.
I’m digging into figuring out if the web readers can read the metadata on the lottie files, which I figured out how to add in AfterEffects.
However, there are some issues with the bold weight of fonts not coming through and such, which I realized was the reason they were not being picked up by the reader in the first place—I had converted the text to shapes so we could retain the font styling.
Anyway, I’ve tried a couple work arounds and will post the result here when I have it, but if anyone has further ideas/thoughts on this, I’d appreciate it very much.
Thanks!

1 Like