Gifa11y

Easily add pause buttons to your GIFs.

Dwight Schrute from The Office says: Give me control!

This script is intended for shorter GIFs that loop indefinitely. It only generates a still of the first frame.

  • Automatic
    • Generates a still using <canvas> element
    • No need to upload png/jpeg "still" of GIF
  • Accessible
    • Keyboard accessible
    • Unique accessible names for buttons based on alt text
    • Large target size (50px by 50px)
    • Respects prefers-reduced-motion media query
  • Vanilla JavaScript, no dependencies

Demo

Illustrated astronaut pressing a big red button.

Toggle all button (Optional)

Have a lot of GIFs? Add optional toggle button to your page.

Kermit fiercely typing away on a typewriter.

Pause GIF initially (Optional)

Add the class gifa11y-paused if you'd like the GIF to be initially paused. Or include "gifa11y-paused" in the file name.

Owen Wilson reading a newspaper and saying wow.

Automatic stills

Stills are generated using <canvas> element and inherit the same classes as the original GIF.

Milkyway galaxy slowly spinning clockwise.

Large target size

Clickable area = 50px by 50px.

White husky in a blue jumpsuit floating in a rocketship.

Keyboard accessible

Native <button> elements with a unique accessible name. Hover or tab to pause button to reveal accessible name.

Waterfall within a lush green forest.
Hyperlink

Hyperlinked gifs

When a GIF is within a hyperlink, the pause button is appended before the anchor. This prevents nesting of interactive controls.

Missing alt text (or marked as decorative)?

You'll get a friendly reminder. 🤠

Animated GIF of Gandalf saying: you shall not pass!

Exclusions

Add CSS class gifa11y-ignore if you'd like to ignore a GIF, include gifa11y-ignore in file name, or add exclusions via props.

Waterfall within a lush green forest.

Collapsed content

Gifa11y uses clientWidth to determine width of images. When an image is hidden or within collapsed content, the clientWidth will equal 0. As a fallback, Gifa11y will rely on naturalWidth to set the width of the generated canvas element so it displays properly.

Two medieval armies charging and clashing with each other. Chaos ensues; swords and armour flying and a large pile of bodies. Text overlay that says Git Merge.

View source on GitHub

Learn how to install and customize on GitHub. Feel free to contribute or leave feedback!

Gifa11y on GitHub

Image source: giphy.com