Accessible GIF Image Player In Vanilla JavaScript – Gifa11y

Category: Image , Javascript | January 8, 2022
Author:adamchaboryk
Views Total:113 views
Official Page:Go to website
Last Update:January 8, 2022
License:MIT

Preview:

Accessible GIF Image Player In Vanilla JavaScript – Gifa11y

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.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: '',
    // 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>

Changelog:

01/08/2022

  • Add fallback when canvas.clientWidth equals 0

12/14/2021

  • Support for WebP

You Might Be Interested In:


Leave a Reply