Automattic / Automattic/jetpack

GIF Block: option to pause gif autoplay (accessibility request)

Open
#20,409 2 comments 3 reactions 0 assignees View on GitHub
[Block] GIF [Focus] Accessibility [Pri] Normal Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Is your feature request related to a problem? Please describe.

The GIF block (Giphy integration/embed) auto plays gifs on repeat automatically. This causes discomfort ranging from, at the mildest, distracting for some people, ranging to, on the other end of the spectrum, real accessibility/sensory difficulties in terms of sensory overload or overwhelm for some people, particularly the neurodiverse (autism/ADHD/[epilepsy](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Seizure_disorders)/sensory).

At A8C we have a very gif heavy work culture, including using gifs in essential workplace reading or training materials. Often, the gif itself includes a cultural or other reference or humorous touch that can add nuance to the text content, so it would be good to retain the image in some form ideally. However, the inclusion of animated gifs can be a barrier to concentration or impair the ability to navigate or concentrate on reading the content in question.

#### Describe the solution you'd like

A way to 'pause' gifs, via a pause icon on gifs.

#### Describe alternatives you've considered

We considered the inverse, where the gif is static by default and needs to be clicked to be played (more accessible, but also more of a divergence from expectation).

We also considered the possibility of setting the gif to only 'play' or 'loop' once, or for a limited time, say, [5 seconds](https://www.w3.org/TR/WCAG20-TECHS/G152.html). We could also include a 'play' button to encourage the gif to autoplay beyond that time.

#### Additional context

- Basic concept of a potential solution: https://css-tricks.com/pause-gif-details-summary/
- Internal A8C P2 discussion including a manual CSS fix to hide all gifs: pbSX7M-45-p2
- Flashing, blinking, flickering (Mozilla accessbility guidance): https://developer.mozilla.org/en-US/docs/Web/Accessibility/Seizure_disorders

Contributor guide

Open the contributing guide

Research direction

Start by locating the GIF block's Giphy integration/embed entry point and review the linked CSS-Tricks concept and accessibility guidance. Confirm the interaction design, then verify that users can retain the GIF while controlling its animation with an accessible pause or play control.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.