Did an “Image Animated GIF” warning appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read below for an explanation of this warning, how animated GIFs impact your website’s accessibility, and how to fix it.
Table of Contents
- About the Image Animated GIF Warning
- Impact on Accessibility
- What accessibility problems can be caused by animated GIFs?
- Is it possible to have an animated GIF on an accessible website?
- Relevant WCAG 2.1 Success Criteria
- 1.1.1 Non-text Content – Level A
- 1.2.8 Media Alternative (prerecorded) – Level AAA
- 1.4.3 Contrast (Minimum) – Level AA
- 1.4.5 Images of Text – Level AA
- 1.4.6 Contrast (Enhanced) – Level AAA
- 1.4.9 Images of Text (No Exception) – Level AAA
- 2.2.2 Pause, Stop, Hide – Level A
- 2.3.1 Three Flashes or Below Threshold – Level A
- 2.3.2 Three Flashes – Level AAA
- How to Resolve an Image Animated GIF Warning
About the Image Animated GIF Warning
What is an animated GIF?
A GIF (graphics interchange format) is a type of file that, in its simplest format shows an image and can be a replacement for JPG or PNG image files. However, unlike JPGs or PNGs, GIFs can be animated to play a small, soundless video or series of images in a loop. GIFs typically play automatically, and cannot be paused.
What does the Image Animated GIF warning mean?
If you see the Image Animated GIF warning in an Accessibility Checker audit of your WordPress site, that means that we have identified the presence of an animated GIF on the site.
Why does Accessibility Checker flag a warning if a GIF is present on the page?
GIFs can be a great tool for displaying content in a fun and engaging way, but they often cause distraction and can negatively impact the experience for certain groups of users on your website because they play automatically and cannot be paused or stopped by users. There are ways to improve the accessibility of animated GIFs, as described below, but generally, it is not recommended that you include animated GIFs on your website if you want it to be fully accessible.
Accessibility Checker flags a warning when a GIF is present in order to remind you to manually review any animated GIFs on your website for their accessibility and/or to reconsider using animated GIFs, replacing them instead with static images or videos. Unfortunately, many of the accessibility problems that can exist in animated GIFs cannot be identified programmatically, and you will need to manually review your GIFs to determine if they are accessible or not.
How does Accessibility Checker test for GIFs?
While auditing your page or post content, Accessibility Checker will look at the HTML structure of the page to determine if a .gif file is present. If a .gif file is found, then Accessibility Checker will check to see if multiple frames are present in the GIF by looking for frame headers. If a GIF contains at least 2 frame headers, then Accessibility Checker will understand it to be animated and an Image Animated GIF warning will be flagged.
Impact on Accessibility
What accessibility problems can be caused by animated GIFs?
Animated GIFs can create a number of problems for users if not implemented with care, particularly those with photosensitive epilepsy. People with photosensitive epilepsy can actually have seizures triggered by rapid flashing on websites. This is perhaps the most serious problem that animated GIFs can cause on your website and one that you want to carefully consider when deciding if and which animated GIFs to include on your website. There is more information about photosensitive epilepsy and seizures on the Blinking or Scrolling Content error page.
In addition to possibly causing seizures, animated GIFs can also cause problems for other users outside of those with seizure disorders. Examples of other accessibility problems that can be caused by animated GIFs include:
- If the GIF does not have alt text describing it, blind and visually impaired users will not know what is happening in the animation and why it was included on the page.
- People who are easily distracted by movements, such as those with reading or attention disabilities, may have trouble reading static content on the page if there is an animated GIF looping endlessly near the text they are trying to read.
- If the GIF contains text that does not have appropriate color contrast, with the background, then people with low vision or possibly color blindness will not be able to read the text on the GIF.
- People on metered connections or using older devices and/or older browser versions (which frequently includes users of assistive technology), may experience performance problems due to the larger size of the animated GIF slowing down the load time on the web page.
Is it possible to have an animated GIF on an accessible website?
Yes, animated GIFs can be accessible and are okay to include on websites that need to meet the Americans with Disabilities Act (ADA), Section 508, and Web Content Accessibility Guidelines (WCAG), so long as they are created and added to the website in an accessible way.
Animated GIFs are accessible if:
- they are set to stop playing after 5 seconds.
- users have a way to pause or stop the GIF from playing.
- there is high-quality alternative text describing the GIF.
- the GIF’s animation does not contain rapid blinking or flashing.
- any text contained in the GIF has appropriate color contrast with the background.
Most standard GIFs that are found on the web or that are embedded from a source such as GIPHY are not accessible. These GIFs are, with rare exceptions, all set to loop indefinitely and would fail WCAG 2.2.2 Pause, Stop, Hide. If you want to include an animated GIF on your website and for the page to still be accessible, you likely need to create the GIF yourself or will need to edit one found on the web to make sure it stops looping after 5 seconds.
Relevant WCAG 2.1 Success Criteria
There are a number of WCAG success criteria that apply to animated GIFs which need to be followed if you want to ensure your GIFs are accessible. If the GIF includes text, such as a GIF animating the words “Thank You” then additional criteria related to text and color contrast apply.
1.1.1 Non-text Content – Level A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
1.2.8 Media Alternative (prerecorded) – Level AAA
An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.
1.4.3 Contrast (Minimum) – Level AA
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
1.4.5 Images of Text – Level AA
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.
1.4.6 Contrast (Enhanced) – Level AAA
The visual presentation of text and images of text has a contrast ratio of at least 7:1. Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1.
1.4.9 Images of Text (No Exception) – Level AAA
Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.
2.2.2 Pause, Stop, Hide – Level A
This guideline requires that for any moving, blinking or scrolling information that
- starts automatically,
- lasts more than five seconds, and
- is presented in parallel with other content,
there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.
2.3.1 Three Flashes or Below Threshold – Level A
This guideline states that webpages cannot contain anything that flashes more than three times in any one second period, or if it does flash, the flash is below the general flash and red flash thresholds. All accessible websites must meet this success criterion.
2.3.2 Three Flashes – Level AAA
If you would like your website to meet the stricter WCAG AAA level of accessibility, then you must meet the 2.3.2 success criteria and have nothing on your website that flashes more than three times per second.
How to Resolve an Image Animated GIF Warning
What to do (in short)
To resolve this warning, you need to review any GIFs that are present to ensure that they meet all applicable guidelines for accessibility and then either “Ignore” the warning in Accessibility Checker or remove the GIF from your page or post if it is not accessible.
How to find animated GIFs requiring review on your WordPress site
First, install our free Accessibility Checker WordPress plugin.
In most cases, it should be relatively easy to identify animated GIFs on your WordPress posts or pages because their animation should play on the backend of your website within the editor as well.
If you have added the GIF with HTML or it is not obviously visible in the editor, you can open the details tab in the Accessibility Checker meta box, then expand the Image Animated GIF warning to see a list of code that caused the warning to be flagged.
In the example above, the following code is being flagged with an Image Animated GIF warning:
<img src="https://demosite.equalizedigital.com/wp-content/uploads/2020/11/happy-Pooh.gif" alt="" class="wp-image-219"/>If this were your site you may be able to identify the GIF by looking at the name of the file or finding the image. If you can’t find the GIF on the backend of your website, try clicking the “View on page” link to open it on the front end of your website.
Note, this GIF is also missing alt text and would flag an Image Empty Alternative Text error in Accessibility Checker.
How to make animated GIFs accessible
Realistically, GIFs are not accessible and should be avoided whenever possible. Ask yourself – can you convey the information in another way, without a GIF? Would a regular (static) image do the job? Should the text in your GIF really just be text on the page? If you really want movement, would a video be better? Typically when presented with an Image Animated GIF warning, the best choice is to remove the GIF and replace it with something else.
However, if you would really like to use a GIF on your page, the best way to do so is to ensure that:
- It stops playing after a certain number of flashes or within 5 seconds.
- It has a visible pause or stop button.
- There is alternative text describing the GIF.
- The GIF animation does not contain rapid blinking or flashing.
- Any text in the GIF has appropriate color contrast with the text’s background.
The Trace Center’s Photosensitive Epilepsy Analysis Tool (PEAT) can be used to test animated GIFs to determine whether it is likely to cause seizures. W3.org has information on how to make sure that GIFs stop playing after 5 seconds.
Once you have determined your animated GIF is accessible, then you can Ignore the warning in Accessibility Checker, ideally noting that you have verified all of the above.
