Accessible GIF Image Player In Vanilla JavaScript – Gifa11y

Category: Image , Javascript | January 8, 2024
Views Total:42 views
Official Page:Go to website
Last Update:January 8, 2024


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.umd.min.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',
    buttonBorder: '2px solid #fff',
    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: '.gifa11y-off',
    // Inherit classes
    inheritClasses: true,
    // Pause GIFs on initial load
    initiallyPaused: false,
    // Warn content author if they are missing an alt attribute on GIF
    missingAltWarning: true,
    // Show or hide Play/Pause buttons.
    showButtons: true,
    // Show or hide GIF text within buttons
    showGifText: false,
    // Using CSS selectors to target other images 
    target: '',
    // 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.',

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

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


v2.0.3 (01/08/2024)

  • Buttons are now encapsulated within a web component to avoid CSS conflicts.
  • New prop buttonBorder to change properties of a play/pause button’s border.

v2.0.2 (06/14/2023)

  • Refactored & modularized. Less spaghetti code.
  • Added dev tooling & CSS/JavaScript linting.
  • New props and button style.

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