Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Member

GIFs in Canvas: Stop/Pause Option?

Many instructors LOVE using and creating their own GIFs as a form of instructor presence and humanizing their online courses.

However, to make animated GIFs accessible, there needs to be an option to stop or pause or stop after 5 seconds (as well as meet the requirements for flashing content).

Question: Does anyone know of any HTML code that can be added to Canvas to make GIFs able to stop/pause?

I know there are many things to be careful about using GIFs, but I'd like to have an option for providing accessible GIFs when instructionally relevant. 

Reference:  WCAG 2.2.2 Pause, Stop, Hide (Level A) Guideline:

Tags (1)
9 Replies
New Member

I haven't found anything yet.  I came close with this:

I couldn't make it work quite right in Bright Space though. Let me know if you have luck with your LMS.

Community Contributor

My workaround in the past had been to put the gif in the second tab of a tabbed panel with one tab reading "Hide gif" and the other saying "Show Gif." This did not work for mobile though. 

This said, some (relatively) recent code for accordion/toggle, might suit your needs. While I don't have much experience with it, I do think it worked on mobile and desktop. If my memory is also correct, I think the screen reader experience for Chrome users wasn't perfect with regards to consistently conveying expanded/collapsed state accurately.

Thank you for this great resource!

Hiding and revealing a GIF is a workaround, but not a common practice for GIFs. Most major platforms have a Pause/Stop button. 

I wonder if this would be something we could alert Canvas to as a "bug" to fix for accessibility? 

@ChristaParks  Thank you for sharing!

I tried the HTML but it did not overlay the GIF.

Currently we edit GIFs in Camtasia to less than 5 seconds. But I'm looking for something we could more easily deploy at scale (ideally by default) and it seems requesting Canvas to develop this might be the most straightforward route. Most major platforms provide a pause/stop for GIFs, so perhaps it is on the roadmap. I'll do some digging on that!

I had that trouble too and discovered that in Course Arc anyway I can put the CSS code in as another block on the page and it will allow the gif to work. It sill would be great if they could find a way to provide this as an accessibility issue though. 

@aolsonpacheco while I agree that there should be a way to stop or pause animated GIFs, I'm curious about the "major platforms" you mention that provide a stop/pause option for them.  The only major web applications I've seen that programmatically pause GIFs are social media sites.  I'm not aware of any LMS that includes an option to stop or pause GIFs.

What "major platforms" are you using for developing course content that exhibit this beneficial behavior?

Community Contributor

I imagine Microsoft Teams is among the platforms aolsonpacheco is thinking of.

I tried playing with <summary> <detail> a little more. This was the best I could do. (The gif came with some code that I copied from somewhere else. I do not mean it as a statement associated with this conversation.)


Animated: Alan Partridge - would it be rude to stop listening to you?






<div style="margin-bottom:20px;" >
        <summary style="cursor: pointer; font-size: large; border: 1px solid #D6D9DC; background-color: #f5f5f5; padding: 10px 10px 10px 20px; border-radius: 25px; width: 230px;" role="button" aria-expanded="false">Click to Show/Hide Gif</summary>
        <div><img src="" alt="Animated: Alan Partridge - would it be rude to stop listening to you?" /></div>






While it still isn't as ideal as being able to pause the gif, it is still a way to improve the accessibility.

- 4/29/22 Update -

I tried adding this as a reply and it didn't take, so I'm trying again via editing an existing post.

The problem with the two-images-plus-overlay method is that it isn't supported in Canvas.

When I tried the code from CSS Tricks, this is what I got. Video of how code renders in Canvas (no audio).

In the video, the still image is visible. 
Clicking on the still image does nothing.
Clicking the arrow beneath the still image reveals the animated image below the arrow. (So we have visible still, visible arrow, visible animated gif)
Clicking either of the images does not hide the animated gif.
Clicking the arrow hides the animated gif.

This is why I altered the code to create a show/hide gif button.



Doing a search online, I also found the code you included above @mtuten.  That and other solutions I found all seemed to require uploading two separate images - the animated gif and a still image (jpg, gif, png) to cover it.  Then when you select whichever image is currently displayed, the alternative version of the image displays.

I think trying to get most content creators to upload multiple images and add the HTML/CSS would be much more difficult than encouraging them to replace some of their GIF images with very short videos.

It would definitely be nice to have a programmatic solution from Canvas to automatically create the second, still copy of the image and swap the display of still and animated image as the user selects it with Enter or click.  However, I'm not sure they would consider it a bug to fix as much as a new feature request or improvement.

I wouldn't mind adding it as a short video instead if it allowed me to use the activity blocks for images (hot buttons, etc) without having to make it in another program like 5hp.  :0(