Accessibility
5 min read

Make a GIF accessible in Webflow

By
Louise Hill
Share this post
A man holds up a mobile phone to his ear to hear instructions from his screen reading technology.

Overview

I break down the ways GIFs can cause problems for people with specific accessibility requirements and share a step-by-step guide for uploading your own GIFs to Webflow; making them accessible with some copy and paste code.

When I was building this website, I wanted to ensure the site was both accessible and had a low carbon impact.

For environmental reasons, I wanted to cut out video files, so I turned to GIFs to showcase work I would typically use video for.

I've adapted this code (perfect for non-Webflow folks) so that someone with no coding knowledge can easily use it on their Webflow site. Kudos to Steve Faulkner for the original solution.

Step-by-step guide

In design programs

Step 1: Remove flashing or blinking

Firstly, for photosensitive or epileptic site visitors, we need to ensure the GIF does not flash more than 3 times per second. Anything faster than this could cause seizures or headaches.

Tackling this starts within GIF design files. We made our GIFs in Adobe Photoshop.

Adobe photoshop screen. Shows the 13 frames of the GIF and that they were playing at 0.5 seconds.
The example shows a frame speed of 0.5 seconds, this means the GIF flashes 2 times per second

Step 2: Ensure any text within the GIF has high visual contrast

You should also ensure that text within the GIF image has a strong contrast ratio for people with low vision. You can check this in design files using accessibility contrast checking tools like Stark or Contrast.

The contrast plugin in Figma showing the text selected "We dare you" passes AAA contrast levels.This text is from the Detox Kitchen Vegan Challenge GIF in the Futurelabs case study area.
AAA score for text contrast, using Figma plugin: Contrast
Step 3: Export the first frame of your GIF as a separate image file

You will need this image for next steps.

Photoshop screen showing the image from the first frame of the GIF being exported to a Jpeg file
First frame exported as a Jpeg

In Webflow

Step 4: Upload your GIF file and the separate image of your first frame into your assets panel on Webflow

Step 5: Add alternative text to each file to describe what they show

There's some really great advice in this Mural accessibility article about writing suitable alternative text for GIFS.

The alternative text box in Webflow, activated by clicking on the settings cog on the top right hand corner of each image in the assets panel.
Add alternative text in the Webflow asset panel in the asset details of your image

Step 6: Allow a website visitor to pause, stop or hide the GIF

We now need to allow visitors to pause, stop and hide GIFs when they visit your site. The reason for this is to help people with seizure disorders, or other disabilities. If you have a GIF over 5 seconds, site visitors need to be able to pause it. GIFs that run over 5 seconds are particularly bad for causing disorientation in people with certain cognitive disorders. With some copy and paste code we can quickly solve this problem.

Code for Webflow

Step 7: Drag in an embedded HTML block

Drag the block to where you want to display your GIF from the advanced section of your Webflow add panel, or click to add custom code in your rich text

2 options on Webflow to embed your HTML code. Either in the Add sidebar, or in the Rich Text add bar.
HTML embed options in Webflow

Step 8: Now copy and paste in this HTML code (in the HTML tab)

This will place both your still image and animated GIF into one place on your page.

See the Pen Accessible GIFs on Webflow by louise hill (@louise-hill) on CodePen.

Step 9: Grab the image links and copy paste the alternative text

Click the settings cog on the image in the assets panel and click on the link icon to copy the link) and paste the urls into the spaces highlighted in the code snippet above, replacing the placeholder text.

Copy and paste the alternative text for the images into the <alt> tag area in the code snippet in the speech marks, replacing the alternative text placeholders.

The image panel in Webflow, activated by hovering on each image and clicking the settings cog. From here you can copy the image link to clipboard by clicking on the link icon. On the right of the image is an example of where to copy paste alternative text into the code. After alt=&quot;&quot;. You can place the text between the speech marks.
Where to copy the asset link and where to paste in the alt text in the code

Step 11: See 2 images on top of each other

You should now see 2 images above each other in the designer. The bottom image should be moving. Here's an example below from this website:

The static image displayed on top of the moving image and a panel with the code pasted in it.
Two images on top of each other

Step 12: Use this JavaScript snippet (In the JS tab)

This JavaScript snippet allows site visitors to automatically hide the GIF if they have the reduced motion preference set in their internet settings. It also swaps in the still image on the GIF if a site visitor presses pause.

Add this JavaScript in the page settings your GIF is displayed on by clicking the page settings cog, then pasting the code into your 'before body' code area, then save.

How to find the before ,body. tag area on Webflow. Click on the settings cog on the GIF's page in Webflow, scroll and paste in the JavaScript code.
Add the JavaScript to your before <body> tag code area — you can find it after clicking on your edit page settings cog

See the Pen Accessible GIFs on Webflow by louise hill (@louise-hill) on CodePen.

Step 13: Use this CSS snippet to add play and pause buttons and add styling (in the CSS tab)

Add this CSS code to the above <head> tag area in the page settings. You will only be able to see these updates once you publish your page, they will not be visible in the designer because they are made with custom code.

If you want to adjust the colours or other styling you can experiment and save changes from the CSS area.

The above ,head. tag code area on the page settings of Webflow where you should paste your CSS code.
CSS code in the above <head> tag code area

See the Pen Accessible GIFs on Webflow by louise hill (@louise-hill) on CodePen.

The result

An awesome, lower carbon-emitting, accessible way to showcase your work. Check your GIF on different screen sizes to make sure everything is working nicely—the code you've copy pasted should automatically ensure your play and pause button look good on all screen sizes.

How can I help you make your website accessible?

I have lots of experience creating accessible digital products; running user testing and research to assess and improve accessibility; and creating accessible design systems and content.‍