Pixel Glade

Accessible Gif Toggle

I've run this website for a few years now and I finally have some Javascript to share.

This page shares Javascript functions, explanations, and demos for an accessible gif toggle. It's accessible because it keeps motion off by default and can be toggled or activated and deactivated in multiple ways (button, mouse, or keyboard). This addresses the Pause, Stop, Hide (Level A) WCAG criteria.

There is a Single Image GIF Toggle suitable for single GIFs surrounded by static files, and a Multiple Image GIF Toggle more suitable for when there are lots of animated GIFs grouped together.

Free to use code

All the Javascript shared on this page is free to use without attribution.

I've given it a CC0 License which means you can copy it and do whatever to you like to it.

This is the only page (so far) where I've marked content as CC0, it is not a blanket rule. See Copyright for more about the other content on this site.

Animation Toggle Scripts

Examples of the animation toggle on a full page of gifs in action are in Vivid Memories of Animated GIFs, Cute Gifs, or Cool Gifs. This page will contain small demos using 3 GIFs.

The Javascript for these pages is made up of several functions. To see the entire script, see animation-toggle.js, or if you want to have each of these codes on the same page without variable problems see animation-toggle-demo.js.

Image processing

If you have a large number of GIF files you want to convert into PNG files, I recommend batch processing them with the command line tool ImageMagick, specifically the Inline Image Modification function, magick mogrify.

Command line tools can kind of be tricky to set up the first time, so here's some tips:

1. Download ImageMagick
2. Add the path to the ImageMagick directory to the Path variable of your system's Environmental Variables (see How to edit environment variables on windows 10 and 11).
3. Open the command prompt and navigate to the directory containing your GIFs (see How to change directories in command prompt)
4. Use the magick mogrify command below to convert all GIFs to a PNG based on the first frame

I recommend you make a copy of your folder containing the GIFs in case something goes wrong and you permanently overwrite or corrupt files.

Here's the magic line of the code that will batch process all your GIFs in a matter of milliseconds!

magick mogrify -format png *.gif[0]

Once you have acquired your PNG files, you should make sure the Image Source in your HTML file is pointing to the PNGs not the GIFs. Ideally viewers are not bombarded with a wall of moving GIFs (unless they choose to be!)

All the scripts depend on the splitFilename() function and a variable called gifdir which is essentially the path to your GIF/PNG files.

Single Image GIF Toggle

The button using ToggleGifButton() will turn the single image wrapped in the button from a PNG to GIF and vice versa.

Image and button code

<div class="animation-toggle">
  <button onclick="ToggleGifButton()" aria-pressed: "false"><img src="../../images/Animation-OFF.png" width="27" height="27" alt="Animation OFF" class="animation-status"><img src="../../images/maybike.png" width="44" height="46" alt="May riding a bike" class="to-animate"></button>
  </div> <!-- animation-toggle -->

ToggleGifButton()

To control the Gif Animation you will need ToggleGifButton().

This script depends on a variable pointing to the location of the stop and play icons that appear next to the GIF (statusdir) and a variable pointing to the location of the GIF/PNG images (gifdir).

<script>function ToggleGifButton(){
		selectimg = document.activeElement.getElementsByClassName("to-animate")[0]
		getAnimationStatus = document.activeElement.getElementsByClassName("animation-status")[0].alt;

		splitFilename(selectimg);
		
		if (getAnimationStatus == "Animation ON") {
		newname = gifdir+picfile + ".png";
		newstatus = "Animation OFF";
		newstatusimg = statusdir + "Animation-OFF.png";
		} else if  (getAnimationStatus == "Animation OFF") {
		newname = gifdir+picfile + ".gif";
		newstatus = "Animation ON";
		newstatusimg = statusdir + "Animation-ON.png"
		}
		selectimg.src = newname;
		document.activeElement.getElementsByClassName("animation-status")[0].alt = newstatus;
		document.activeElement.getElementsByClassName("animation-status")[0].src = newstatusimg;
}
}</script>

Multiple Image GIF Toggle

This button (using ToggleGif() will simultaneously turn all PNGs into GIFs, or vice versa.

Effectively it's a way of having the animations off by default unless someone decides to turn them all on at once.

In this example, the images are only toggled by the button.

Example image code

<img src="../../images/maybike.png" width="44" height="46" alt="May riding a bike">

Button code

aria-pressed will turn the button into a toggle button and screen readers will be informed of its current state (default is turned off).

<button onclick="ToggleGif()" aria-pressed="false">Animations are OFF</button>

ToggleGif()

To control the Button you will need ToggleGif().

<script>function ToggleGif(){
selectimg = document.querySelectorAll("img");

	for (let i = 0; i < selectimg.length; i++) {
		splitFilename(selectimg[i]);
	
		if (document.querySelector("button").innerHTML == "Animations are ON") {
		newname = gifdir+picfile + ".png";
		} else if (document.querySelector("button").innerHTML == "Animations are OFF") {
		newname = gifdir+picfile + ".gif";
		}
		selectimg[i].src = newname;

	}	// for loop	
		// at the end of the loop, swap the label
		if (document.querySelector("button").innerHTML == "Animations are ON") {
		document.querySelector("button").innerHTML = "Animations are OFF";
		} else if (document.querySelector("button").innerHTML == "Animations are OFF") {
		document.querySelector("button").innerHTML = "Animations are ON";
		}
}</script>

Controlling image animation with the mouse and keyboard

To control the gif with either mouse hover or keyboard targeting you will need PlayGif() AND PauseGif().

You will need to add the following attributes to the images:

• onmouseenter
• onmouseleave
• onfocus
• onblur

tabindex=0 will make the images targetable with the Tab (forward) or Tab+Shift (backwards) keys.

When using these methods, you should explain to the visitor how the methods work with instructions like Animation Controls.

Example image code

<img src="../../images/maybike.png" width="44" height="46" alt="May riding a bike" onmouseenter = "PlayGif()" onmouseleave="PauseGif()"  onfocus="PlayGif()" onblur="PauseGif()" tabindex=0>

PlayGif()

<script>
function PlayGif() {
// if GIFs are already active don't restart them
if (document.querySelector("button").innerHTML == "Animations are ON") {
return;
}

hovered = document.querySelectorAll("img:hover");
focused = document.activeElement;

if (hovered.length == 1) {
selectimg = hovered[0];
}
else if (typeof focused.src == 'string') {
selectimg = focused;
}

splitFilename(selectimg);

	if (picextname == 'gif') {
	return;
	} else if (picextname == 'png') {
	newname = gifdir+picfile + ".gif";
	selectimg.src = newname;
	return;
	}
}</script>

PauseGif()

<script>function PauseGif() {
// if GIFs are already active don't pause them
if (document.querySelector("button").innerHTML == "Animations are ON") {
return;
}

// find all images
selectimg = document.querySelectorAll("img");

// loop over images and revert gifs to pngs
for (let i = 0; i < selectimg.length; i++) {
		splitFilename(selectimg[i]);

	if (picextname == 'gif') {
		newname = gifdir+picfile + ".png";
		selectimg[i].src = newname;
		return;
		} else if (picextname == 'png') {
	}
	}
	return;
}</script>

splitFilename()

All the scripts depend on splitFilename(). It essentially removes the file extension and replaces the file with a GIF/PNG with the exact same filename.

<script>
function splitFilename(selectimg) {
	picsplit = selectimg.src.split('/');
	picname = picsplit[picsplit.length-1];
	picextsplit = picname.split('.');
	picextname = picextsplit[picextsplit.length-1];
	picfile = picextsplit[0];
}
</script>

Toggling animation with a button, keyboard, or mouse

If you decide to include all three methods together, I appreciate you.

You may want to explain to the visitor how the methods work with instructions like Animation Controls.

Animation Controls

Animations are turned off by default. Instructions:

• Hover your mouse over individual GIF images to animate them
• Use keyboard-presses (tab and shift+tab) to sequentially animate individual GIF images
• Use the Animation Toggle button below to turn them all on (or off) at once

You can choose to animate the GIFs with any of the above methods. Or you can choose not to animate them, it's not like they're distracting you with unpausable motion.

Example image code

<img src="../../images/maybike.png" width="44" height="46" alt="May riding a bike" onmouseenter = "PlayGif()" onmouseleave="PauseGif()"  onfocus="PlayGif()" onblur="PauseGif()" tabindex=0>

Button code

aria-pressed will turn the button into a toggle button and screen readers will be informed of its current state (default is turned off).

<button onclick="ToggleGif()" aria-pressed="false">Animations are OFF</button>

Summary

You made it to the end and I hope you learned something about Javascript today.