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
  • Customizable
    • Customize colours and icons via props.
    • Leverages web components to avoid style conflicts.
  • Vanilla JavaScript
  • Size: 8 KB minified

Demo

Illustrated astronaut pressing a big red button.

Toggle all button (Optional)

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

Gif is loading...

Gifa11y can dynamically add play/pause buttons as new gifs are added to the 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 can 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.

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

Works within collapsed content too!

Cat pop tart with a trailing rainbow.

WebP images

Target specific .webp images using the target prop.

Freddie Mercury pointing up.

Show "GIF" within button

Set showGifText to true to add 'GIF' within the button.

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