Google Lighthouse – [aria-*] attributes do not match their roles

Hello,

I’m using multiple lottie players on the same webpage, and everything is working as expected (thank you for that). But as soon as I run Google Lighthouse, I’m getting the following error under “Accessibility”:

[aria-*] attributes do not match their roles Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes.

I’ve set up the lottie file as follows:

<lottie-player id='lottie-in-animation' ref={refLottieIn} mode='normal' controls={false} loop={false} description='Propeller circle' src={"/PATH_TO_JSON.json"} style={{ width: "100%", height: "100%" }}></lottie-player>

This renders all fine and creates a lottie player component with a shadow root that you can inspect in the devtools. That brings us to the aria-label issue that Google Lighthouse points out. I found out that this library supports the description attribute and creates an aria label of that property. If the description attribute is not filled in, it falls back to the text “Lottie animation”.

In my opinion, there is no need to add an aria-label to the <lottie-player> element, so my question is if that maybe can be disabled?

Thank you in advance and for all the work on this library – it’s great.

[zheeeng]

I encountered this problem when trying to raise my website score. Google Lighthouse reports the aria-label attribute mismatches the element’s role.

According to specifications, Lighthouse points to this element: <g aria-label="some text"></g>

[Nathan-deGraaf]

Hi Guys, I recently reached out to the surpport staff, and this issue has been resolved. you can see the issue of an incorrect role being addressed in this following link!