A GIF, or a Graphics Interchange Format, is a file format that supports static and animated images. They are great at conveying reactions and responses without having to type a word. They’re one of the more light-hearted ways people communicate online. There’s just one issue.
The problem with screen readers and GIFs
Blind or visually impaired users depend on a screen reader to use a computer. Screen readers provide information about menus, icons, dialogue boxes and buttons.
They interpret GIFs like they do any other image. If there’s an alt-tag attribute, this is read aloud, and if there isn’t, it will often get described as “image”. Even if a GIF has text embedded within the image, this cannot be read.
GIPHY is one of the most popular GIF search engine databases and has over 300 million daily active users. Unfortunately, for visually impaired users this means very little. The site doesn’t offer native functionality to automate alt-tags or allow users to upload their own.
What this means is that GIFs are even less helpful than images to communicate with visually impaired users online.
It’s worth noting that GIFs themselves are not the most inclusive way to communicate online. To make your content as clear as possible, it’s better to use videos with Audio Description or images with well-written alt-tags. These are more likely to engage a visually impaired audience.
But, if you want to use GIFs online, there’s a way you can make them more accessible.
The accessible GIF plugin
We spoke to Harry Hurd at Clear Honest Design, who developed a WordPress plugin to help. It allows users to add custom alt-tags to GIFs from the GIPHY database; an accessible GIF tool.
Did it surprise you to learn about GIF limitations when it comes to screen readers?
It didn’t surprise me that GIFs on the internet were inaccessible to visually impaired and blind users. What did surprise me was that the official GIPHY WordPress plugin itself was so inaccessible.
Users couldn’t add alt tags to the GIFS to start with. Once added to a page, they were all set to Autoplay with no option to disable this functionality. And, all GIFs would take you back to the GIPHY site when clicked. Even in the hover-over state, related GIFs popped up within the window to tempt you over to the main GIPHY database. These were all features that would throw people using screen readers off.
As a sighted, non-disabled person, I found the whole process frustrating. Why would you want to click on a GIF within an article you’re reading to be taken to another page full of other GIFs? It didn’t make sense to me.
It’s a perfect example of how inclusive design can make an entire experience better for everyone, regardless of ability.
Harry Hurd
Why did you create the AX Gif tool?
We created the AxGIF plugin for the same reason that most people end up creating things. We wanted to find a solution to a practical problem that we needed for ourselves.
It was during the development of our articles that we had the brain wave. The task was to enable writers and contributors to upload content about online accessibility. We wanted to give them as many tools as we could to help get their message across.
When a member of the team suggested enabling GIFs, we assumed there would already be a product or app to automate alt-tags. But there wasn’t, so we made one instead.
We hope that more people will be inspired to create accessible products when existing solutions do not go far enough. This increases the chance that they will become the new normal. Often, it doesn’t take much for developers to create simple tools, apps and plugins, but they can do so much good. Besides, meme culture is fun and should be as inclusive as possible.
How did you develop the Accessible GIF plugin?
It was surprisingly simple to develop using GIPHY’s API. An API is a set of functions that allow you to access another website or service’s data and use it for yourself. In this case, it meant accessing GIPHY’s GIFs and tagging system.
The rest was common sense. We know that GIFs need alt tags so that screen readers (and people who have images turned off) can understand them. It only takes a few seconds to describe what’s going on in a GIF, but existing solutions were unavailable.
How does the Ax Gif plugin work?
The plugin pulls in the GIF title from GIPHY, allowing you to edit that field and make it more descriptive and useful. The way we implemented the GIFs on the front end is informed by research and best practice around GIFs. We know that repetitive and fast-paced movement can be distracting, and even triggering, for some people. We wanted to develop a standard to deal with that. So we created the functionality that would need users to click on each GIF to play them.
Read the University of Leicester’s Guide to Writing Effective Alt-Tags
How can people use the plugin?
The easiest way is to add Ax Gif to WordPress in the same way you would do with any other plugin.
- Go to ‘Add New Plugin’
- Search for AX Gif.
- Install plugin.
- In the content editor, select the AX Gif logo.
- A window should open that allows you to search GIPHY as you normally would.
- Select the GIF you would like to use
- Edit the alt text to be more descriptive.
You can also go to AX Gif – WordPress plugin | WordPress.org and download it from there.
We would like to think it’s relatively intuitive for people who are familiar with WordPress Plugins. If it’s not, that means we can do better! We’ve deliberately put it out into the wild as a work in progress. We hope that people can start to use it, interact with it and tell us how it can do better.
Do you have any plans to expand the Ax Gif plugin?
At the minute, we’re looking at ideas to resolve the Autoplay functionality. We’d like to add an optional button at the top of each webpage where a GIF is present. So, if there are lots of GIFs on a webpage, Autoplay mode can be switched on or off with ease.
Related services
To learn more about accessibility, take a look at our digital content accessibility workshops:
Introduction to accessibility
Content accessibility training
Bespoke content accessibility training