Gifa11y
Easily add pause buttons to your GIFs.

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

Toggle all button (Optional)
Have a lot of GIFs? Add optional toggle button to your page.

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.

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

Large target size
Clickable area = 50px by 50px.

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

Missing alt text (or marked as decorative)?
You'll get a friendly reminder. ðŸ¤

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.

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.

View source on GitHub
Learn how to install and customize on GitHub. Feel free to contribute or leave feedback!
Image source: giphy.com