search

LottieFiles / lottie-player

Lottie viewer/player as an easy to use web component! https://lottiefiles.com/web-player
MIT License
1.54k stars 175 forks source link

Role attribute on lottie-player and accessibility #155

Open dingsoyr opened 2 years ago

dingsoyr commented 2 years ago

The default template for the "animation-container" has the "role" attribute hardcoded to "img".

In some cases it would be useful to be able to set the role attribute to "presentation". E.g. if the animation in question has been added to the website purly as decoration and do not contain any accessibility semantics.

See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role

What is important is that if role="presentation" then the "aria-label" attribute should be removed.

samuelOsborne commented 2 years ago

Hi @dingsoyr thanks for suggesting this, we will look in to implementing it.

nicolasambroise commented 2 years ago

@dingsoyr, if you use role="presentation", it's mean that your animation is only decorative, so without controls. To be compliant with WCAG, if you have no play/pause button, you can't have the following options : loop & autoplay, and your animation should be less than 5s. (link : https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html)

nicolasambroise commented 2 years ago

@theashraf, please can you also to remove the aria-label if your animation have the role="presentation". (link : https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role_ignored)

rcoenen commented 1 year ago

Interesting conversation. An alternative valid approach avoiding the need for play/pause buttons on animations intended for decorative use would be using the prefers-reduced-motion media query to prevent decorative animations from playing altogether, but only when a user has indicated a preference for reduced motion.

From what I have been reading this is an acceptable solution to comply with WCAG 2.1 guidelines, including Success Criterion 2.2.2, which requires that users are able to control time limits for content on a webpage.

This approach respects the user's preferences and needs while allowing for the desired aesthetic to be maintained.

Although the WCAG 2.1 Success Criterion 2.2.2 does not explicitly mention the use of the prefers-reduced-motion media query, it is a recommended practice to provide a more accessible experience for users who are sensitive to motion.

Thoughts?