Web Accessibility (ADA, WCAG, Section 508)

Lottie in Web
1

I am very new the community and researching Lottie as a team I support is looking to implement
Lottie Animations. Although there are some great features in the code generator I have noticed that there are a few barriers in the animations and the Lottie player that will prevent users with disabilities from accessing and understand the information that Lottie is conveying to users. I’ve searched the website, in the blogs, learning courses and community forum but I did not find any information related to Web Accessibility be it WCAG, Section 508, the ADA or any other accessibility.

Is there any information that can be provided to help our users? I specifically searched for a VPAT, ways to add text alternatives to the the player buttons, how to add text alternatives such as captions transcripts and audio descriptions to the video player itself, and how to increase the visual focus indicator when users navigate to the player controls using their keyboard.

Is there a VPAT available, and plans that can be shared on how/when the product will be made accessible?

2 Likes
2

Welcome to the community and thanks for sharing this vital feedback. I will work on getting you an answer.

3

Hi,
We have passed this feedback to the web team (maintains lottiefiles.com) as well as the plugins team (maintains the Lottie player) and it will be addressed as time allows. Rest assured that accessibility is important to us and will be given the focus it deserves
Thank you

4

Hi there! I know this is an old thread, but it is the only one on this subject. Have there been any updates? Or guidelines on how to make sure a lottie animation is accessible? Googling there’s (maybe) descriptions you can add but none of it is from an authoritative source. Having the platform that exports the code providing documentation on the subject is key for usage approval in many cases. It unfortunately seems people most involve in making this tech are silent on this topic, and I am hoping that over the past 6 months something has changed :slightly_smiling_face: :crossed_fingers:

5

crbly, also wondering if you found anything in your research since posting this?

6

This is super important, has any progress been made on this topic?

7

hi @wchamber
you can check out this page https://docs.lottiefiles.com/lottie-player/components/lottie-player/wcag-2.0-aa

To sum up

  • aria labels are added to all components of the player. screen readers can read the values
  • roles are defined for all components of the player
  • keyboard navigation is supported for the controls of the player. (controls must be enabled to access this)
  • description can be added to the player so screen readers can access what the animation is about (developers must add the description value)
  • an additional PR with more accessibility changes is under review by the oss team (feat(a11y): Multiple accessibility/quality fix by nicolasambroise · Pull Request #156 · LottieFiles/lottie-player · GitHub) and once reviewed and merged will be reflected in the player
1 Like
8

Hi guys, sorry I am new here and wondering how do we add these aria labels, roles, description etc. Do add them in the lottie player code embed ourselves?