GIFs in Canvas: Stop/Pause Option?

[aolsonpacheco]

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? or better yet, Can Canvas please implement a pause on looping GIFs after 5 seconds? (MS Teams does this).

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:

[ChristaParks]

I haven't found anything yet.  I came close with this: https://css-tricks.com/pause-gif-details-summary/

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

[aolsonpacheco]

@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!

[ChristaParks]

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. 

[TiffanyStull]

@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?

[mtuten]

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.

[aolsonpacheco]

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? 

[mtuten]

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.)

Click to Show/Hide Gif

<div style="margin-bottom:20px;" >
    <details>
        <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="https://assets.codepen.io/128034/stopl.gif" alt="Animated: Alan Partridge - would it be rude to stop listening to you?" /></div>
    </details>
</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.

[TiffanyStull]

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.

[ChristaParks]

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(  

[mwolfenstein]

Much as the workarounds presented here are nice, they require faculty to be versed in enough HTML to implement them, and even then they compromise the desired experience of adding an animated GIF to a page. This is an accessibility issue, and I would like to see Instructure prioritize updating their code so that when GIFs are added using the RCE, they will play once and on click. Otherwise, Canvas is not WCAG 2.1 compliant, and any institution using it would need to carefully monitor every course and remediate all animated GIFs with one of these workarounds or remove them. I'm not sure if this particular issue would be a 508 compliance issue, but this is an issue with a straight forward technical fix that institutions cannot implement themselves and should be part of how Canvas works "out of the box." On a related note, Canvas images should also support the figure and figcaption tags so that accessible captions can be added in the image options. Without this support, the vast majority of images will be captioned incorrectly because very few users know or will take the time to go into the HTML to add their captions.

[TiffanyStull]

@mwolfenstein I think the problem is that making animated gifs pause automatically is not a "straightforward technical fix".  It's hard enough to get Instructure to put easy fixes into place (e.g., adding a non-color text indicator for dropped grades in the Gradebook), let alone something this complex.

[mwolfenstein]

@TiffanyStullSo this is a really good point about how Instructure has been slow to fix some of the truly simple things, but I would also say that from a web development standpoint the complexity of this request depends on the implementation. One possible solution that wouldn't guarantee accessibility but would at least be a move in the right direction would be to inspect GIFs, check the loop count, and at least let the user know if it is set to 0 (endless), and that this is an accessibility issue. Obviously Instructure is a huge company and a quick web search will show you that there are people out here who have developed workable code to handle this problem as well. I totally get where you're coming from, but it's really unfortunate that our collective response to "this slightly more complex accessibility issue needs to be fixed" is generally something like "they aren't fixing more basic accessibility issues so i guess we need to lower our standards."

Edit: as far as feasibility of play/pause, this exists in MS Teams. When I drag an infinitely looping animated GIF into a Teams chat, it automatically has a play/pause button added and plays on click. I don't think there is a good excuse for Instructure not implementing features that exist on other major platforms and meet accessibility requirement. From their quarterly report full year 2022 revenue: Revenue is expected to be in the range of $471.2 million to $472.2 million

[TiffanyStull]

@mwolfenstein these are all excellent points.  I guess for me, it is more a question of priority.  In my opinion, Instructure should be fixing the accessibility issues their own software introduces first and foremost before being concerned about issues with the content users upload to it.

[mwolfenstein]

@TiffanyStullI absolutely agree with you on this. I do consider the presentation of GIFs to be part of Canvas since GIFs themselves are a file format rather than executable code, but I would still place proper accessible support for something that is an optional content type lower down the list of priorities than contrast in web app (or mobile app) UI. I'd like to see all of these issues addressed, but there definitely is a reasonable triage process that would incorporate that sort of prioritization.