ADK Pause GIF

Component Overview

The Zenyth ADK Pause GIF solution is a lightweight, fully accessible solution designed to enhance compliance with WCAG Success Criteria 2.2.2 – Pause, Stop, Hide. This criterion states that any animation lasting more than five seconds must have an accessible option to pause, stop, or hide the moving content.

Our solution seamlessly integrates into any website, providing a keyboard-accessible pause button for all GIFs without requiring additional applications, plugins, or extensions. It ensures full compliance with accessibility standards while maintaining a smooth user experience.

Key Features:

• WCAG Compliance: Ensures adherence to WCAG 2.1 & 2.2 guidelines by allowing users to pause GIF animations.
• No Extra Plugins Required: Works directly within the browser without third-party extensions.
• Keyboard Navigation Support: Fully accessible pause/play toggle via Tab and Enter keys.
• Lightweight & Efficient: Minimal impact on page performance for a seamless user experience.
• Seamless Integration: Compatible with modern web frameworks like React, Vue, Angular, Shopify, Magento, and BigCommerce.

How It Works

Once the script is added, Zenyth ADK Pause GIF Solution seamlessly enhances GIF handling by injecting the necessary dependencies and dynamically managing GIF playback.

Step 1: Validation & Initialization

After loading, the script validates the URL and ensures that all required dependencies are included, enabling the solution to function properly.

Step 2: GIF Detection & Button Injection

Zenyth ADK scans the page for all GIFs and automatically:

• Identifies each <img> tag containing a GIF.
• Adds an individual pause/play button for each detected GIF.
• Inserts the button **before** the GIF in the DOM order.
• Assigns unique CSS classes to the **parent container**, the **GIF image**, and the **pause button**.

Step 3: Secondary Image & Dynamic Frame Extraction

When a GIF is paused, Zenyth ADK replaces it with a static preview image:

• Instead of requiring a separate hosted image, the script dynamically extracts the **first frame** of the GIF.
• The extracted frame is displayed as a **secondary image** when the GIF is paused.

Step 4: Styling & Customization

The script applies a base style that ensures proper image swapping when pausing GIFs. Additionally, the automatically assigned classes can be used for custom styling.

Step 5: Keyboard & Accessibility Support

All pause buttons are fully keyboard-accessible, supporting Tab navigation and Enter for toggling playback.

Live Examples

See Zenyth ADK Pause GIF Solution in action! Below are interactive examples demonstrating how the script detects GIFs, adds pause/play functionality, and dynamically extracts the first frame for a seamless user experience.

Example 1: Regular GIF

Example 2: GIF within a Link (Button added Before the Link)