I’ve changed my approach to adding GIF’s to courses because of more demand for the Pause, Stop, Hide(Web Content Accessibility Guidelines (WCAG) 2.1) accessibility approach.
I now design GIFs that loop only once, although this defeats the purpose/value of many GIFS which create a seamless loop. It would be great to have a pause button on the GIF component so we can create seamless looping GIFs that still conform to accessibility standards. For this to be fully compliant the pause button/controls would have to be immediately apparent so perhaps also give an option to show/hide the controls like we have in the media component.
In an ideal world it’d be great to have some kind of setting/logic triggers that allow all animated content to be paused/hidden.
Completely see your point, and yes I agree that the use of looping gifs wouldn’t be suitable for an accessible course. Can I ask, what’s your use case for the gifs? Are they illustrative or conveying something the learner needs to know? I am wondering if there might be an alternative choice to using gifs.
In most cases it is decorative, though I do use GIFs as a signpost/header to highlight different segments of a learning experience, i’m also exploring animated GIFs to convey data visualizations. I’m a visual designer so I rely on animated elements often to bring visual interest but it’d be good to not have to sacrifice accessibility.
You could use a button and logic trigger to hide the gif for sure - just not Pause.
Hi @LaurynS - the problem is that the animated gif format doesn’t have any in-built option to pause/play.
Most times you see this on a site it’s actually showing the animation as video.
I have seen one or two attempts to make a ‘pausable’ gif but they are very ‘hacky’ solutions indeed.
It might be easiest just to export your animation as MP4 instead and use the Media component - especially as a properly encoded MP4 file will be far, far more performant than a GIF.
That is a great point, I didn’t consider the file format itself being an issue.