Automattic / Automattic/jetpack
GIF Block: option to pause gif autoplay (accessibility request)
- 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
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