seo Question posted in
Some basic information to get you started with this can be found here.

How do I add alt text to a GIF that is actually a silent, looped, autoplay MP4 <video>? – SEO

I have a few posts on my WordPress website that have long GIF videos. In trying to cut down on the huge size of these GIFs, I’ve converted them to MP4 videos and now use the <video> tag to display them, like so:

<div>
<video src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>

My question is, what is the best way to add alt text like I would add on an <img> tag? These videos may be using a <video> tag, but really they’re more like and image and should be able to have alt text. What would be best for screenreaders and what would be best for SEO purposes?

Are there other ways to achieve my goal of smaller, more efficient GIFs that I’m not aware of?

Tags:

2

Answers


  1. 0

    Use the title attribute and this is valid on the VIDEO element. As ALT text describes a static image!

    <video title="xyz" ...>

    Like:

    <div>
<video title="xyz " src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>
    Login or Signup to reply.
  2. 0

    There are a few things you need to consider here:

    1. Does the video add anything for a screen reader user

      If not (i.e. the instructions beneath describe the video contents exactly) then it would be a best practice to hide it from a screen reader using aria-hidden="true". Don’t duplicate information for screen reader users. As your ‘captions’ are not actually captions I think you would be best doing this.

    2. make your ‘captions’ more generic

      Can’t fit? Try lifting up the bike up and getting it closer. This parking meter was a little short for my bike (see how the handlebars touch the meter) so I couldn’t get it as close as an empty pole, but still plenty close.

      The above example makes a reference to the video. Instead describe the step as if there wasn’t an accompanying video. Try changing it to something along the lines of:-

      Can’t fit? Try lifting up the bike up and getting it closer. The parking meter I tried to use was a little short for my bike and the handlebars touched the meter, so I couldn’t get it as close as an empty pole, but still plenty close.

      The above sentence does not reference the video in any way and makes sense on its own. If you make all of your ‘captions’ like this then the instructions should still make sense without the videos.

    3. Can you pause the video?

      Obviously you couldn’t pause the GIF but now you are using video you should allow people an option to pause all animations on the page. Either allow a video to be paused with a click or have a toggle on the page to pause all animations. These can be distracting for people with anxiety disorders etc. (especially when you have hundreds of videos on a page playing at once.)

    Your Use Case

    Given your use case, simply hiding the video element using aria-hidden="true" and updating your descriptions would strike a nice balance between providing the information in an accessible format and not overloading a screen reader user with duplicate information that adds no value (there is no point adding a title for each of the videos if they are described correctly underneath and the correct way to make a silent video accessible is to add enhanced audio descriptions of the scene, which is overkill for your use case.).

    Don’t forget to add a way to pause the videos as discussed, either one at a time or preferably all at once with a toggle switch near the start of the page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search