Accessible GIF Image Player In Vanilla JavaScript – Gifa11y

Preview:

Description:

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" 
     src="demo.gif" 
     class="gifa11y-paused" 
     alt="Example GIF"
>

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

<img loading="lazy" 
     src="demo.gif" 
     class="gifa11y-ignore" 
     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: '.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: '⚠ 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>

Changelog:

v2.0.2 (06/14/2022)

• 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.

07/01/2022

• 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.

01/08/2022

• Add fallback when canvas.clientWidth equals 0

12/14/2021

• Support for WebP