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.
- Generates a still using <canvas> element
- No need to upload png/jpeg "still" of GIF
- Keyboard accessible
- Unique accessible names for buttons based on alt text
- Large target size (50px by 50px)
- Respects prefers-reduced-motion media query
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.
Stills are generated using <canvas> element and inherit the same classes as the original GIF.
Large target size
Clickable area = 50px by 50px.
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. 🤠
Add CSS class gifa11y-ignore if you'd like to ignore a GIF, include gifa11y-ignore in file name, or add exclusions via props.
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.
Image source: giphy.com