There's a handful of clever ways to pause & play a GIF — using a JavaScript library or using a pure CSS solution. Here's another that's accessible using the details/summary elements.
Check of this cool trick by Steve Faulkner that allows you to pause a GIF using the HTML <details>/<summary> element. Its a quick and dirty way to pass WCAG Success Criterion 2.2.2 Pause, Stop, Hide.
The trick behind the treat is a non-animated JPG that covers the GIF, effectively “pausing” it.
👋 Howdy! My name is Ben Marshall & I’ve been developing websites for over 20 years. I specialize in WordPress development, SEO strategy & LOVE what I do. Familiar with CSS-Tricks? … you should be, my site’s design was heavily inspired by it — hope you like it.
I build websites for both small mom & pop shops to large Fortune 500 companies. In addition to freelance work, I also have a full-time position at the New York-based Entermedia agency. Need a site, help with an existing one or a boost in search engines? I’m your guy, contact me today!
Are you a non-profit or organization helping the community and in need of a site? I offer heavily discounted services — sometimes free — to worthy causes.
All comments posted on 'Pause a GIF with HTML details/summary — the accessible way.' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.