Ability to pause/hide GIFs

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.

Hi Lauryn,
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.

1 Like

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.

this might help? How to stop animated GIFs in Chrome and Firefox | PCWorld