All img elements have associated images that do not flicker.
What Does This Mean?
Essentially, what this result means is that you shouldn't have animated images that contain flashy or flickering content. Below is an example of an animated gif, though not of one that flashes or flickers.
Note: In the mobile app, the Hide and Show Code Links are obsolete. We couldn't hide them without removing them from the web browser view.
Flashing animated gifs can cause seizures in persons with photosensitive epilepsy. Even students without epilepsy may find animated images distracting and/or headache inducing.
Cause of Result
To get this result, you need to have embedded an animated gif that flashes between 3 and 50 times per second.
We have not been able to replicate this error yet, so we can't say if there is a U FIX IT! button for this result. If you earn this error, please contact accessonline@clemson.edu.
There is no clean and easy way to address this issue in Canvas, even from the HTML editor. There are a couple of bootstrap or makeshift techniques that can at least hide such images, in accordance withWCAG 2.2.2Links to an external site.. However, with these solutions students that use the Canvas mobile app will either be unable to access the image or will have to use the links provided to skip past the image.
Via Toggle
When using the web browser to access Canvas, toggles are a nice way to control the visibility of animated images. When viewed from the Canvas app, the toggle switch does not work which means that if the image is visible when the page loads, the student will have no way of hiding the image in the mobile app.
Below is the code for creating a toggle where the image is visible when the page loads.
It is possible to use the sections of code that follow the five hyphens on multiple images so that the switches will control all gifs at once. However, if you would rather have buttons for each gif, you'll need to use all of the code and change the id, aria-controls, aria-label, and button text for each (in addition to the bits of code that are in brackets).
Via Tabbed Panel
When using the web browser to access Canvas, tabbed panels are another nice but perhaps clunkier way to control the visibility of animated images. When viewed from the Canvas app, the contents of the tabbed panel are completely visible as soon as the page loads; however, links placed above and below the image may be used to skip the image.
Tabbed panels cannot be used to control multiple animated gifs at once, so the code will need to be applied to each gif on the page.As such, all of the ids and hrefs (except for href="#") would need to be changed for each image this code was applied to.
If you want to have borders around the tabbed panel or want to color the tabs, play around with the color and background-color properties. The only color you will probably want to leave alone is the #ffffff on the <ul> at the top of the tabbed panel as it makes the bullets for the tabs white (which may be preferable for the mobile app user).
