Gifa11y easily adds pause buttons to your GIFs. This script is for shorter GIFs that repeat indefinitely. It only generates a static image from the first frame.

Automatic

• Generates an <canvas> element that is still in use
• No need to download png/jpeg “still” from GIF

Accessible

• keyboard accessible
• Unique accessible names for buttons based on alt text
• Large target size (50 x 50 pixels)
• Respect prefers low-traffic media query

How to make use of it:

1. Import the gifa11y.js library into the document.

<script src="gifa11y.js"></script>

2. Initialize the Gifa11y library and select the container element that contains your GIFs.

var gifa11y = new Gifa11y({
    container: '.container'
});

3. Auto-stop GIF image on initial upload. When enabled, the library creates a preview image from the first GIF frame using the HTML panel.

<img loading="lazy" 
     src="demo.gif" 
     class="gifa11y-paused" 
     alt="Example GIF"
>

4. Ignore GIFs specified with the “gifa11y-ignore” class.

<img loading="lazy" 
     src="demo.gif" 
     class="gifa11y-ignore" 
     alt="Example GIF"
>

5. Available options.

var gifa11y = new Gifa11y({

    // Button styles
    buttonBackground: 'indigo',
    buttonBackgroundHover: 'rebeccapurple',
    buttonIconColor: 'white',
    buttonFocusColor: '#00e7ffad',
    buttonSvgSize: '1.5rem',
    buttonIconFontSize: '1rem',
    buttonPlayIconID: ' ',
    buttonPauseIconID: ' ',
    buttonPlayIconHTML: ' ',
    buttonPauseIconHTML: ' ',

    // Container
    container: 'body',

    // Ignore specific GIFs or regions
    exclusions: '',

    // Ignore specific containers
    gifa11yOff: '',

    // Inherit classes
    inheritClasses: true,

    // Pause GIFs on initial load
    initiallyPaused: false,

    // i18n
    langPause: 'Pause animation:',
    langPlay: 'Play animation:',
    langPauseAllButton: 'Pause all animations',
    langPlayAllButton: 'Play all animations',
    langMissingAlt: 'Missing image description.',
    langAltWarning: '⚠ Error! Please add alternative text to GIF.',

    // Display a warning message when your GIF has no alt attribute
    missingAltWarning: true,
    
});

6. Create a button to play/pause all GIF files.

<button id="gifa11y-all">Pause/Play All GIFs</button>

See Demo And Download

Official Website(adamchaboryk): Click Here

This superior jQuery/javascript plugin is developed by adamchaboryk. For extra Advanced Usage, please go to the official website.