search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.86k stars 2.85k forks source link

Invalid aria-label attributes on SVG group elements #2944

Open woutthielemans opened 1 year ago

woutthielemans commented 1 year ago

Environment: React / Next web project Browser and Browser Version: Any browser / browser version After Effects Version: 23.2.1 (Build 3)

The SVG rendered by Lottie Web has aria-label-attributes on g elements grouping text. Since g elements have no implicit role, and no explicit role attribute is set on them, this is invalid, per W3C guidelines.

Instead of trying to have separate text layers part of the Accessibility tree to provide context to assistive technologies, it might be more useful to provide a way for developers to add a title attribute to the SVG. This can then be used to describe the information portrayed in the animation.

Otherwise, to provide assistive technologies with useful and valid info, developers would have to remove the SVG from the accessibility tree–aria-hidden="true" on a parent wrapper, for example–and provide the necessary context in an alternative way.

bodymovin commented 1 year ago

Hi, thanks for the input. Developers can add a title and a description when they load the animation that will be used for accessibility. Besides that, any text layer as you noticed are adding aria label attributes.
What would be the right role to assign to the "g" element to make it valid?

woutthielemans commented 1 year ago

Thanks for getting back to us so quickly!

Developers can add a title and a description when they load the animation that will be used for accessibility

That's great, I think a <description> is exactly what is needed. I couldn't find anything about this in the docs, could you link it? Is it simply adding a description to the loadAnimation props?

Besides that, any text layer as you noticed are adding aria label attributes. What would be the right role to assign to the "g" element to make it valid?

We couldn't find a good option here. The simplest, text-related roles such as paragraph are also invalid with aria-label, because they should provide readable text through content. In our case–and we imagine for others as well–the separate text layers don't really add anything valuable for assistive tech, even if we manage to make them valid. Without the visual context of the motion graphics, they don't carry much meaning. The description would take care of this, so our vote goes to removing the aria-label's altogether (or to make using them optional through config).

woutthielemans commented 1 year ago

Any news on this, team? :v: @bodymovin