Accessible GIF Image Player In Vanilla JavaScript – Gifa11y

Category: Image , Javascript | August 22, 2022
Views Total:245 views
Official Page:Go to website
Last Update:August 22, 2022


Accessible GIF Image Player In Vanilla JavaScript – Gifa11y


Gifa11y is a Vanilla JavaScript library that adds configurable, accessible play/pause buttons to animated Gif/WebP images.

How to use it:

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

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

2. Initialize the Gifa11y library and specify the container element that holds your GIFs.

var gifa11y = new Gifa11y({
    container: '.container'

3. That’s it. The library will automatically add play/pause buttons to the GIFs inside the ‘container’.

4. Auto pause the GIF on initial load. When enabled, the library generates a preview image from the GIF’s first frame using HTML canvas.

<img loading="lazy" 
     alt="Example GIF"

5. Ignore specified GIFs using the ‘gifa11y-ignore’ class.

<img loading="lazy" 
     alt="Example GIF"

6. 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: '&#9888; Error! Please add alternative text to GIF.',
    // Display a warning message when your GIF has no alt attribute
    missingAltWarning: true,

7. Create a button to play/pause all GIFs.

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


v1.0.6 (08/23/2022)

  • Bug fix. Resolve maincontainer === undefined.


  • Add vertical-align: middle to SVG icon. Remove .webp support. Animated webp is less common then GIF. In more cases, webp files are usually static images.


  • Add fallback when canvas.clientWidth equals 0


  • Support for WebP

You Might Be Interested In:

Leave a Reply