mary.codes

On Monday, I published a post about my experiences at my first developer conference. While I might've fumbled the opportunity a bit, I did get to listen to a great talk about accessibility from Todd Libby. As I was writing down my thoughts in Monday's post, I used a lot of animated GIFs to spice things up. I'm one of those people who thinks in images, and honestly, I think in memes a lot.

However, as I was publishing the post, I wondered just how animated GIFs can hurt accessibility. I know that excessive motion can negatively impact accessibility. However, I've never really looked into how a looping animation can cause unintentional harm.

According to multiple sources, animated GIFs can be made accessible, but generally aren't accessible as-is from the internet. Usually when we see an animated GIF it loops indefinitely, which can cause accessibility issues.

Blinking, scrolling, or animated page elements are covered in WCAG 2.2.2 - Pause, Stop, Hide. Per the documentation:

"Moving content can also be a severe distraction for some people. Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page. Five seconds was chosen because it is long enough to get a user's attention, but not so long that a user cannot wait out the distraction if necessary to use the page."

Animated content must have a mechanism to pause the content, remove it entirely from the page, or it must stop within 5 seconds.

I have a few ideas for becoming compliant with WCAG 2.2.2 while still enjoying animated GIFs on my site.

1. I could edit each GIF to only loop for a certain number of cycles so it stops within 5 seconds, per WCAG Technique G152. This could take a while, manually editing each GIF and replacing them within various posts. Also, GIFs further down the page would potentially stop before being seen (although probably not with lazy loading... I would have to test that theory).

2. Detect if a post had GIFs embedded within it and add a button to the top of the page that would hide all animated GIFs on the page. This would remove the distracting GIFs, but would also remove the image entirely. This would probably be the easiest solution to implement.

3. Implement a system similar to Mastodon's. Uploading an animated GIF to Mastodon automatically converts it to a soundless MP4. The MP4 loops just like an animated GIF, but, depending on the user's settings, it will only animate on hover. This also will require a lot of work, converting the GIF to MP4 (although probably less work if I automate it with ffmpeg), and replacing all GIFs with MP4s in each post. I do like the effect, but I'm not sure I have a clear idea for implementing it.

4. Create a web component (or React component) with a play/pause button. The component will contain the animated GIF and also a static thumbnail generated from the first frame. When the pause button is pressed, the GIF hides and the thumbnail is shown, and vice-versa for the play button. It might take the most work of these options, but having a reusable component that can be dropped into any project might be the best option. There could also be a button for the entire article (like the second option), that triggers all the components to pause at once. Perhaps it could even use prefers-reduced-motion to toggle automatically.

I really like the idea of implementing the last option. Not only could it be useful to me, but if I can publish the component and it helps other developers create more accessible experiences, even better. Here's an example from web.dev that's very close to what I want to achieve with a web component:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

There are two animated source images that appear if the user allows motion, and a static version that's used if reduced motion is enabled. I want to extend that a little further to allow the user to decide if they want to manually stop an animation without having to adjust their computer or browser settings.

Regardless of what method I choose, I do plan on fixing accessibility problems on this site as soon as I can, and I expect to start with this problem.