WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: GIF and accessibility

for

Number of posts in this thread: 4 (In chronological order)

From: Abby Kingman
Date: Fri, Nov 22 2019 2:13PM
Subject: GIF and accessibility
No previous message | Next message →

I feel a little silly about posting this, but here goes.

One of our marketing folks recently posted an article about how to create
and post GIFs as a way to boost your branding efforts. I sent her a note
asking if she might expand the article with a bit about how to make sure
these are accessible - can you add alt text, will they respect the
prefers-reduced-motion query, can they be made to pause? Sadly when I tried
googling for gif accessibility, I got a bunch of gifs about accessibility
(eye roll).

I did some quick screen reader testing, and got different results depending
on where the GIF was loaded (twitter, slack), but basically got buttons or
just nasty urls.

As far as I can find, there really is no way to make these accessible - is
that really true?? If not, can anyone post some resources?

Thanks!!

--
Abby Kingman, CPACC

Last Call Media

From: glen walker
Date: Fri, Nov 22 2019 3:09PM
Subject: Re: GIF and accessibility
← Previous message | Next message →

Are you asking about animated GIFs specifically, or just GIF support in
general?

For animated GIFs, some browsers have something built in. For example, on
firefox you can change your "image.animation_mode" to "none" for no
animation, or "once" to have it play once.

For chrome, you need a plugin to stop animations.

Internet explorer still lets you press the escape key to stop animations.

So if you wanted a solution for all browsers, you'd have to implement your
own pause button and then swap out the animated gif with a static gif.

As far as the alt text for an animated gif, it would be the same rules as
any image. Having something the describes the purpose of the image. If
describing the purpose involves more than a short sentence, then having an
alternative alt text, so to speak, would be a better usability experience.
When alt text is read, you don't have an easy way to pause then resume the
alt text, or navigate the alt text word by word or character by character
in case you hear something you need repeated. In that case, an extended
description might be needed. A more lengthy description could be
implemented as visually hidden text that the screen reader user has access
to or by using the longdesc attribute or by providing a link that goes to a
page with more details or via a disclosure widget. Lots of possibilities.


On Fri, Nov 22, 2019 at 2:13 PM Abby Kingman < = EMAIL ADDRESS REMOVED = > wrote:

> I feel a little silly about posting this, but here goes.
>
> One of our marketing folks recently posted an article about how to create
> and post GIFs as a way to boost your branding efforts. I sent her a note
> asking if she might expand the article with a bit about how to make sure
> these are accessible - can you add alt text, will they respect the
> prefers-reduced-motion query, can they be made to pause? Sadly when I tried
> googling for gif accessibility, I got a bunch of gifs about accessibility
> (eye roll).
>
> I did some quick screen reader testing, and got different results depending
> on where the GIF was loaded (twitter, slack), but basically got buttons or
> just nasty urls.
>
> As far as I can find, there really is no way to make these accessible - is
> that really true?? If not, can anyone post some resources?
>
> Thanks!!
>
> --
> Abby Kingman, CPACC
>
> Last Call Media
> > > > >

From: Barry Hill
Date: Sun, Nov 24 2019 2:19AM
Subject: Re: GIF and accessibility
← Previous message | Next message →

Hi

Here's a good article by the BBC on animated GIFs:
https://www.bbc.co.uk/gel/guidelines/how-to-make-accessible-animated-images

Cheers

Barry


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Abby
Kingman
Sent: 22 November 2019 9:13 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] GIF and accessibility

I feel a little silly about posting this, but here goes.

One of our marketing folks recently posted an article about how to create
and post GIFs as a way to boost your branding efforts. I sent her a note
asking if she might expand the article with a bit about how to make sure
these are accessible - can you add alt text, will they respect the
prefers-reduced-motion query, can they be made to pause? Sadly when I tried
googling for gif accessibility, I got a bunch of gifs about accessibility
(eye roll).

I did some quick screen reader testing, and got different results depending
on where the GIF was loaded (twitter, slack), but basically got buttons or
just nasty urls.

As far as I can find, there really is no way to make these accessible - is
that really true?? If not, can anyone post some resources?

Thanks!!

--
Abby Kingman, CPACC

Last Call Media
http://webaim.org/discussion/archives

From: Abby Kingman
Date: Mon, Nov 25 2019 1:17PM
Subject: Re: GIF and accessibility
← Previous message | No next message

Thanks all for replies. I think the best solution I found was adding
captions within the social media post. Here is an example that I just put
up, copying the format I found in another person's posts.
https://twitter.com/A11yAbby/status/1199049211024678915?s=20

--
Abby Kingman, CPACC

Last Call Media