All Collections
Accessibility
Best practices for accessible GIFs in MURAL
Best practices for accessible GIFs in MURAL
Bring fun to your mural with accessible GIFs that create a more inclusive experience.
Jen Butler avatar
Written by Jen Butler
Updated over a week ago

Note: This article recommends you use GIFs that can be paused or stopped but, at this time, we’re unable to do so within MURAL. However, we’re currently working to resolve this and will post solutions in future updates.

While GIFs and other animated content are a fun way to engage collaborators, they’re even more engaging when they’re accessible to everyone, including people with disabilities.

As a MURAL facilitator or owner, you can take full control over how accessible your mural is, including the GIFs within it. In fact, we have an article that provides accessibility best practices and a template that you can use to facilitate an accessible meeting. The recommendations below build off what’s in the template to provide more guidance on using GIFs.


Contents


Note: Within MURAL, members have access to an image library of unique funny GIFs, reaction GIFs, and more through GIPHY (available to all pricing plan members).

Maintain the ‘three-flashes or below’ threshold

Some people with seizure disorders can have a seizure triggered by flashing visual content. GIFs that flash or blink more than three times per second can trigger seizures or headaches. For these reasons, avoid using blinking objects or backgrounds and scrolling content.

Keep in mind that sometimes backgrounds will have flickering or other animated content. Too much flickering between GIFs and the background can also be unsafe.

Download this free PEAT (Photosensitive Epilepsy Analysis Tool) to help you identify seizure risks in animated content.


Pause, stop, or hide GIFs

For people with seizure disorders or other disabilities, it’s important to use GIFs that can be paused, stopped, or hidden, especially those that play for more than five seconds. This also helps prevent disorientation in people with certain cognitive disorders. Automatic or looped animations (including GIFs) can cause cognitive overload.

Currently, there are free tools on the internet that you can use to convert GIFs to videos. This is an accessible option that can be used when you’re unable to find a GIF that can be stopped or paused.


One GIF at a time

Too many GIFs can create a confusing mural and distract participants from the main content. Stick to one to two per mural if possible to ensure your collaborators stay engaged and avoid cognitive overload.


Ensure text contained in a GIF has appropriate color contrast

When text within images and GIFs meets WCAG (Web Content Accessible Guidelines) color contrast requirements, they become more accessible to people with low vision.


Caption GIFs with a text alternative

People with vision impairments need a text alternative such as alternative (alt) text and captions to experience non-text content. Alt text is usually embedded within images and GIFs and recognizable to screen readers. In MURAL, you can include a text alternative by adding captions.

As a general rule, you should try to keep alt text at 140 characters or less. Captions can be longer (there’s no hard-and-fast rule) but you should still keep them short and succinct. For example, if you’re writing a caption about a GIF that features Queen Elizabeth II of England giving a thumbs up, that’s likely all you need to note.

When short descriptions aren’t possible, include a description within the main content of the canvas or the body of the main text.


Consider a GIF’s most important elements when writing captions or alt text

Text that describes GIFs, images, and animated content should include the people, actions, emotions, locations, and movies or TV shows that are relevant to understanding the GIF. Descriptions should capture the focus or purpose.

Text, dialogue, or caption within a GIF

Include any text featured in a GIF and the source of the text, if known (for example, catchphrases from TV shows, like “How YOU doin’?”).

People and their actions

Write about specific people or characters and any actions important to understanding the context of the GIF.

Take a look at the GIF below (converted to video to ensure it's accessible and includes closed captioning options). The caption could read something like “Michael Scott (played by Steve Carrell) from the TV show The Office holds a speaker in the air, dances, and yells ‘Everybody dance now!’”

If this GIF instead featured unknown people dancing, the caption might read, “A group of people dance in an office. The caption reads ‘Everybody dance now!’”

Focus or purpose

What’s the point of your GIF? How is it relevant to your content? Even when a GIF doesn’t contain a character or person, the caption should still describe the focus or purpose of the GIF.

Emotions

GIFs often capture a particular emotion, which may or may not be accompanied by a caption. Feelings are important! Include them when they’re necessary to the “essence” of what the GIF is about. If Michael from The Office was crying and dancing in our GIF example, well, who wouldn’t want to know about that?

Movements and locations or backgrounds

Consider the movement in a GIF. If a camera suddenly pans to the left, this may be important to mention, depending on the context. Locations and backgrounds may also be important. Because Michael is typically in an office and the show is also called The Office, this isn’t crucial information (and there’s nothing in the image to confirm he’s in any particular place).

However, if Michael were in a living room or a church, or anywhere else we might not expect, it may need to be in your description.

Movies and TV shows

If a GIF is from a movie or TV show, mention the show, the characters, and the actors featured (if known). The details of a GIF, such as captions, may or may not be from the show or movie featured. If you know this, decide whether or not it's important to mention based on the purpose and focus of the GIF.

Don’t worry about the details

Unless they’re relevant to the meaning of the GIF, it’s generally not necessary to mention the background, people’s movements, what someone is wearing, or what they look like unless these things help explain the focus of the GIF or relate to the content you’ve created.

In The Office GIF example, Michael is wearing a suit, but that’s not important for understanding what the GIF is about unless, say, you wanted to use this GIF to demonstrate what people at your office should wear. However, it is important to mention he’s dancing since that’s the focus of the GIF.

If Michael wore something out of the ordinary, like a panda costume, that would be important to mention. It provides context for the GIF even if the GIF’s caption is unrelated.

Include audio descriptions for GIFs whenever possible

Audio descriptions work in much the same way as alt text, so consider the guidelines above when determining what should be said.

Note: Do you have best practice tips you'd like to share for facilitating accessible and inclusive meetings? MURAL’s DS+A (Design System & Accessibility) team would love to hear from you. Please contact the team at accessibility@mural.co.


This article was originally written by Nicole Troxell.

Did this answer your question?