Pause a GIF with HTML details/summary — the accessible way.

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.
Shared by
Published
Sponsored
Do you have a great article to share you want to contribute? Contact me about your idea.
Find your next web developer job
jobs by Indeed

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.

Did you find Pause a GIF with HTML details/summary — the accessible way. useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
jobs by Indeed
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Do you have a great article to share you want to contribute? Contact me about your idea.
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.

Leave a Reply

Your email address will not be published. Required fields are marked *

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.