E-mail List Archives
Thread: Animated Gifs
Number of posts in this thread: 2 (In chronological order)
From: Jasper Cole
Date: Fri, Aug 22 2014 7:34AM
Subject: Animated Gifs
No previous message | Next message →
I'm curious about animated gifs. Using endlessly looping animated gifs violates WCAG 2.2.2 because it counts as "moving", it starts automatically, lasts more than five seconds, and is presented in parallel with the rest of the page.
I am considering removing it entirely, but I work in an educational setting and a lot of the students seem to respond to websites that contain animation. Therefore, I'm wondering if there's a way around the problem.
I've currently made it so that the user can stop the animation by clicking on it, but without instructions, no one will know about this functionality. Putting a button beside it is also very obtrusive. Furthermore, both of these require javascript to be enabled, which may prevent them from working for some users.
Has anyone else ever dealt with this problem or a similar problem before? I'd love to know about your solution.
Thank you!
--Jasper Cole
From: Mallory van Achterberg
Date: Fri, Aug 22 2014 1:46PM
Subject: Re: Animated Gifs
← Previous message | No next message
On Fri, Aug 22, 2014 at 01:34:05PM +0000, Jasper Cole wrote:
> Has anyone else ever dealt with this problem or a similar problem before? I'd love to know about your solution.
>
I haven't dealt with the problem before but you could do it the other
way around: start with a static "poster" image that students who like
animation can click to activate (rather than other way around). To avoid
"obtrusive" looking buttons, the "poster" (term taken from the HTML5
video element) could have a "play button" overlay everyone's gotten
used to seeing on actual videos to encourage those who like animation
to click.
Especially if these are "extras" on the page, students who don't click
them won't be missing out on necessarily information, right?
Still does require Javascript, unless you want to make clever use
of the :target attribute (to hide the "poster" that was sitting
exactly over the always-running animated gif). :P
(this actually also has the advantage of adding a way to turn it "off"
when the image container no longer has the :target state)
-Mallory